For some clever designers, linking from page to page just doesn’t make sense. Why jump all over the place when you can just scroll to where you’re going? Check out these creative one-page websites with a smooth scroll.
Football made in Africa
DreamerLines
Danny Blackman
Diego Latorre
Toby Powell
B. N. Weiss
Work at Play
The Great Bearded Reef
Legwork Studio
Suie Paparude
Alex Elchehimi
Jon Brousseau
Fran Boot
Tyler Finck
Square Factor
Chirag Solanki
Guillaume Pacheco
William Smith
Here are some more lovely examples of smooth-scrolling one-page websites suggested by (or designed by!) Creative Opera readers:
We Bleed Design
Rock the Forest
Amanda da Silva
Deluge Studios
MrSunnyZ
Incognito Inc
Gavin Castleton
I hope you enjoyed this post featuring creative one-page websites with a smooth scroll. Do you know of any other awesome examples of this technique? Post a link in the comments section below. I’ll add the best samples to the post!
34 Responses
Manda- I LOVE this article. These are great sites. I truly admire the design work I see with these one-page sites. It is so drilled into designers to not create a site that requires a lot of scrolling. These sites prove that there is a great solution for having a one-page site without endless scrolling. I follow you on Twitter and find your posts interesting and refreshing. Thanks so much!
@lisajodesign
Reply
Manda Reply:
July 15th, 2009 at 11:32 am
I’m so glad that you enjoyed the post, and thanks so much for the lovely compliment! I agree that these one-page sites make a lot of sense, and can be a lot of fun if the designer makes good use of the “traveling space.”
I love one-page sites that work well! My favorite is definitely We Bleed Design though. Sad that you haven’t mentioned it!
http://www.webleeddesign.com/
Reply
Manda Reply:
July 15th, 2009 at 11:32 am
It is true that these sites aren’t much good if they don’t work well
I noticed when I was looking at these sites that the challenge seems to be creating a consistent navigation. Some designers forget to make sure that the navigation moves with the user. I don’t want to have to travel back up to the top of the page every time I want to explore a new link! I had left out We Bleed Design because I had recently featured them in another post. But, you are right, they are too good of an example to leave out of this post. I’ve added them in for you. Thanks for the suggestion!
nice one thanks
Reply
Manda Reply:
July 15th, 2009 at 11:33 am
I’m glad you enjoyed the post. Thanks for stopping by!
Very nice list.. some really good inspiration in there!
I really like this site, tho it’s not in the list: http://www.rocktheforest.ch/
thanks again for the list.
Reply
Manda Reply:
July 15th, 2009 at 11:33 am
I’d never seen the Rock the Forest site — but you are right, it’s a great example. I’ve added it to the post. Thanks!
My first visit to this website, and this is a great round-up you’ve created. Now to track down some tutorials and how-to’s for this technique! Thanks.
Reply
Manda Reply:
July 15th, 2009 at 11:33 am
I’m glad you liked these examples! I’ll see if I can track down some nice tutorials to add to this post….
Nice list! I designed a vertical scrolling site recently ( http://www.amandadasilva.com/ ) and it was an interesting experience.
I ran into some rather aggravating problems such as not being able to set the documentation URL to the appropriate anchor if your scrolling stop point was dynamic (i.e. you do not stop scrolling at the anchor) amongst other issues. Interesting technique none the less.
It’s great seeing how Sursly and WeBleedDesign incorporate almost animated elements into their designs.
Reply
Manda Reply:
July 15th, 2009 at 11:34 am
Love your site design! Very elegant. I’ve added it to the post for others to enjoy. It’s true that some of these designs do a phenomenal job of making use of the “traveling space” between anchors. It makes it fun to click around!
Another good site with this effect is http://www.delugestudios.com
Reply
Manda Reply:
July 15th, 2009 at 11:34 am
Your site is really nice! I especially appreciate how extremely easy it is to navigate – very user-friendly. I added it to the post so more Creative Opera readers could check it out!
only had a chance to look at the danny blackman site, but i’ll come back for more. very, very cool ideas… (great blog btw, looks killer!)
Reply
Manda Reply:
July 15th, 2009 at 11:35 am
Thanks so much for the awesome compliment! I don’t get too many comments on my site design, and it’s great to hear some positive feedback. Glad to hear you’ll be back!!
7 in 1 – The practical: delivering main category intros and the sitemap has improved the organic search ranking of the site. The fun: click through the top level categories (Join-Residents) it’s wavy and quick. Smoothscroll – arrows align the “page” tops, and flying home hints at the one page concept (click the “fixed” wave along the top).
It’s unconventional for a city chamber of commerce site, but artistic expression is supported in the community as is creative individualism. Uniqueness helps in attraction and retention of the site’s audience.
Reply
Manda Reply:
July 15th, 2009 at 11:36 am
Hi Mike, Thanks for stopping by! I think your site is very creative for a chamber of commerce site — in fact, I never would have guessed that is what it is for! I’m not experiencing the smooth scroll though?? Maybe it’s because I’m on Firefox??
We’re working a smooth scroller too!
Reply
Manda Reply:
July 15th, 2009 at 11:36 am
Your site looks fantastic Mike!! I’m adding it to my list. Great work!
Thanks for including sursly! I just finished a new smooth scrolling horizontal site: http://www.gavincastleton.com
Reply
Manda Reply:
July 15th, 2009 at 11:36 am
Your new Gavin site is just GORGEOUS!! Very different and really engaging. I’ve added it to my list, thanks!!
That site is as cool as the music on it (which sounds AMAZING) – good work on the gavin castleton site, Tyler!!! Thanks for introducing me to something refreshing [the design AND the music LOL]
Reply
I really like B.N. Weiss’s website, if I could afford him to promote my product I would, his work is amazing and well thought out. Thanks for this list.
Reply
Nice Graphics
Reply
Another smooth scrolling site that I like http://melissahie.com/
scrolls in both directions
Kumar Ritwik´s last blog ..CTE : Go Goa
Reply
Some really cool websites there – loving them! Just shows how popular front-end Javascript/AJAX development is now. Back just a few years ago Flash was the most sought after type of website, but not anymore!
Mark McCorkell´s last blog ..Danny Yount Showreel V2 2009
Reply
Great list, really inspiring
. I know of one guy who has made two port folios based on one-page scrolling. http://sean.in.the.phailbucket.com and also, I’m working on one myself http://3bob.co.nz.
Thanks for the list!!
Reply
Yes, really nice graphics base listing of one page website, I love it. Thanks
Reply
Reply