Post Pic

Showcase: One-page Websites with a Smooth Scroll

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




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




Incognito Inc


Gavin Castleton


Does this technique look like something you’d like to try out for yourself? Here are a few links to tutorials you may find helpful:

Related posts:

  1. Design Trends: 25 Illustration Websites I've collected samples of well-done websites that rely heavily on...
  2. 2009 Web Design Trends: What’s Washed-Up & What Will Remain Hot in 2010 There were some strong trends in web design in 2009....
  3. 80+ Must-Read Design Blogs to Enhance your Creativity and your Career There are hundreds of design blogs online. I have thoughtfully...
  4. Web Design Trends: Predictions for 2010 What types of web design trends should you expect to...
  5. Showcase: Creative Twitter Backgrounds So you're ready to Twitter? You may want to consider...

Related posts brought to you by Yet Another Related Posts Plugin.

38 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!


Manda Reply:

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.”

[...] Design Trends: One-page Websites with a Smooth Scroll [...]


I love one-page sites that work well! My favorite is definitely We Bleed Design though. Sad that you haven’t mentioned it!

Manda Reply:

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

Manda Reply:

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:

thanks again for the list.

Manda Reply:

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.

Manda Reply:

I’m glad you liked these examples! I’ll see if I can track down some nice tutorials to add to this post….

[...] Design Trends Showcase: One-page Websites with a Smooth Scroll | Creative Opera: Design Advice and C… Sweet 1 page Websites!! (tags: design inspiration showcase scroll) [...]


Nice list! I designed a vertical scrolling site recently ( ) 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.

Manda Reply:

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!

Showcase: 1-page Smooth Scroll Websites…

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 sites, all which feature today’s design trend focus: one-page websites wi…


Another good site with this effect is

Manda Reply:

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!)

Manda Reply:

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.

Manda Reply:

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!

Manda Reply:

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:

Manda Reply:

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]


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.


Nice Graphics

[...] – – – – – – – – – – – [...]

[...] of the inspiration for Web Developer Bill Lord on this site can be summed up with this very cool Creative Opera blog post, especially sites like Football Made in Africa, Danny Blackman, and The Great Bearded [...]


Another smooth scrolling site that I like
scrolls in both directions
.-= Kumar Ritwik´s last blog ..CTE : Go Goa =-.


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 =-.


Great list, really inspiring :D . I know of one guy who has made two port folios based on one-page scrolling. and also, I’m working on one myself
Thanks for the list!!


Yes, really nice graphics base listing of one page website, I love it. Thanks

[...] One-page sites exploded online in 2009. Moving horizontally or vertically, scrolling sites gave an added element of animation to website navigation. Check out some of my favorite scrolling one-page sites here. [...]


hI i was wondering if you can provide links where to find tutorials on how to use this technique.

Manda Reply:

Hi Natalia, Thanks for the request. I’ve added some links to the end of the post that should be helpful for you :)


Hi there, everything is going nicely here and ofcourse every one is sharing data, that’s in fact excellent, keep up writing.

Leave Your Response

* Name, Email, Comment are Required