Scrolling Animations: Examples, Tutorials and jQuery Plugins
In recent years we have seen a lot of scrolling effects and a lot of animation effects taking root in website design. More recently we are seeing the two put together, giving scrolling animations: animations that are triggered by the user scrolling down, up or across the page (or a mixture of all directions).
Advancements in HTML and CSS, helped by some amazing jQuery plugins are helping this trend to gather speed. So today we are bringing you a selection of examples of websites featuring scrolling animations, some tutorials and a list of jQuery plugins to help you achieve these effects.
Examples of Scrolling Animations in Website Design
Scrolling on this site reveals the content, which is facts about their business, which is the manufacture and packaging of pharmaceutical products.
This sustainable construction company’s website has scrolling animations on their graphics, such as water falling from a cloud, traffic passing some buildings, windmills turning, etc.
The little guy featuring on this website walks along as you scroll, and you encounter other animations along the way.
There are more parallax effects than animations on this site, but it is, overall, very well designed.
This Bulgarian site features a man who parachutes as you scroll down, then the scrolling becomes horizontal, and he walks, until he reaches a car, which he drives, then walks some more until he reaches some water that he swims across, then walks until you reach the contact form at the end of the site and he wanders off into the distance!
This Russian McDonald’s celebration site has some nice little animations as you scroll down the page, including the ‘real’ child’s hand plucking a petal from the flower illustration, and the sun is usually doing something along the way.
Make Your Money Matter
There is a lot of good scrolling animations in this website design. You start off by seeing what happens to your money when you put it in a bank, then you see the difference if you put your money in a credit union. A good story, well told with scrolling animations.
This is not a very lengthy scrolling site, but the guy, who is called Boogey, gets into some weird positions. The shapes behind Boogey are animated, but not scroll activated, so this site has mixed animations, making it quite unusual.
This Brazilian design agency’s site has scrolling animations that either go up or down and replace the existing typographic words with the same words in different typography. The three words are always the same: Faka, Fuce, Force… and I am not sure what they mean, or their relevance to each other – but nice effects anyway.
As the tagline of this site states, scrolling takes you on a journey from ‘bean to cup’, and you will see some cool scrolling animations on that journey.
This is a site that promotes a kite flying competition that took place in Goa in January 2014. It has both great scrolling effects and good scrolling animation.
This design agency’s site has an incredible amount of scrolling animations and effects. As you scroll down they describe and show some of their work. Very effective – and a very long page!
This site has amazing scrolling animations using photographs. You can look all around the car, you follow a torpedo under water, which describes the strength of the steel used in the manufacture of the car. The only problem with this site is that you have to wait a few times for the next part to load, and the sheer amount of content can cause the site to crash sometimes.
Another site with a lot of scrolling animations, including a flip-box showing new features – the screenshot below captured the box mid-flip.
Some different scrolling animation effects on this site – all the images fly out to the sides and the next ones come in from the middle on scrolling… unusual and creative.
This French wine producer’s site has some nice scrolling animations. First of all, you scroll up, not down on this site. One of the animations (shown on the screenshot below) shows the journey to the vineyard. The yellow line progresses on the bottom half of the screen, and you follow the road on the top half of the screen.
Another nice mix of scrolling animation, non-scrolling animation and scrolling effects.
As you scroll down this site, numbers and symbols flash on and off. Slightly reminiscent of the old advertising that flashed images to imprint on our minds, but decent animation anyway.
Dangers of Fracking
This site has been around for ages – probably before most of us had ever heard of fracking, but is still one of the best examples of simple scrolling animations. It is its simplicity that makes it so good.
There are some nice, subtle animations on scrolling down this page. My only complaint on this one is, if you want to see them again you will have to refresh the page.
Scrolling Effects Tutorials
This tutorial written by Chris Spooner shows you how to create a vertical scrolling site with some small animations. Click the screenshot below to see the demo site.
Written by Petr Tichy, this tutorial shows you how to recreate the one page scrolling effect used on the Apple iPhone websites, using his One Page Scroll plugin. Click on the screenshot below to see the demo site.
Scrolling Effect jQuery Plugins
- SuperScrollorama The jQuery plugin for supercool scroll animation
- One Page Scroll (Tutorial mentioned above) Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin
- Curtain.js This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect.
- ScrollMagic The jQuery plugin for magical scroll interactions.
- ScrollReveal Declarative on-scroll reveal animations.
- AnimatedScroll Smooth, animated document scroll to a specific element, supporting native jQuery UI easings.
- AnimateScroll A Simple jQuery Plugin for Animating Scroll
Hopefully you have been inspired by the examples in this article, and motivated by the tutorials and jQuery plugins listed.
Please share your links and opinions on scrolling animations in the comments section below.