How to apply slider effect on web page?

Asked

Viewed 539 times

1

While observing this page you may notice that there are links like Home, Services, Work, About and Blog. When you click on Services it changes pages using a slider effect, as if the page is being switched from right to left, and so are the other links.

I wanted to put this effect on my web page, since I don’t know the name of the resource, I think it can be done in Jquery or CSS.

I just need to know the name of this resource in order to implement in my pages.

//////////////////////////////////// updating 

<?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>

and yet you didn’t take!

javascript jquery css
  • 2

    http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/

  • 1

    Search by Transition Pages.

  • very good the suggestions!

1 answer

1


I’ll leave a simple example using jQuery and jQuery-UI.

This is a kind of page transition, which can be made of N different shapes.

Essentially, all you need is two div's on your page, and treat them as if they were separate pages. Once this is done, simply switch between them with some effect.

    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>

Source: Jsfiddle

There are many libraries that facilitate the use, and in many different ways. A Pagetransitions as @Techies pointed out is one of them.

  • still not caught, Can you still help me? I just updated the post.

  • 1

    @wladyband In case, you’d better open another question. In this you wanted to know what it was, now it’s already implementing. They are separate things. Open up another question I’d be happy to answer.

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.