Scrolling animations are usually used to draw attention to particular elements and pieces of information, in the order that the designer intended. Using animates scrolling effects is great way to tell story through your website’s design. CSS3 brought animations into the mainstream and made it simple to add animated elements to any design. So in this post let`s take a look at 18 examples of mind-blowing scrolling effects that you can use for inspiration to create delightful memorable experiences for your user.

Apple`s iMac scrolling effect

This amazing jQuery and CSS3 based scrolling effect shrinks from the fullscreen background image into a smaller one within a Apple’s iMac intro page.

Perspective Scrolling in CSS

A 3 dimensional scrolling experience built in CSS only. The trick is to rotate a single element around its x-axis, while its parent provides the perspective environment and a special perspective-origin.

Blur on Scroll

This pen demonstrates a simple medium.com-like blur image on scroll and content parallax. It gets the scroll position using requestAnimationFrame instead of an onScroll event.

Star Wars 3D Scrolling Text in CSS3

How cool is that? No JavaScript, no graphics — just pure HTML5 text and CSS3.

Scroll Drawing

As you scroll down, the % scrolled of the document is calculated and that same % of an SVG path is drawn.

CSS background change on scroll

Fixed element appears to change color when entering different sections. Uses duplicated elements for every section.

Skewed One Page Scroll

A one page scroll webpage concept that makes use of jQuery and several CSS3 properties to create a fancy skewed page scrolling effect.

The Scroll of Lorem Ipsum

With careful use of overflow: hidden and CSS 3d transforms (and a little innerHTML nonsense) we can create a compelling JavaScript scroll effect.

WOW.js

Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

Aquatilis Scroll Nav

If you scroll really fast, it will look like rain drops falling into water.

ScrollMagic

The javascript library for magical scroll interactions.

ScrollReveal

Easy scroll animations for web and mobile browsers.

Robby Leonardi

The side-scrolling resume delves into a colorful world inspired by game reminiscent of Super Mario Brothers.

Scroll for your health

It is a good example of how presenting familiar information in an original way can make a huge impact. As you scroll through this site, you’re presented with different fruits.

If the Moon Were Only 1 Pixel

An interactive website designed by Josh Worth showing the scale of the universe if the moon represents only a single pixel.

Interactive animation explaining Inception

An excellent use of parallax scrolling to explain the details of a movie that is quite complex to understand. As you scroll through the site, it details the story and highlights information via the parallax scrolling in a way that makes it easy to grasp much of the information.

Scroll Effects

Website for adding scroll effects to your website with Adobe Muse CC.

Pi’s Epic Journey

This stunning HTML5 parallax scrolling site, which takes a tour behind-the-scenes of how some of ‘Life of Pi’s’ most amazing moments came to be.