Required Libraries
For this tutorial, past the required recordsdata of fullPage.js and Animate.css, I’ve additionally integrated Bootstrap 5’s CSS file. This isn’t important; I added it solely as a result of I needed to reap the benefits of Bootstrap types.
With that in thoughts, in the event you look below the Settings tab of our demo pen, you’ll see that there are three exterior CSS recordsdata and one exterior JavaScript file.
The Course of
Our web page contains 4 sections; each filling the web page (because of fullPage). Customers will bounce to the following part by scrolling, or navigating by way of the pagination hyperlinks on the proper. Every time that occurs, we’ll set off some animations, like bringing the pictures into place, for instance.
Earlier than displaying the code that may fireplace the animations, let’s first cowl the required steps:
First, Customise fullPage a Bit
We’ll customise fullPage slightly bit so the sections’ content material will sit within the heart except their content material exceeds the viewport peak. On this state of affairs, a vertical scrollbar will seem. That is solely helpful on small screens the place the weather are stacked and the animations don’t play. On massive screens, we count on that each one parts will seem on the display screen with none scrollbars.
Use the onLeave Callback
We have to reap the benefits of the “callback” features that fullPage offers. Extra particularly, in our case, we need to animate the second, third, and fourth sections, so we’ll use the onLeave callback. If we needed to animate the primary part, we may have used the afterLoad callback. In the identical manner, for animating the slides we must always use the afterSlideLoad and onSlideLeave callbacks.
Dynamically Add Animations
We’ll dynamically add CSS animations offered by the Animate.css library.
Use the animate-delay CSS Property
We’ll additionally animate parts sequentially utilizing the animate-delay CSS property. Now, let’s dive into the web page construction!
The Sections’ Construction
All web page sections may have the same construction.
Let’s take into account the markup of the second part, the place we’ve got three pictures and a button:
1 |
<part class="part text-center"> |
2 |
<div class="container"> |
3 |
<div class="row"> |
4 |
<div class="col-sm-4 animate__animated" data-animation="animate__fadeInUpBig" fashion="--index: 1"> |
5 |
<img width="300" peak="350" src="nature.jpeg" class="img-fluid" alt=""> |
6 |
</div>
|
7 |
<div class="col-sm-4 animate__animated" data-animation="animate__fadeInUpBig" fashion="--index: 2"> |
8 |
<img width="300" peak="350" src="folks.png" class="img-fluid" alt=""> |
9 |
</div>
|
10 |
<div class="col-sm-4 animate__animated" data-animation="animate__fadeInUpBig" fashion="--index: 3"> |
11 |
<img width="300" peak="350" src="tech.jpeg" class="img-fluid" alt=""> |
12 |
</div>
|
13 |
</div>
|
14 |
<div class="final animate__animated" data-animation="animate__rollIn" fashion="--index: 6"> |
15 |
<button kind="button" class="btn btn-lg">A Easy Button</button> |
16 |
</div>
|
17 |
</div>
|
18 |
</part>
|
Right here we add the animate__animated class to the weather that we’re going to animate. Every considered one of them will obtain a distinct animation impact. This may rely upon the worth of their data-animation attribute. All potential values will come from the out there animation names that Animate.css offers.
Every factor may also obtain an inline fashion. The worth of the index CSS variable will decide the beginning of their animation. This system, which we’ve seen in different tutorials, will allow us to create staggering animations.
Lastly, the final animated factor (the factor with the biggest index worth) will obtain the final class. You’ll see why in a second.
fullPage Customization
Let’s talk about two fullPage customizations that we’re going to do.
First, fullPage offers a number of properties for specifying the scrolling habits of the sections just like the scrollOverflow one which is ready by default to true. This may create a scrollbar for that specific part in case its content material is greater than its peak. Nonetheless, that may trigger an issue; scrollbars will seem immediately through the animation results in case the animated parts are popping out of view. That is one thing that occurs in our case!
To keep away from this habits, we’ll disable the part scrolling initially and permit it solely when the final animated factor (the one with the final class) of the goal part finishes its animation.
Secondly, on massive screens (this is smart when additionally the peak is sufficiently big) the place we animate the weather, we would like the fp-overflow factor to occupy the total part peak and never being simply centered inside the part.
To beat this structure difficulty, we’ll reap the benefits of auto margins!
Alternatively, as a substitute of including this customization, we may use fullPage’s built-in strategy and set scrollOverflow to false. Nonetheless, this can stop sections from displaying overflowing content material and may be dangerous in instances the place we don’t have full management of the sections’ content material.
All in all, listed below are the necessary types:
1 |
/*CUSTOM VARIABLES HERE*/
|
2 |
|
3 |
.fp-overflow { |
4 |
show: flex; |
5 |
peak: 100vh; |
6 |
}
|
7 |
|
8 |
.fp-overflow > * { |
9 |
padding-top: 5vh; |
10 |
padding-bottom: 5vh; |
11 |
margin-top: auto; |
12 |
margin-bottom: auto; |
13 |
}
|
14 |
|
15 |
.animate__animated { |
16 |
animation-delay: calc(var(--index) * 0.3s); |
17 |
}
|
18 |
|
19 |
@media (min-width: 1300px) { |
20 |
.fp-is-overflow > .fp-overflow { |
21 |
overflow: hidden; |
22 |
}
|
23 |
}
|
JavaScript: fullPage Initialization
With all of the above in thoughts, right here’s the plugin’s initialization:
1 |
new fullpage("#fullpage", { |
2 |
navigation: true, |
3 |
licenseKey: "gplv3-license", |
4 |
onLeave: operate (origin, vacation spot, path, set off) { |
5 |
handleAnimations(vacation spot); |
6 |
}
|
7 |
});
|
8 |
|
9 |
const handleAnimations = (vacation spot) => { |
10 |
if (window.matchMedia("(min-width: 1300px)").matches) { |
11 |
const destinationAnimatedEls = vacation spot.merchandise.querySelectorAll( |
12 |
".animate__animated" |
13 |
);
|
14 |
for (const el of destinationAnimatedEls) { |
15 |
const dataset = el.dataset; |
16 |
el.classList.add(dataset.animation); |
17 |
if (el.classList.comprises("final")) { |
18 |
el.addEventListener("animationend", () => { |
19 |
vacation spot.merchandise.querySelector(".fp-overflow").fashion.overflow = |
20 |
"auto"; |
21 |
});
|
22 |
}
|
23 |
}
|
24 |
}
|
25 |
};
|
Take note of the animationend occasion that we use to find out when the sections’ scrollbar needs to be launched.
At this level, we additionally don’t concentrate on issues on resize.
Conclusion
Achieved, people! On this tutorial, we discovered how we will mix the fullpage.js and Animate.css libraries to construct scroll-based animations.
Understand that this implementation is smart solely on massive screens when all parts seem and there aren’t any scrollbars. In fact, in your personal tasks, you may construct on this implementation and customise it in response to your wants. fullPage is stuffed with useful properties and features.
As at all times, thanks loads for studying!
