30+ Examples of Different and Interesting Scrolling Effects

Examples of Different and Interesting Scrolling Effects

Website designers and developers are constantly making efforts to push the boundaries further and further through all aspects of website development. We have come a long, long way from simple table-based website designs, and I would imagine the sites that are being developed now will seem archaic in 20 years’ time!

One of the ways of adding some diversity and interest to a website design is by creating unusual methods of scrolling, or adding a creative twist to ‘normal’ scrolling techniques.

Different and Interesting Scrolling Effects

Here we are featuring more than 30 websites with some different and/or interesting scrolling effects, including parallax scrolling, vertical and/or horizontal scrolling and Flash-built scrolling effects.

Examples of Different and Interesting Scrolling Effects

Batman 3D
A parallax scrolling site, the characters in the image move around a little on mouseover and the navigation categories slide out to full size. When you scroll down the page, the cape remains the static part of the parallax effect, wrapping the content panel all the way down.

Batman 3D

Siebennull
This parallax effect can be a little confusing, and when you first start moving your mouse over the page, you think you have no control – everything on the page ‘dances’. The images are links to examples of the company’s work and hovering your mouse over each image changes the information in the ‘taped’ static box at the top, which gives information about the project. An interesting profile design.

Siebennull

Campaign Monitor
The parallax scrolling on this site is a little jittery, but scrolling down the page gives a slideshow-type effect where the next screen appears to come up over the previous screen as you scroll.

Campaign Monitor

Head 2 Heart
This is a good example of horizontal parallax scrolling, as you move along the trail the header, which includes the Donate, Facebook and Twitter buttons, remains static. The clouds at the bottom appear to move independently of the main body content. This site also manages to make a strong point about recycling through the design, even though it has little to do with recycling!

Head 2 Heart

Kalendiar
This site has quite a confusing parallax scrolling effect – it is very busy and although the background is static, the haphazard movements of the foreground make it appear to be moving – you will probably need to run your mouse around the screen a couple of times until you can actually use the navigation as your attention will be totally on the effects of mouseover!

Kalendiar

Netlash bSeen
This is a perfect example of good parallax scrolling – there is no jitter as you scroll, the transitions are smooth and logical – not sure about the final image?!

Netlash bSeen

Egopop
A relatively simple effect, where all the images move back and forth on mouseover.

Egopop

Juveler Langaard
A nice example of horizontal scrolling.

Juveler Langaard

Emm and Enn
Some parallax scrolling effects on the ‘picture on the wall’ on a few of the pages add some interest to this well designed site.

Emm and Enn

Elect-LO-nica
As you scroll down this page, the girls move from the right side of the screen to the left side. You have to click on the magazine cover first.

Elect-LO-nica

Buero-Buero
Amazing and unique scrolling effects on this page, as you scroll down, the right column goes down and the left column goes up… then something pops in from the left and scrolls to the right, then vice versa, then just one middle column going up…. etc, etc – well worth a look… but scroll slowly!

Buero-Buero

Beercamp
As you scroll down, the content zooms towards you making way for the next page, until finally there is just a spinning top on the yellow background – very creative.

Beercamp

Otokonaki
This website has horizontal scrolling, and being Japanese, it runs from right to left.

Otokonaki

Old Pulteney Row to the Pole
This is a classic example of parallax scrolling – as you scroll down the 3 layers move at different speeds: the content, the clouds and the mountains.

Old Pulteney Row to the Pole

Portfolio of Mohan Balaji
A vertical scrolling effect where the navigation menu on the right remains static for most of the way down. Note the creative infographic in the About Me section.

Portfolio of Mohan Balaji

Bowtie
Scroll up or down – the home page part of this site is in the middle! As you scroll aliens and/or space ships pop in and out at the left. The static navigation menu is constructed via a picture on the right – mouseover from top to bottom will reveal the categories.

Bowtie

MYM Creative
Very creatively, the guys in the lift with the sheep go up and down with you as you scroll, and the levels are the navigation menu.

MYM Creative

Freestyle Night
This creative parallax scrolling effect has two slight drawbacks – it is slow to load and a little jittery on scrolling. Otherwise quite a complex and ingenious design.

Freestyle Night

The Guide to the App Galaxy 
As this site is trying to convey ‘launching’, the scrolling is upwards. A nice example of a one-page site.

The Guide to the App Galaxy

We Bleed Design
As you scroll down this site, notice how the paint drips come in and out of the image – very well thought out and implemented.

We Bleed Design

Nizo App
As you scroll down, all the components fly in from the sides and take their place in the centre of the screen. Interestingly, they don’t fly out again when you scroll back up.

Nizo App

New Zealand
As you scroll down this site there are some wonderful images of New Zealand and people enjoying themselves there, but the transitions are somewhat jittery and the animations are a little too fast. Otherwise, a nice way to display your country’s attractions.

New Zealand

Activate Drinks
Start off by clicking on the bottle to ‘release the vitamins’, then follow the trail down as you scroll.

Activate Drinks

Eric Johansson
The first thing to notice here is the byline ‘This site is a drag’ – now drag the horizontal scrolling button across and you will see Eric on a motorbike and you will travel along the road with him, passing his portfolio, where you can drag down the ‘blind’ to see links to some of his work, and arriving at his contact information.

Eric Johansson

Dentsu Network
Another nice example of parallax scrolling.

Dentsu Network

Bartle Bogle Hegarty
This site has both vertical and horizontal scrolling – there is a lot of content, all displayed on a single page. The horizontal scroll loops round and round ad infinitum.

Bartle Bogle Hegarty

Carrot Creative
A fairly simple yet creative horizontal scrolling effect in the form of a slideshow.

Carrot Creative

Graphic Therapy
A horizontal scrolling effect – click on the squares at the top right to navigate the pages.

Graphic Therapy

Handmade Interactive – Jason Love
A horizontal scrolling site where the home page is in the middle – so scroll either left or right – at the end of each scrolling direction is an illustration ‘Left End’ and ‘Right End’.

Handmade Interactive - Jason Love

Ladio
This is a Flash design – as you run your mouse around the screen the images move in a parallax effect and the navigation links appear as you mouseover their areas.

Ladio

Peter Pearson
A horizontal scrolling site that offers the first direction ‘Let’s go that way (gasp)’. Arrows move you in either direction as you navigate the site.

Peter Pearson

Lewers
When you click on any navigation item, the background moves across horizontally to the relevant page, with the ongoing outline picture of  flowers.

Lewers

Conclusion

I hope you have been inspired and motivated by some of these sites for their different and interesting scrolling, as well as the creativity and skill of the web developers and designers.

Please leave any comments and/or links to other sites with different scrolling effects that you have come across below.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.