Efeito igual ao site skitter-slider.net

jgainfo · 26 de janeiro de 2015

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!

DiF · 26 de janeiro de 2015

@jgainfo,

Este efeito que você quer, é chamado de parallax em horizontal

Veja varios exemplos aqui: http://speckyboy.com/2012/07/20/the-parallax-scrolling-effect-40-examples-and-tutorials/

jgainfo · 26 de janeiro de 2015

Obrigado "dif", 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!

DiF · 26 de janeiro de 2015

@jgainfo,

Embora o efeito parallax horizontal combinado com requisição ajax já atenderia seu problema.

Mas pesquisando mais a fundo, o efeito desejado em si é chamado de horizontal page animation, ou seja, são transições animadas de páginas.

Exemplo online

Se quiser saber mais como implementar o site é: http://manos.malihu.gr/horizontal-page-animation-to-id-with-jquery/

jgainfo · 27 de janeiro de 2015

Obrigado mais uma vez pela atenção "Dif"! Mas esses exemplos eu teria que fazer uma "Single Page", ou seja carregar todo conteúdo de uma vez e criar links âncoras para a seção que eu quisesse clicando no link. Percebe que nesse tipo aparece a barra de rolagem na horizontal, o que já não acontece no site que eu citei e também muda a url. Obrigado!

DiF · 27 de janeiro de 2015

@jgainfo,

O que recomendei, é que implemente os exemplos do jeito que você quer... se não quer barra de rolagem use overflow-x: hidden

Só para deixar claro, o efeito do site do seu exemplo usa diversos plugins jquery para chegar ao efeito final.. como por exemplo o jquery easing( responsável pelos efeitos de animação) dentre outros alguns próprios deles.

não existe um plugin que faça exatamente o que você quer sem ter que implementar.

Mas esses exemplos eu teria que fazer uma "Single Page"

Não. você pode aplicar o efeito usando requisições ajax se quiser.. basta entender como funciona.

Ps: o efeito do ultimo site que citei é o que mais se aproxima do seu propósito.e ainda sim teria que implementa-lo

jgainfo · 27 de janeiro de 2015

Tá certo, muito obrigado! É verdade ele usa vários plugin's mesmo, vou testando aqui pra ver se chego próximo ou conseguir o efeito que quero!

jgainfo · 13 de fevereiro de 2015

Oi, tudo bem! 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.e.../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.PUSHSTATEhistory.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", ou até com o plugin "history.js", 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 de novo 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!