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.
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
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.
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.
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.
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!
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!
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?!
A relatively simple effect, where all the images move back and forth on mouseover.
A nice example of horizontal scrolling.
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.
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.
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!
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.
This website has horizontal scrolling, and being Japanese, it runs from right to left.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Start off by clicking on the bottle to ‘release the vitamins’, then follow the trail down as you scroll.
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.
Another nice example of parallax scrolling.
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.
A fairly simple yet creative horizontal scrolling effect in the form of a slideshow.
A horizontal scrolling effect – click on the squares at the top right to navigate the pages.
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’.
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.
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.
When you click on any navigation item, the background moves across horizontally to the relevant page, with the ongoing outline picture of flowers.
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.