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.
The key property for the parallex effect itself is the perspective set on the .parallax-wrapper, in combination with the height and object-fit: cover; set on its containing img element. The shadow is injected using ::after
Nice research by Simon Niklaus, Long Mai, Jimei Yang and Feng Liu:
In this paper, we introduce a framework that synthesizes the 3D Ken Burns effect from a single image, supporting both a fully automatic mode and an interactive mode with the user controlling the camera. Our framework first leverages a depth prediction pipeline, which estimates scene depth that is suitable for view synthesis tasks.
You can see the result in action starting at 0:30.
Nice writeup on how to create a typical screen where there’s a header image that fades out and disappears as you start scrolling.
Essentially, everything but the header is put into a scrollview. In order to keep elements ‘fixed’ (i.e. the tab bar), I use the transform property with a translateY that is set to the scrollview’s current scroll position. Since animating transform properties is supported natively, all animations run at 60fps.
A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.
Might come in handy for a quick project.
Also love the fact that it’s highly customizable:
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // Speed of the enter/exit transition.
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true, // If the tilt effect has to be reset on exit.
glare: false, // Enables glare effect
maxGlare: 1 // From 0 - 1.
Good use of data-* attributes to afford manipulation of the shifting of the backgrounds from within the HTML. Do note that the demo won’t run here on bram.us as the narrow screen layout – without parallax – will be used.