Unconfigured Ad Widget

Collapse

Anúncio

Collapse
No announcement yet.

Efeito igual ao site skitter-slider.net

Collapse
X
 
  • Filter
  • Tempo
  • Show
Clear All
new posts

  • Font Size
    #1

    Duvida Efeito igual ao site skitter-slider.net

    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!
    vgruk.com
    Similar Threads

  • Font Size
    #2
    Dê uma olhada nesse link: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...
    Se expressarmos gratidão pelo que temos, teremos mais para expressar gratidão... Agradeça!

    Comment


    • Font Size
      #3
      Obrigado, 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!
      vgruk.com

      Comment


      • Font Size
        #4
        Um efeito parecido, que eu vi e estava pensando em usar uma vez, é feito com o JQquery mobile, no evento Swype. Mas nada impede de colocar links que mudem a página, como um menu.

        Link: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...

        Você pode tanto arrastar a imagem com o cursor (simulando a transição do celular), como clicar nas flechas no canto inferior esquerdo. Veja se isso resolve, se não ajudar dê um toque e nós veremos o que podemos fazer.
        Se expressarmos gratidão pelo que temos, teremos mais para expressar gratidão... Agradeça!

        Comment


        • Font Size
          #5
          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!
          vgruk.com

          Comment


          • Font Size
            #6
            Então analise aquela página para ver os scripts, aquilo é feito com javascript, e provavelmente é jQuery mesmo.

            Dê um botão direito > exibir código fonte da página e vá vendo os scripts que ela usa.
            Se expressarmos gratidão pelo que temos, teremos mais para expressar gratidão... Agradeça!

            Comment


            • Font Size
              #7
              Obrigado, vou verificar melhor e com mais atenção o código!
              vgruk.com

              Comment


              • Font Size
                #8
                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: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar....

                Segue o código: da index.php

                Código HTML:
                <!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", 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: Apenas usuários registrados e ativados podem ver os links., Clique aqui para se cadastrar...

                Obrigado!
                vgruk.com

                Comment

                X
                Working...
                X