15 Captivating Parallax Effects from CodePen
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.
A pure CSS parallax scrolling effect using translateZ and perspective.
Blur on Scroll
A simple Medium-like blur on scroll. It gets a position using requestAnimationFrame instead of an onScroll event.
Parallax on Hover
A simple yet addictive parallax effect on hover.
CSS 3D Transforms
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.
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.
A “Parralaxed” face built using Skrollr.
CSS3 Slideshow with Parallax Effect
A CSS-only slideshow with a parallax effect.
3D Parallax effect
A hyper-realistic 3D Parallax effect. In case of any doubt, those are Jpegs!
‘Root element’ Parallax Technique
By combining the power of
font-size of the
html element, we can achieve simple but effective parallaxing.
Yet another extraordinary 3D-like Parallax effect.
A landscape Parallax effect made using only CSS. The making of this effect: http://thewaterbear.com/pure-css-landscape-parallax/
A Parallax header that beautifully converge into a main menu on scroll.
Parallax CSS & SVG
A Parallax scrolling built with CSS and SVG, based on Keith Clarke’s pure CSS Parallax website.
GTA 5 CSS3 Parallax
An extremely addictive Parallax effect that uses CSS3 3D transforms.
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.