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

one4

DreamerLines

one7

Danny Blackman

one11

Diego Latorre

one2

Toby Powell

one3

B. N. Weiss

one12

Work at Play

one5

The Great Bearded Reef

one18

Legwork Studio

one8

Suie Paparude

one9

Alex Elchehimi

one6

Jon Brousseau

one14

Fran Boot

one1

Tyler Finck

one10

Square Factor

one13

Chirag Solanki

one15

Guillaume Pacheco

one16

William Smith

one19

Here are some more lovely examples of smooth-scrolling one-page websites suggested by (or designed by!) Creative Opera readers:

We Bleed Design

one20

Rock the Forest

one21

Amanda da Silva

one22

Deluge Studios

one23

MrSunnyZ

one26

Incognito Inc

one24

Gavin Castleton

one25

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

04.21.09

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

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 [...]

04.21.09

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/

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!

04.21.09

nice one thanks

Manda Reply:

I’m glad you enjoyed the post. Thanks for stopping by!

04.21.09

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.

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!

04.21.09

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) [...]

04.21.09

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.

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…

04.21.09

Another good site with this effect is http://www.delugestudios.com

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!

04.21.09

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

04.21.09

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??

04.21.09

We’re working a smooth scroller too!

Manda Reply:

Your site looks fantastic Mike!! I’m adding it to my list. Great work!

04.21.09

Thanks for including sursly! I just finished a new smooth scrolling horizontal site: http://www.gavincastleton.com

Manda Reply:

Your new Gavin site is just GORGEOUS!! Very different and really engaging. I’ve added it to my list, thanks!!

04.21.09

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]

04.21.09

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.

04.21.09

Nice Graphics

[...] – mostinspired.com – 101bestwebsites.com – designawardsgallery.com – wooki.es – hiddenpixels.com – creativeopera.com – box.mepholio.com – blogof.francescomugnai.com – colorgorize.com – jquerystyle.com – [...]

[...] 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 [...]

04.21.09

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

04.21.09

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

04.21.09

Great list, really inspiring :D . 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!!

04.21.09

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. [...]

04.21.09

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

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

04.21.09

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