18 Examples Of Mind-blowing Scrolling Effects

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.

Apple`s iMac scrolling effect

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.

Perspective Scrolling in CSS

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.

Blur on Scroll

Star Wars 3D Scrolling Text in CSS3

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

Star Wars 3D Scrolling Text in CSS3

Scroll Drawing

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

Scroll Drawing

CSS background change on scroll

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

CSS background change on scroll

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.

Skewed One Page Scroll

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.

The Scroll of Lorem Ipsum

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.

WOW.js

Aquatilis Scroll Nav

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

Aquatilis Scroll Nav

ScrollMagic

The javascript library for magical scroll interactions.

ScrollMagic

ScrollReveal

Easy scroll animations for web and mobile browsers.

ScrollReveal

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.

Scroll for your health

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.

Scroll Effects

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.

Pi’s Epic Journey

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.