Ever scrolled down a webpage, then scrolled back up again, just for fun? I’ll bet you encountered an enticing y-axis effect that you wanted to see again. And you’re suddenly so very grateful for your mouse’s scroll wheel.

Why embrace y-axis effects? With today’s emphasis on visceral design and microinteractions, your site’s visitors expect a detailed, satisfying experience, and you don’t want to be the one to disappoint.

So here’s a roundup of y-axis inspirations for you today. Hope you enjoy the lineup, and feel free to add ones we missed in the comments!

25 Alluring Y-Axis Sites

1. Quechua: Spring-Summer CollectionQuechua SiteFun movements slide into your screen after you’re greeted (and encouraged) by the bouncing arrow to start your supremely satisfying scroll.

2. Boy-Coy Design StudioBoy Coy SiteOnce you’ve sailed through salmon-colored clouds, a hanging sign dangles back and forth, mountains and waves compress, and a robot claw pinches the air.

3. SHADOWShadow SiteAfter delving into a dreamy mountain range, the screen fades to black, and then an iPhone becomes the centerpiece to showcase the app’s functions.

4. Artem & JuliaArtem & JuliaAs the hot air balloon subtly bobs up and down, clouds, text, and images swoop in, and you follow the story of the couple’s relationship.

5. “Mind Control” (Pitchfork Cover Story)Pitchfork SiteJannelle Monáe’s feature in Pitchfork brings her story to life with graceful parallax effects.

6. ISLISL SiteThe star-filled outer space background with planet, UFO, and rocket animation gives the site an adventurous feel.

7. Scroll For Your HealthScroll For Your Health SiteBright colors and spinning animations on a black-and-white background? Totally hypnotic and entertaining.

8. SoLoMoSoLoMo SiteAs you scroll down, the numbers rapidly increase and animations slide into place. A smart way to highlight the functionality and success of their app.

9. Smart PhoodSmart Phood SiteVibrant colors plus cartoons? Foolproof fun — given a touch of parallax magic.

10. numéro10Numero 10 SiteBeyond the parallax depth, the intervening black-and-white sketches provide this site with a unique y-axis experience.

11. SnipcartSnipcart SiteAs you scroll, you get a rundown of Snipcart’s features through a delightful yet efficient design.

12. 5emegauche5emegauche SiteYou get to take a spin around the office, which gives you a good feel for the company (and might make you feel slightly dizzy).

13. Atlantis World’s FairAtlantis SiteWith a simple scroll, you can explore the depths of the ocean and watch the kilometers accumulate along the way.

14. Soleil Noir 2012Soleil Noir SiteVibrant colors, witty taglines, and dimensional graphics? This greeting card has got it all!

15. Every Last DropEvery Last Drop SiteAs the main character cycles through his everyday routine, resource usage stats greet your eyes (and astound you).

16. MadwellMadwell SiteBrowsing through this portfolio page will inspire you to revamp yours (or at least drool over this one).

17. Peugeot Hybrid4Peugeot SiteInspired by the graphic novel form, Peugeot shows off the Hybrid4’s racy versatility — and you can even choose the user-friendly “autoplay scroll.”

18. Life of PiLife of Pi SiteThis behind-the-scenes site ushers you through the CGI-rich film’s facts in a fun (and impressive) fashion.

19. Flight of the FirefliesFlight of Fireflies SiteA flitting flurry of fireflies lets you sample this game’s magical design, after which you’re prompted to check it out at the app store.

20. OK StudiosOK Studios SiteOK Studios goes to great lengths (and depths) to master parallax scrolling and create a striking site design.

21. James Bond 007 Cars EvolutionJames Bond SiteLooking for a dose of hypnosis? Then check out this mesmerizing motor mélange.

22. Jan PlochJan SiteThis graphic designer uses the metaphor of emptying and filling a bottle to explain their design process — and, best of all, you get to scroll to control the water flow.

23. Gramercy Park HotelHotel SiteWith HD photos, jaw-dropping colors, and interactive elements, this y-axis site is as exquisite as the hotel.

24. FilletFillet SiteFrom the first moment you hit the page, you’re transported into a colorful series of frames and animations as you scroll down.

25. NASA ProspectNASA Prospect SiteMusic and animation bring this scrolling story to life. Plus the creators provided options for lower performance (bottom right arrows) and prompt the user to start the audio if they’re on mobile.

Generating Y-Axis Effects of Your Own

Want to pursue y-axis effects on your own site? Check out long scrolling designs that we think are super effective (which include a couple examples with impressive y-axis effects). Smashing Mag provides even more one-pager best practices and considerations for your project.

What sorts of y-axis flourishes do you envision using? Is there an example above that you’d aim to emulate? Share with us in the comments below 😀

Comments