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 CollectionFun 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 StudioOnce 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. SHADOWAfter 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 & 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)Jannelle Monáe’s feature in Pitchfork brings her story to life with graceful parallax effects.
6. ISLThe star-filled outer space background with planet, UFO, and rocket animation gives the site an adventurous feel.
7. Scroll For Your HealthBright colors and spinning animations on a black-and-white background? Totally hypnotic and entertaining.
8. SoLoMoAs 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 PhoodVibrant colors plus cartoons? Foolproof fun — given a touch of parallax magic.
10. numéro10Beyond the parallax depth, the intervening black-and-white sketches provide this site with a unique y-axis experience.
11. SnipcartAs you scroll, you get a rundown of Snipcart’s features through a delightful yet efficient design.
12. 5emegaucheYou 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 FairWith a simple scroll, you can explore the depths of the ocean and watch the kilometers accumulate along the way.
14. Soleil Noir 2012Vibrant colors, witty taglines, and dimensional graphics? This greeting card has got it all!
15. Every Last DropAs the main character cycles through his everyday routine, resource usage stats greet your eyes (and astound you).
16. MadwellBrowsing through this portfolio page will inspire you to revamp yours (or at least drool over this one).
17. Peugeot Hybrid4Inspired 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 PiThis behind-the-scenes site ushers you through the CGI-rich film’s facts in a fun (and impressive) fashion.
19. Flight of the FirefliesA 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 goes to great lengths (and depths) to master parallax scrolling and create a striking site design.
21. James Bond 007 Cars EvolutionLooking for a dose of hypnosis? Then check out this mesmerizing motor mélange.
22. Jan PlochThis 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 HotelWith HD photos, jaw-dropping colors, and interactive elements, this y-axis site is as exquisite as the hotel.
24. FilletFrom the first moment you hit the page, you’re transported into a colorful series of frames and animations as you scroll down.
25. NASA ProspectMusic 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 😀