Atropos — Stunning touch-friendly 3D parallax hover effects

Posted byBramus! Leave a comment on Atropos — Stunning touch-friendly 3D parallax hover effects

Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

Available for JavaScript, React and Vue.js

I like that this script is also comes in a VanillaJS version, which shares its core with the React and Vue implementations.

Atropos →

Related: You could build this with pure CSS by injecting a bunch of extra elements into the DOM to know where the mouse is, but that would be a pretty big challenge to get right.

💡 This makes me wonder: wouldn’t it be nice if we had a :tracked-hover or :hover-3d pseudo-class that would automatically expose some variables that indicate the cursor’s position (relative to the element) + bearing as you hover it? Here’s a proposal/exploration.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.