How to apply slider effect in web page?

Question

How to apply slider effect in web page?

Navigation

#1 by (1 votes)

1

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

I wanted to put this effect on my webpage, since I do not know the name of the feature, I think it can be done in Jquery or CSS.

I just need to know the name of this feature to be able to implement on my pages.

/////////////////////////////////// update

<?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><!--LatestcompiledandminifiedJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</h:body>
</html>

And even though it did not catch on!

javascript jquery css

asked by anonymous 02.12.2015 / 20:05

1 answer

How to do in the code light where it is in orange Using multiple Google Maps API instances

score 1 · Accepted Answer

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

This is a type of page transition , which can be done in N different ways.

Essentially, just have two div's on your page, and treat them as if they were separate pages. Once this is done, just 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 make it easy to use, and in many different ways. The PageTransitions as @Techies pointed out is one of them.