I am looking for jquery animation similar to this website http://cuberto.com/. So far i have accomplished this link http://codepen.io/mirmibrahim/pen/MJoGBY through pagePiling.js. Can anyone assist me complete it exactly the way on curberto. I dont know how to load half of the page with image and half with text and open the next section to be from the square animating on 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>
I think pagepiling.js might be the wrong direction because it just animates on one page, rather than animating between two pages.
The way I've handled stuff like this in the past is with a PJAX plugin like Barba.JS, which allows you to add animated transitions between site navigation events. Barba hijacks the page change by changing the URL manually, grabbing new content for the new page, and performing a transition (in which you can animate elements like Cuberto does!) between the old and new pages.
Let me know if this is helpful, or if I missed the point, and I'll try to update my answer accordingly!
EDIT: Just realized this is a seven-month old question, but hopefully this is helpful to someone nonetheless!