All geek questions in one place

JQueryPiling Animation Page

I am looking for jquery animations similar to this site http://cuberto.com/ . So far I have followed this link http://codepen.io/mirmibrahim/pen/MJoGBY via pagePiling.js. Can someone help me complete it exactly the same as on curberto. I don’t know how to load half of the page with the image and half with the text and open the next section to be from the square animation on the first slide.

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>pagePiling.js plugin - Horizontal scroll</title> <meta name="author" content="Alvaro Trigo Lopez" /> <meta name="description" content="pagePiling.js plugin by Alvaro Trigo." /> <meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" /> <meta name="Resource-type" content="Document" /> <link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" /> <link rel="stylesheet" type="text/css" href="examples.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!--script src="../jquery-1.9.1.js"></script--> <script type="text/javascript" src="../jquery.pagepiling.js"></script> <script type="text/javascript"> $(document).ready(function() { /* * Plugin intialization */ $('#pagepiling').pagepiling({ direction: 'horizontal', menu: '#menu', scrollingSpeed: 2000, anchors: ['page1', 'page2', 'page3', 'page4'], sectionsColor: ['black', '#1C252C', '#F27B1D', '#39C'], navigation: { 'position': 'right', 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4'] }, afterRender: function() { $('#pp-nav').addClass('custom'); console.log("After Render "); }, afterLoad: function(anchorLink, index) { // $.fn.pagepiling.setAllowScrolling(false); console.log("After Load " + index); if (index == 1) { console.log("index " + index); } else if (index == 2) { } if (index > 1) { $('#pp-nav').removeClass('custom'); } else { $('#pp-nav').addClass('custom'); } }, onLeave: function(index, nextIndex, direction) { console.log("After Load " + index); if (index == 1) { /* $( "#block" ).animate({ width: "100%", opacity: 0.4, marginLeft: "0.6in", fontSize: "12em", borderWidth: "20px" }, 4000 , function() { // Animation complete. //alert("s"); }); */ $("#block").animate({ width: "58%" }, 1000, function() { console.log("animation finished"); $.fn.pagepiling.setScrollingSpeed(500); }); } else if (index == 2 && nextIndex == 1) { $("#block").animate({ width: "0%" }, 3000, function() { console.log("animation finished"); $.fn.pagepiling.setScrollingSpeed(2000); }); } } }); }); </script> <style> #section1 img { margin: 20px 0; opacity: 0.7; } /* colors * --------------------------------------- */ #colors2, #colors3 { position: absolute; height: 163px; width: 362px; z-index: 1; background-repeat: no-repeat; left: 0; margin: 0 auto; right: 0; } #colors2 { background-image: url(imgs/colors2.gif); top: 0; } #colors3 { background-image: url(imgs/colors3.gif); bottom: 0; } /* Overwriting fullPage.js tooltip color * --------------------------------------- */ #pp-nav.custom .pp-tooltip { color: #AAA; } </style> </head> <body> <ul id="menu"> <li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li> <li data-menuanchor="page2"><a href="#page2">Page 2</a></li> <li data-menuanchor="page3"><a href="#page3">Page 3</a></li> </ul> <div id="pagepiling"> <div class="section" id="section1"> <!--img src="imgs/pagePiling-plugin.gif" alt="pagePiling" /--> <div class="intro"> <div> <div style="background:#F6303F;border-left: thick solid #F6303F; height:150px; width:8px; margin-left:42%;" id="block"> </div> <h1 style="color: white;">DIGITAL</h1> <p style="color: white;">CREATIVE AGENCY</p> </div> </div> </div> <div class="section"> <div class="intro"> <h1>Simple to use</h1> <p>Just use the option direction: 'horizontal' to have it working!</p> </div> </div> <div class="section" id="section3"> <div class="intro"> <h1>Isn't it great?</h1> <p>Just as you expected!</p> <div id="colors2"></div> <div id="colors3"></div> </div> </div> </div> </body> </html>
+5
source share
1 answer

I think pagepiling.js might be the wrong direction because it just animates on one page, not animates between two pages.

The way I've handled such things in the past is a PJAX plugin like Barba.JS , which allows you to add animated transitions between site navigation events. Barba is fascinated by changing the page by manually changing the URL, capturing new content for the new page, and performing a transition (in which you can animate elements like Cuberto!) Between the old and new pages.

Let me know if this is helpful or if I missed this point and I will try to update my answer accordingly!

EDIT: Just realized this is a seven-month question, but hopefully this is useful to someone nonetheless!

0
source

Source: https://habr.com/ru/post/1263238/

More articles:


All Articles