On this fast tutorial I’ll present you easy methods to set off CSS animations on chosen components as you scroll down a web page, all with out having to make use of a Javascript/jQuery plugin.
An instance of this animation method could be seen on the Jeet Grid System website. As you scroll down their web page, you'll be able to see every CSS rework animation being systematically triggered.
That is a simple impact to realize with some easy Javascript and a sprinkle of CSS magic courtesy of Daniel Eden’s animate.css library. That is the impact we might be creating:
So, let me shortly clarify what’s happening within the above demo.
The Markup
The revealOnScroll class should be added to every aspect that must be animated on scroll:
<div data-animation="flipInX" data-timeout="400">...some content material right here...
The data-animation attribute declares the animate.css animation that might be used. It’s additionally attainable so as to add an elective timeout, this may very well be helpful when a number of components should be animated from the identical place.
The Javascript & CSS Animations
Subsequent, we have to declare some variables on the prime of the Javascript doc (don’t overlook to load jQuery & Modernizr, these are required to examine wether or not it's a “contact” machine). I additionally imported animate.css for the CSS primarily based animations.
var $window = $(window),
win_height_padded = $window.top() * 1.1,
isTouch = Modernizr.contact;
Subsequent we've to observe for the scroll occasion that might be triggered because the consumer is scrolling:
$window.on('scroll', revealOnScroll);
With the revealOnScroll perform we examine if the aspect that must be animated are within the viewport. If that's the case, the animation class is added and that can set off the CSS animation.
perform revealOnScroll() {
var scrolled = $window.scrollTop();
$(".revealOnScroll:not(.animated)").every(perform () {
var $this = $(this),
offsetTop = $this.offset().prime;
if (scrolled + win_height_padded > offsetTop)
});
Completed
Now wasn’t that straightforward to do? There's additionally one other examine for the inverse: when the weather usually are not seen, the animation courses are eliminated. This may make it attainable to animate the objects for a couple of time per request.
Subsequent Steps
There's a jQuery plugin known as Cre-animate obtainable on CodeCanyon that can shortly and simply add onscroll animations to any aspect in your web site. Or, you can browse this superb assortment of cool CSS animation sources and instruments.
This publish was initially printed by Benoit on his weblog here.
