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 […]

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 […]

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%, […]

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 […]