15 Captivating Parallax Effects from CodePen

eddy@trackduck.com'

Getting inspired is critical to any creative. With this overwhelming amount of information around us, unfortunately, it takes lots of time and effort to root out all these pearls and gems that you can get inspiration from.

No worries, TrackDuck’s Weekly Design Inspiration is here to lift this burden from your shoulders.

In 2015, Parallax is expected to evolve into numerous different mutations, and web designers will increasingly make use of this technique to increase engagement with content and make websites stand out.

That’s why this week TrackDuck’s design team gathered 15 extraordinary Parallax-based effects from CodePen that will spark your imagination on how you can creatively apply this technique to very different web elements.

So check them out and also don’t forget to share the ones we missed in the comments below.

Echo Parallax

A pure CSS parallax scrolling effect using translateZ and perspective.

See the Pen Echo Parallax Effect by James Dow (@photodow) on CodePen.15872

Blur on Scroll

A simple Medium-like blur on scroll. It gets a position using requestAnimationFrame instead of an onScroll event.

See the Pen Blur on Scroll + Simple Parallax by Sallar Kaboli (@sallar) on CodePen.15872

Parallax on Hover

A simple yet addictive parallax effect on hover.

See the Pen Parallax Hover example by Laust (@laustdeleuran) on CodePen.15872

CSS 3D Transforms

A prototype parallax scrolling technique that uses CSS 3D transforms. No JavaScript! An article about this technique is available here: http://keithclark.co.uk/articles/pure-css-parallax-websites/

See the Pen Pure CSS Parallax Scrolling by Keith Clark (@keithclark) on CodePen.15872

Canvas Parallax Skyline

Move your mouse to change speed and move up and down. It would be cool to implement this as a background for a game.

See the Pen Canvas Parallax Skyline by Jack Rugile (@jackrugile) on CodePen.15872

Parallax Star Background in CSS

A Parallax start background built using a very simple sass function and CSS animation keyframes. The sass function creates a random star field on each load.

See the Pen Parallax Star background in CSS by Saransh Sinha (@saransh) on CodePen.15872

Parallaxed Face

A “Parralaxed” face built using Skrollr.

See the Pen parallax my cartoon face by gurprit (@gurprit) on CodePen.15872

CSS3 Slideshow with Parallax Effect

A CSS-only slideshow with a parallax effect.

See the Pen Fluid CSS3 Slideshow with Parallax Effect by Justin Nicholes (@jnicholes) on CodePen.15872

3D Parallax effect

A hyper-realistic 3D Parallax effect. In case of any doubt, those are Jpegs!

See the Pen parallax by Gerard Ferrandez (@ge1doot) on CodePen.15872

‘Root element’ Parallax Technique

By combining the power of rem and a small JavaScript function to manipulate the font-size of the html element, we can achieve simple but effective parallaxing.

See the Pen The ‘root element’ parallax technique by Adam Mustill (@amustill) on CodePen.15872

Parallax monkeys

Yet another extraordinary 3D-like Parallax effect.

See the Pen Parallax Monkeys by Chris Mounsey (@devilskitchen) on CodePen.15872

Landscape Parallax

A landscape Parallax effect made using only CSS. The making of this effect: http://thewaterbear.com/pure-css-landscape-parallax/

See the Pen Parallax Landscape CSS only by Dave Chenell (@dchen05) on CodePen.15872

Parallax Header

A Parallax header that beautifully converge into a main menu on scroll.

See the Pen Material Design/Parallax Header by Mathieu Lavoie (@theaftermath87) on CodePen.15872

Parallax CSS & SVG

A Parallax scrolling built with CSS and SVG, based on Keith Clarke’s pure CSS Parallax website.

See the Pen Parallax CSS & SVG by Daniel Jackson (@CodeXYZ) on CodePen.15872

GTA 5 CSS3 Parallax

An extremely addictive Parallax effect that uses CSS3 3D transforms.

See the Pen GTA 5 CSS3 Parallax by Simon Murdock (@simooo) on CodePen.15872

eddy@trackduck.com'

Edmundas Eddy Balcikonis

One of the co-founders of TrackDuck www.trackduck.com startup, avid traveler and blogger. Passionate about effective remote team work, project management and UX.

  • Haha. It was a fun read… I didn’t want it too end. I thought the Canvas Skyline was really cool. Great job on these and thanks a lot for the codes. Cheers! 🙂

    • Dainius R

      Thanks for the kind words!

  • Thanks for the great collection! Bookmarked this to reference in the future for projects where some of these will be awesome to use and experiment with. thanks! Julie

  • Michael Forno

    Hello I’m new to the site, and was wondering how I use the different effects? Are the bracketed lines web links or do I just paste them into my code? I’m a bit confused /:

  • xvilo

    Codepen embeds are broken…

  • Guys don’t use this technique if you care about the crispness of your images.

  • Eric Wargo

    Nice list. I think I pulled a few ideas for my next project.

  • Shafi Mk

    very nice

Get feedback and collaborate right on websites and images in real time

TrackDuck is a visual bug-tracking tool for web projects saving up to 80% of time spent on remote communication. It integrates with JIRA, Trello, Asana, Slack and all other major project management tools.