1

Ao observar esta página pode notar que existem links como Home, Services, Work, About e Blog. Quando você clica em Services ele muda de pagina utilizando um efeito de slider, como se a página estiver sendo trocada da direita para esquerda, e o mesmo acontece com os outros links.

Eu queria colocar esse efeito nas minhas pagina web, sendo que eu não sei o nome do recurso, eu acho que pode ser feito em Jquery ou CSS.

Eu somente preciso saber o nome desse recurso para poder implementar nas minhas paginas.

//////////////////////////////////// atualização

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap-theme.css" />
    <h:outputStylesheet library="css" name="bootstrap.css" />
    <h:outputStylesheet library="css" name="sistema.css" />
    <link rel="stylesheet" type="text/css"
        href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="jquery-ui.js" />
    <h:outputScript library="js" name="bootstrap.js" />
</h:head>

<script type="text/javascript">
    //<![CDATA[
    $(window).load(function() {
        function transitionPage() {
            // Hide to left / show from left
            $("#home").toggle("slide", {
                direction : "left"
            }, 500);

            // Show from right / hide to right
            $("#servico").toggle("slide", {
                direction : "right"
            }, 500);
        }

        $(document).ready(function() {
            $('#home').click(transitionPage);
            $('#servico').click(transitionPage);
        });
    });//]]>
</script>

<h:body>



<div id="part2">
    <div id="home">
    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    </div>
    <div id="servico">
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </div>
</div>




    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</h:body>
</html>

sendo que mesmo assim não pegou!

3

1 Resposta 1

1

Vou deixar um exemplo simples utilizando jQuery e jQuery-UI.

Esse é um tipo de transição de página, que pode ser feito de N formas diferentes.

Essencialmente, basta ter duas div's em sua página, e tratar as mesmas como se fosse páginas distintas. Feito isto, basta alternar entre as mesmas com algum efeito.

    font: normal normal 16px Arial;
}

p {
    font-size: 40px;
    margin: 100px 0 0 0;
}

.nodisplay {
    display: none;
}

#wrapper {
    position: relative;
    width: 480px;
    height: 240px;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

#page1 {
    background-color: #003366;
    color: #FFFFFF;
    display:inline-block;
}

#page2 {
    background-color: #F6BC0C;
    color: #000000;
    float:left;
}
  <script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script><style type="text/css"></style>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
  <script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
function transitionPage() {
    // Hide to left / show from left
    $("#page1").toggle("slide", {direction: "left"}, 500);

    // Show from right / hide to right
    $("#page2").toggle("slide", {direction: "right"}, 500);
}

$(document).ready(function() {
    $('#page1').click(transitionPage);
    $('#page2').click(transitionPage);
});
});//]]> 

</script>

</head>
<body>
  <div id="wrapper">
    <div id="page1" class="page" style="display: inline-block;">
        <p>Page 1</p>
    </div>
    <div id="page2" class="page nodisplay" style="display: none;">
        <p>Page 2</p>
    </div>
</div>

Fonte: JsFiddle

Existem muitas bibliotecas que facilitam a utilização, e de muitas formas distintas. A PageTransitions como o @Techies apontou é uma delas.

2
  • ainda não pegou, será que ainda pode me ajudar? Acabei de atualizar a postagem.
    – user10264
    3/12/2015 às 15:39
  • 1
    @wladyband No caso, seria melhor você abrir outra pergunta. Nesta você queria saber o que era, agora já está implementando. São coisas distintas. Abra outra pergunta que ficarei feliz em responder.
    – Randrade
    3/12/2015 às 15:42

Você deve fazer log-in para responder a esta pergunta.