【Foreword】
The usage of fullPage.js has been summarized before, but full-screen scrolling is often combined with gorgeous animations to be more tasteful, so let’s summarize the animation effects of fullPage page turning.
When some pages are scrolled down, some elements will produce some animation effects. Most of these animations are realized by css3, and because they use css3, most browsers below Ie8 do not support it. At this time, we can write hacks , or simply ignore these browsers
You can use fullPage.js and Animation.css to achieve "scrolling" animation effects, that is, use CSS3 to perform animations . In addition to this, there is another method, jQuery animate() animation , which I will introduce in a later article.
【text】
Next, I will explain how to use fullPage.js and animate.css to achieve scroll-based animation effects
Our page consists of three sections, each of which fills the page (thanks to fullPage). When the user scrolls the mouse, the page jumps to the next section. Alternatively, navigation is also possible via the pagination links on the right. Everytime when we scroll or navigate, some animation is triggered, like: bring the image to a certain position
[1] Let's first explain what steps are required to trigger the animation
Need to use the callback function provided by fullPage
In our case, more specifically, we want to animate the second and third parts, so we'll use the onLeave callback function. If we want to "animate" the first part, we can use the callback function afterLoad. In the same way, to animate the slides, we should use the afterSlideLoad and onSlideLeave functions.
Using jQuery, we will dynamically add css animations (provided by animate.css), and we will also apply the animations to the elements sequentially, using the animate-delay css property
【Callback function list】
(1) afterRender (after rendering is complete)
The callback function after the page structure is generated, or the callback function after the page initialization is completed ---> often used for the first page
(2) onLeave (before leaving)
The callback function before scrolling can be understood as ---> the function before leaving a page
Receives 3 parameters index, nextIndex and direction:
①. index is the serial number of the "page" left, starting from 1;
②. nextIndex is the serial number of the "page" scrolled to, starting from 1;
③. direction determines whether to scroll up or down, the value is up or down
(3) afterLoad (after loading)
The callback function after scrolling to a certain screen can be understood as ---> the function executed when reaching a certain page
Receive two parameters anchorLink and index: anchorLink is the name of the anchor link, index is the serial number, starting from 1
(4) afterSlideLoad (after loading the slide)
The callback function after scrolling to a certain horizontal slider can be understood as ---> the function executed when the slideshow of a certain page is reached
Similar to afterLoad, receives anchorLink, index, slideIndex, direction 4 parameters
(5) onSlideLeave (before leaving the slide)
The callback function before a horizontal slider is scrolled, which can be understood as ---> the function executed when the slideshow of a certain page is left
Similar to onLeave, receives anchorLink, index, slideIndex, direction 4 parameters
[2] The following steps are used to make animations according to the case
(1) Basic structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例讲解</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<style type="text/css">
.one{width: 100px;height: 100px;background-color: #00bcd4;display: inline-block;
border-radius: 100%}
</style>
</head>
<body>
<div id="main_body">
<div class="section">
<div class="one one1"></div>
<div class="one one2"></div>
<div class="one one3"></div>
</div>
<div class="section">
<div class="slides slides1">1</div>
<div class="slides slides2">2</div>
<div class="slides slides3">3</div>
</div>
<div class="section">Third screen</div>
</div>
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery.fullPage.min.js"></script>
<script src="../js/jquery.fullPage.js"></script>
<script>
$(function(){
$("#main_body").fullpage({
sectionsColor:['red','green','yellow']
});
})
</script>
</body>
</html>
(2) Next, add the animation of the home page after the loading is completed, then use
afterRender
(
the callback function after the initial page loading is completed
)
afterRender:function(){//The callback function after the page is loaded for the first time
$(".one1").addClass('animated bounceInDown');
$(".one2").addClass('animated lightSpeedIn ');
$(".one3").addClass('animated wobble');
}
(3) Then add the animation when scrolling to a certain screen, then use afterLoad ( the callback function after scrolling to a certain screen )
afterLoad:function(anchorLink,index){//Callback function after scrolling to a certain screen
if(index == 2){
$(".slides1").addClass('animated flipInX');
$(".slides2").addClass('animated flipInY');
$(".slides3").addClass('animated flipInX');
}
}
In summary, the animation effect can be triggered when the screen is scrolled.
[3] Reset the animation effect of each page
Friends who use fullpage.js and animate.css to make animations must have such a problem. When the page scrolls back and forth, the animation can only be executed once.
For example: when the animation of the second page is loaded, the animation will not appear when you turn to the second page, because the CSS already contains this property and the effect is achieved. As a result, if we want to reload the animation, we must first reset the CSS property.
(1) The popular method:
afterLoad:function(anchorLink,index){//Callback function after scrolling to a certain screen
if(index == 2){
$(".slides1").addClass('animated flipInX');
$(".slides2").addClass('animated flipInY');
$(".slides3").addClass('animated flipInX');
setTimeout(function(){
$(".slides1").removeClass('flipInX');
$(".slides2").removeClass('flipInY');
$(".slides3").removeClass('flipInX');
},1000);
}
}
That is, using setTimeout (timed action), the animation properties are removed in a short time after the animation is executed.
However, this method has disadvantages: the animation duration and the property removal duration are difficult to strictly control
(2) Use onLeave provided by fullPage.js (callback function before scrolling/leaving)
onLeave:function(index,nextIndex,direction){//Callback function before scrolling/before leaving
if(index == 2){
$(".slides1").removeClass('flipInX');
$(".slides2").removeClass('flipInY');
$(".slides3").removeClass('flipInX');
}
}
.