20 Fresh Sites With Amazing Scrolling Effects

by on 30th January 2013 with No Comments

screenshot

Scrolling effects are becoming more and more popular as a means of increasing interaction and user interest. Through clever background positioning, animations and a little JavaScript, you can bring your page to life in ways that will surprise and grab your users’ attention.

There’s a wide variety of tactics that you can use to create a unique scrolling experience on your site. Join us as we take a look at twenty fresh sites and how they use scrolling effects in different ways.

Laura Meroni

I love these sites that are able to pull off something great without a lot of fancy animations. By manipulating the positioning of various items on scroll, they create an awesome parallax effect that makes the site look and feel like a deeply layered experience.

screenshot

‎Gozu

This site is really interesting and unique. The canvas is split into thirds vertically with the middle section being highlighted above the others. When you scroll, the page jumps a predefined distance to highlight the next section. It’s a pretty cool effect that makes for an infinitely scrolling (looping) experience that’s not like any other site I’ve seen.

screenshot

MyProvence Festival

This site is a series of eight different fullscreen slides. Every time you scroll, the page automatically jumps to the next or previous slide, which automatically sizes itself to the current screen size. If you’re designing a site with clear sections and don’t necessarily want the users focusing on the in between, this is a great way to go.

screenshot

Monokroom

Monokroom slices the page vertically a number of times and scrolls each slice at a different rate. The cool part is that the messy, discombobulated layers come together at a few predefined points to make everything look nice and organized. As you scroll further, there’s a pretty cool spinning gear animation to check out as well.

screenshot

AFORM: Fitness Coach

This site is all about data. As you scroll between background images, words and numbers fly in and out of the screen. The numbers have an awesome effect applied to them that makes them count up until they hit their target value. It’s makes for a fascinating way to present what would otherwise be static information.

screenshot

Mighty Matcha

This site is a perfect example of how you can use scroll points to specifically direct the user’s attention to very precise locations. As you scroll, different elements on the page are highlighted to grab your focus. Some fade into being, others twist, turn or grow, there’s even a mini video that triggers once you reach that point on the page. As you use the site, you can’t help but look exactly where the designers wanted you to.

screenshot

MailChimp Annual Report

The MailChimp Annual Report is another example of using scrolling technology to make data really interesting. The right side of the page scrolls through various animated infographics as the background changes colors and graphics and the left side cycles through the different sections of the report.

screenshot

SCANNER

This one isn’t so much a fancy effect as an interesting scrolling system. As opposed to scrolling the whole page, this site allows you to hover over and scroll each of the primary columns individually. The result is a great way to browse a ton of content while keeping all of the navigation and primary site info accessible.

screenshot

The Friends and Family Plan

Like our first example, this sites uses a simple vertically scrolling parallax effect to create a layered feel that makes the experience feel quite dynamic without any fancy animations or annoying loading times.

screenshot

Astoria Villa

This one is so simple and subtle that you might miss it. As you scroll down the page, there are gaps in the background that reveal the image underneath. However, each time you come to a gap, the revealed background image is different.

screenshot

WOODDECKER

This site uses scrolling effects to highlight the all-weather nature of their product. Hovering in the middle of the page, you’ll see a wooden slab. As you scroll, different animated weather elements are thrown at the product along with informational pop ups that inform you of the specifics of the weather resistance.

screenshot

Web Effectual

This site uses the same effect as Astoria Villa above, occasionally presenting gaps in the background that reveal different images and text as you scroll.

screenshot

Fat Media

Fat Media has a ton of stuff happening while you scroll. A dotted path animates and leads you downward as elements fly in and out of view. Various numerical data points are presented in a way that’s nearly identical to what we saw in AFORM above.

screenshot

Fannabee

This one is almost too crazy to explain so be sure to check it out yourself. Here, scrolling animates the background and the foreground elements. Items spin and drop, images change, iPhones slide in and out; it’s crazy… in a good way.

screenshot

Antonio Errigo

Antonio uses a few different simple but effective parallax scrolling effects. A plane flies by in the clouds, Antonio leaps in and out of view, etc.

screenshot

Andrea Sichinolfi

Different effects are in play at different points here. As you scroll, you reach an area with a section that suddenly expands to reveal hidden content, circles change their stroke width, items pop out from off screen; lots of great animations to keep you interested.

screenshot

Bam Strategy

This one is really impressive. Here the scrolling effects are used to tell a story. As you scroll, you see a series of panels, each of which holds a little animated scene, revealing the next part of the story. If you’re looking for a way to inject narrative into your design, this is some great inspiration.

screenshot

Italio Kitchen

Another really simple use of scroll effects. As you move down the page, different ingredients fly into view. At one point, a bowl of salad jumps out of the way to reveal a circle container of text underneath.

screenshot

Rit Team

This one is really fun to play with. As you scroll down the page, the car on the track follows you. Scroll back up and he’ll quickly turn around and try to catch up, veering wildly off the track to get back.

screenshot

namemesh

Namemesh presents a new idea for interaction that is one part effective and two parts bizarre. Type in some words and you’ll see four lists of ideas for available domain names appear. If you want to see more, you simply scroll down. As you do so, the list suddenly expands and fills up with new ideas. It’s difficult to describe properly so stop by and try it out.

screenshot

Show Us Yours!

Now that you’ve seen our showcase of fresh sites that use scrolling effects, leave a comment below and show us anything that you’ve built around this theme. If you haven’t personally built a site with scrolling effects, show us some of your favorite sites from around the web that use this technique.

Comments & Discussion

Subscribe

Membership
About the Author