Efeito igual ao site skitter-slider.net

[phpstyle 0]

Oi, tudo bem pessoal! Gostaria de saber como eu faço o efeito igual ao do site "skitter-slider.net", que quando você clica num link do menu, o conteúdo da página em questão é carregado com um efeito tipo "slider", vindo da direta para esquerda, fazendo com que o site fique mais dinâmico e parecendo sem o efeito de refresh.

E o interessante e que se você clica no menu na ordem da esquerda para a direita, a página é carregada da direita para a esquerda e se você voltar ou seja clica da vindo da direita para a esquerda a página é carregada da esquerda para a direita!

Penso que seja feito com jquery e com a propriedade .ajax(), talvez.

Se alguém puder me ajudar como proceder para implementar esse código eu desde já ficaria meuito grato!

Obrigado!

[wilnet 92]

Olá phpstyle, blza!

 

Segue um link simples como exemplo.

 

http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html

 

Espero ter ajudado,

 

vlw

[phpstyle 0]

Obrigado "wilnet", show de bola este site que você me passou! Mas creio que ainda não seja esse efeito ou não precisa do efeito Parallax. Acredito que com Algum código em Jquery consiga isso. Pois no site que citei ele faz uma transição do conteúdo vindo dos lados e dependendo da ordem que é clicado a ordem muda e ainda aparece na URL, bem interessante. Mas valeu, vou continuar procurando algo e esperando mais alguém responder! Obrigado!

[angelorubin 142]

Veja se algo assim ajuda - http://jsfiddle.net/angelorubin/fbz78xzh/embedded/result

Mas ainda acredito que utilizando um plugin, seja uma melhor opção, pois ele vai lhe oferecer opções complexas.

OBS: Utilizei o animate do jQuery no exemplo.

[jgainfo 0]

Obrigado, Mas no site que citei ele faz uma transição do conteúdo vindo dos lados e dependendo da ordem que é clicado a ordem muda e ainda aparece na URL, bem interessante. Mas valeu, vou continuar procurando algo e esperando mais alguém responder! Obrigado!

[wilnet 92]

phpstyle ou jgainfo rsrsrs

 

No exemplo que passei, pelo que pude observar ele faz o mesmo efeito do seu citado.

 

http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html

 

Clicando nos menus ele desliza para a esquerda ou direita, na mesma ordem do seu mencionado.

 

Quanto a exibição da URL, isso você poderá inserir nos BOX tb

 

vlw

[Rafael Sirotheau 43]

Desenvolvi algo assim há um tempo em um projeto no WordPress... O que utilizei foi o seguinte:

- History API para atualização do location sem refresh.
- $.load() para carregar o conteúdo desejado.
- $.animate() ou css transitions para fazer o efeito de vir dos lados.

Juntando tudo isso, a lógica é mais ou menos a seguinte:
- Ao clicar no link, chamo o $.load() para carregar apenas o bloco de conteúdo que me interessa.

- Enquanto carrega, uma animação de loading é exibida na tela (para evitar que o usuário pense que o site deixou de responder).
- Com o carregamento finalizado, o conteúdo é inserido em uma div temporária para, então realizar o efeito de slide.
- Assim que o efeito de slide for chamado, realizo um .pushstate no history para alterar a url no location.
- Pronto.


Essa é a forma dinâmica de fazer. Porém, no site que você passou, todo o html das seções já esta carregado. Sendo assim, não é feito nenhum .load(). Então, o exemplo do wilnet é o que mais se assemelha ao site que você forneceu.


Abs,

[jgainfo 0]

Obrigado "wilnet" e "Rafael Sirotheau"! Realmente o Site seria quase como o site que o "wilnet" passou. Os efeitos esão como eu falei, mas o conteúdo todo está em uma única página e a url não muda. Eu tenho as páginas separadas em .php no caso e gostaria igual ao que o "Rafael Sirotheau" citou carregasse em uma box(div) e alterasse a url.

 

Teria como você passa o código que fez "Rafael Sirotheau" pra eu ter uma melhor idéia de como implementa-la, por favor?

 

Mais uma vez grato pela atenção!

[jgainfo 0]

Bom! Eu consegui fazer um exemplo bem próximo ao que quero, depois de muito procurar e fazer testes.

 

Funciona da seguinte forma: Clico no link e logo em seguida carrega a página utilizando o método/função "onload", depois aplica um efeito e altera a url da página em questão. Link do exemplo: http://decizie.esy.es/exemplos/jquery-onload/.

 

Segue o código: da index.php

<!doctype html>
<head>

<title>Exemplo de Jquery Onload</title>

<style type="text/css">
#menu { margin: 10px auto; width: 300px; }
#menu ul { list-style: none; }
#menu ul li { margin: 0 auto; display: inline-block; }
#menu ul li a { padding-right: 39px; text-decoration: none; }
#conteudocentral { margin: 0 auto; width: 300px; height: 200px; background: #ccc; border-radius: 10px; }
#conteudocentral h1 { margin-top: 30px; width: 300px; height: auto; text-align: center; float: left; }	
#conteudocentral p { text-align: center; }
</style>

<script type='text/javascript' src='jquery-1.9.0.min.js'></script>

<script type="text/javascript">
	$(document).ready(function(){
		$("#menu a").on('click', function(e) {
			e.preventDefault();
			var href = $(this).attr('href');
			$("#conteudocentral").hide("slow").load( href +" #conteudocentral").show('slow');
			// HISTORY.PUSHSTATE
						history.pushState('', 'New URL: '+href, href);
						e.preventDefault();
		});
	});
</script>

</head>

<body>
<nav id="menu">
	<ul>
		<li><a href="index.php">Home</a></li>
		<li><a href="sobre.php">Sobre</a></li>
		<li><a href="contatos.php">Contatos</a></li>
	</ul>
</nav>
<div id="conteudocentral">
	<h1>Home</h1>
	<p>Esta é a página Inicial!</p>
</div>
</body>
</html>

Porém falta algumas coisas.

 

1. Gostaria de quando alterar o histórico do navegador e a página alterasse também. Vi algo com o método/função "onpopState", "replaceState", algo com o "history", mas ainda estou tentando implementar.

 

2. Sobre o efeito igual o do Site "skitter-slider.net", eu não sei se poderá ser feito, ou seja, o efeito de apresentar a página de acordo com a sequência que quando clica no menu na ordem da esquerda para a direita, a página é carregada da direita para a esquerda e se você voltar ou seja clica da vindo da direita para a esquerda a página é carregada da esquerda para a direita.

Se alguém souber como eu procedo para colocar um efeito da página/conteúdo vindo da direita para a esquerda, seria legal!

 

3. O conteúdo das outras páginas, no caso do exemplo, a "sobre.php" e "contato.php" eu tenho que colocar denovo a "div" com o "id - conteudocentral" pra poder pegar corretamente, e nos exemplos que vi na net precisaria colocar a div com o id no caso do exemplo "conteudocentral" apenas uma vez na "index.php".

 

 

Muito obrigado pela ajuda de todos que compartilharam o conhecimento e me ajudaram e espero contar ainda!

Foi desse site que consegui retirar a função de alterar a url e ele também tem a de history, porém não entendi direito como posso implementa-la no meu código!

 

Site: http://html5.gingerhost.com

 

Obrigado!