CSS Sticky Parallax Sections Demo

Nice demo on CodePen by Ryan Mulligan, featuring some sections with a sticky parallax background image:

See the Pen CSS Sticky Parallax Sections by Ryan Mulligan (@hexagoncircle) on CodePen.

I expected to find the the translateZ() + scale() method to create the parallax layers in there, but turns out Ryan took another approach:

  1. Scale down each enclosing section, using a scaleY transform with a number lower than 1, e.g. scaleY(0.9)
  2. Scale up each contained direct child of those sections using an inverse scaleY transform, e.g. scaleY(1.11111111)

As the second scaling (1.11111) undoes the first scaling (0.9), the content is rendered at the original scale of 1 again (e.g. 0.9 * 1.11111 = 1).

:root {
  --speed: 0.1;
}

.section {
  transform-origin: center top;
  transform: scaleY(calc(1 - var(--speed)));
}

.section > * {
  transform-origin: center top;
  transform: scaleY(calc(1 / (1 - var(--speed))));
}

Note that I’ve renamed Ryan’s --scale parameter to --speed here, as that’s what it affects.

3D Ken Burns Effect from a Single Image

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.

3D Ken Burns Effect from a Single Image →

🤔 I’m wondering how this will stack up against Apple’s “Portrait Mode” photos, as those photos already contain depth information.

React Native Parallax Scroll Header with Tabs

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.

React Native Parallax Scroll with Tabs →

Tilt.js – A tiny parallax tilt effect for jQuery

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:

maxTilt:        20,
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.

Tilt.js →
Tilt.js Source (GitHub) →

Multi-layered Parallax Illustration

See the Pen Multi-layered Parallax Illustration  by Patryk Zabielski (@zabielski) on CodePen.

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.

Multi-layered Parallax Illustration →