15 Examples of Scrolling Done Right In Website Designs
In using many aspects of web design, some designers prefer using the same style or technique, while others like to revamp their website design to reflect the latest new trend. Sometimes though, a site design uses a technique that is just right; no other method could give a similar or better result or impact.
We will be showcasing 15 site designs that utilize scrolling to keep their visitors engaged and stay on the page. Some of them tell wonderful stories, most of them are highly interactive but all of them give you great reason to keep scrolling. The screenshots here do not do the sites justice; be sure to click on the relevant links to view the beautiful animations/presentations in action on the respective websites.
Recommended Reading: Showcase Of Beautiful Movie Website Designs
NASA Prospect
Brought to you by a team of student designers at the University of South Dakota, NASA Prospect is an interactive story of two prospectors from Earth, Nicolas and Ema, who are trying to find remnants of human music contained in the golden recorders. The site’s catchy music changes as you scroll down.
MutantLabs
A website with design elements befitting a creative studio that dabbles with innovative games on multiple platforms.
Activate Drinks
A great parallax scrolling website with vivid colors and cool 3D visual effects. All that combine to produce an experience that transcends that of an ordinary product commercial.
Cascade Brewing Co
Another example of a website that makes good use of creative design elements to promote its products. Its products are laid out nicely with easy navigation options.
Inception Explained
Confused with what happened in Inception? If you still want to know, this website breaks down the movie plot in easily digestible chunks, going down level by level all the way to limbo. Yes, the colorful and attractive design elements and the great use of scrolling really help the storyline.
Bellroy: Slim Your Wallet
Bellroy, a wallet manufacturer, has a special page on their website called "Slim Your Wallet". It’s full of quick tips on how to help your wallet "lose the bulge".
Smart USA
A cool website for one of the most eco-friendly lines of cars on the market today.
Atlassian
A meaningful infographic on how people usually waste their time at work. Full of fun facts you probably don’t know and a funny timer that says how long you have wasted reading the infographic when you should be doing work.
These are Things
A lighthearted website with lots of cartoon illustrations created by Jen Adrion and Omar Noory. Follow the cartoon girl (Jen) and cartoon boy (Omar) as they walk you through the different website sections and the history behind their creative studio.
Distance to Mars
This cool website will give you a sense of how far Mars is from our planet. By imagining that Earth is 100 pixels wide, the website will take you through the Solar System at a speed of 7,000 pixels per second until you finally reach Mars, 428,000 pixels away.
World’s Highest Website
This is more of a fun experiment, 19 kilometers long. It’s a CSS experiment designed to keep you scrolling down all day long (or just take the elevator).
Which of these websites do you like best and why? Feel free to let us know in the comments!