How do you get the implementation of PageTransitions with Jquery?

0

Look at the Wix site;

link

It may be noted that by clicking on links like Home, Services, Work, Blog, it applies an implementation called PageTransitions with Jquery.

I did an implementation with the help of some employees of the Stack Overflow website that was like this;

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

What's wrong? I think it's bullshit.

    
asked by anonymous 03.12.2015 / 16:50

0 answers