Transição de páginas

MTavares · Setembro 9, 2012

Olá colegas.

tudo bem? estou querendo desenvolver um site, do qual as transições de páginas sejam estilo slides. Tentei achar algo parecido, mas o site do IE 9 diz exatamente o que realmente quero. Veja abaixo:

www.internetexplorerbrasil.com/experimente-agora

Seria JQuery? Se for, alguém poderia apenas apontar a direção que devo tomar? pois sou um pouco leigo no que diz JQuery.

Obrigado.

MTavares · Setembro 20, 2012

Pessoal, não precisa ser exatamente igual ao site :blush: , mas que tenha os mesmos fundamentos, ou seja, ao clicar em um item do menu, a página agir como se fosse um slide.

Obrigado

MTavares · Setembro 20, 2012

Pessoal, pode ser desse tipo também:

www.wampserver.com/en/

MTavares · Setembro 20, 2012

Consegui esse código, porém quando clico no item do menu, ele não para na altura correta. A proposta do projeto é criar um menu fixo no topo (do qual já consta) e conforme clica no item do menu, a página desce até a div do item.

&lt;script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#menu {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:10px;
    border:1px solid black;
    background:#CCC;
}

#menu {
    _position: absolute;
}

</style>

</head>
<body id="topo">
              <div id="menu" style="border:1px solid #000">
                <a href="#topo" onclick="$('html,body').animate({scrollTop: $('#topo').offset().top}, 1500);">Home</a>
                <a href="#topico_1" onclick="$('html,body').animate({scrollTop: $('#topico_1').offset().top}, 1500);">Ir ao tópico</a>
                <a href="#topico_2" onclick="$('html,body').animate({scrollTop: $('#topico_2').offset().top}, 1500);">Ir ao tópico 2</a>
                <a href="#topico_3" onclick="$('html,body').animate({scrollTop: $('#topico_3').offset().top}, 1500);">Ir ao tópico 3</a>
              </div>
                <div style="height:100px;border:1px solid #000"></div>                
                <div style="height:300px;border:1px solid #000">
                    <a id="topico_1" ><h1>Tópico 1</h1></a>
                    <a href="#topo" onclick="$('html,body').animate({scrollTop: $('#topo').offset().top}, 1500);">Voltar ao Topo</a>
                    <p>Nam iaculis porttitor fermentum. Nulla cursus, urna in eleifend elementum, lacus eros varius ligula, et accumsan nisl nisl et odio. Integer et mauris eget leo sagittis sollicitudin. Vestibulum diam sapien, bibendum nec imperdiet non, elementum molestie felis. Duis ultrices, nisi et ornare volutpat, velit tellus consequat ipsum, quis accumsan elit nisi sit amet massa. Phasellus posuere luctus libero. Maecenas a est a metus condimentum vulputate. In hac habitasse platea dictumst. Etiam tincidunt semper enim, vitae posuere massa accumsan nec. Morbi nec est eget sem cursus semper. Proin rutrum nulla vitae purus adipiscing scelerisque. Praesent dapibus luctus viverra. Fusce vel risus id lectus volutpat ultrices.</p>
              </div>
                <div style="height:300px;border:1px solid #000">
                <h1><a id="topico_2" >Tópico 2</a></h1>
              </div>                
                <div style="height:300px;border:1px solid #000">
                <h1><a id="topico_3" >Tópico 3</a></h1>
              </div>                
</body>

Editado Setembro 20, 2012 por MTavares

MTavares · Setembro 20, 2012

Olhando com calma esse código... ele funciona perfeitamente, porém ele vai para o topo da página... tem como afastar do topo?

Entrar

Transição de páginas

Pergunta

MTavares

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

MTavares

Link para o comentário

Compartilhar em outros sites

MTavares

Link para o comentário

Compartilhar em outros sites

MTavares

Link para o comentário

Compartilhar em outros sites

MTavares

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades