Jump to content
Fórum Script Brasil
  • 0

Transição de páginas


MTavares

Question

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.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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>

Edited by MTavares
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.6k
×
×
  • Create New...