Skip to main content
100%

INSTALL

✓ Published0🌍 Public
Aabernier
Last edited Oct 13, 2020
Created on Jul 29, 2014

This example demonstrates a hardware-accelerated parallax scrolling effect. It uses jQuery and underscore.js to create a parallax layer: a background image is inserted into a div, which moves vertically at a different rate than the page scroll, controlled by an `amplitude` option. The animation leverages CSS `translate3d` transforms and a requestAnimationFrame-based scroll handler for smooth performance. A demo page shows a full-screen image scrolling over placeholder text, with the parallax effect highlighted by a red outline.

AI-generated description

DEPRECATED: use @abernier/parallax instead

Hardware-accelerated parallax

Demo: http://bl.ocks.org/abernier/raw/0837661e346360b5385b/

INSTALL

browser-side

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="https://cdn.rawgit.com/abernier/3225993/raw/7f928620dbe65570950ab551ee06b82e480507bb/loop.js"></script>
<script src="parallax.js"></script>

Server-side

npm install https://gist.github.com/abernier/0837661e346360b5385b/archive/847d8c07b85c0532d7a3931f90d522587cd50b85.tar.gz

Usage

$('#my').parallax({amplitude: .5});

or


var el = document.getElementById('my');

var parallax = new Parallax(el, {
  amplitude: .5 // default: 1
});
parallax.loop.start();
ISC Licensed

Similar vizzes

Loading thumbnail…

Small Scroll-linked Animation Demo

This example demonstrates scroll-linked animation, where the vertical scroll position of a container drives the rotation of a clock graphic rendered in SVG. As the user scrolls through text panels, a D3.js scale maps the container’s `scrollTop` value to rotation angles for the clock’s hour and minute hands, updated via `window.requestAnimationFrame`. The code uses D3 3.5.5 to create SVG elements, handle scroll and resize events, and synchronize the animation with the narrative’s pacing, which is set using viewport-height units.

Aandrewdblevins
66% match
Loading thumbnail…

Smooth Scrolling

This example demonstrates a playful, self-scrolling page where a series of "Whee!" headings cascade down the viewport, driven entirely by a D3.js transition. The page uses a custom tween, defined via `d3.transition().tween`, to interpolate the window’s vertical scroll offset from its starting position to the bottom of the document. Specifically, `scrollTween` creates an interpolator with `d3.interpolateNumber` and applies it inside the tween’s returned function, calling `scrollTo` on each tick. The animation begins after a delay, smoothly propelling the reader through the page’s content over 7.5 seconds.

Mmbostock
65% match
Loading thumbnail…

Gist d9599cfc20b6d22a16a88e65dfa45115

Scrolleo demonstrates a scrolling-driven video playback technique, where page scroll position controls video frames with an inertial easing effect. The page presents two HTML5 videos that play and scrub as the user scrolls, mimicking Apple’s product page interactions. The implementation relies on the Scrolleo plugin, which uses `requestAnimationFrame` for smooth updates and applies an acceleration value to create momentum-based scrubbing. Videos are embedded directly in the page’s flow, with large vertical spacers ensuring ample scroll space. The code computes video timing based on scroll offset and duration, enabling frame-accurate control without explicit user interaction.

EEelsie
64% match
Loading thumbnail…

Small Scroll-linked Animation Demo

This demo shows how scroll position can drive an SVG animation, with a clock face rotating on the right side of the screen as the user scrolls through explanatory text panels. The page uses a fixed container with a scrollable div, and JavaScript event handlers track `scrollTop` values. A `requestAnimationFrame` loop updates the rotation of the hour and minute hands, mapped through a `d3.scale` function. The code uses D3.js for SVG manipulation and includes a `window.resize` callback to recalibrate the scale domains responsively.

AAjayyy
64% match
Loading thumbnail…

scroll-unfixed

This example demonstrates a scrollytelling technique using an internal scrolling container instead of fixing a graphic to the viewport. A large orange div with `overflowY: scroll` contains an SVG of randomly generated line paths, and as the user scrolls, each line’s opacity changes based on its associated scroll position. The visualization uses D3v4 for DOM manipulation and SVG generation, and listens to the container’s `scroll` event to update line opacity dynamically, with layout handled through simple inline styles.

11wheel
63% match
Loading thumbnail…

scrollytest6

This example, titled "scrollytest6," is an animated, scroll-driven data visualization that combines SVG and WebGL rendering within the D3.js framework. The visualization demonstrates a technique for synchronizing narrative content with user scrolling, likely transitioning between different chart states or datasets as the user progresses through the page. The visualization uses D3's data parsing capabilities (d3-dsv) and custom scroll-handling logic to create a dynamic, story-telling experience. The rendering is hybrid: SVG is used for crisp, interactive elements while WebGL handles performance-intensive graphics, with animations smoothly tying the scroll steps together. The example is part of a series of scroll-based experiments by the author 35degrees, building upon earlier iterations (scrollytest1-5) to refine the technique. The visualization is built with D3 and licensed under MIT.

335degrees
63% match
Loading thumbnail…

Inertia

A 3D cube rendered with CSS transforms sits at the center of a scrollable background grid. Dragging the background applies inertial motion, with velocity and friction computed per frame using a custom Loop animation and Hammer.js for touch gestures. jQuery UI handles pointer interactions, while mousewheel events adjust the cube’s rotation. The cube’s six faces use CSS `rotateX` and `rotateY` transforms with `translateZ` offsets, and the background’s scroll position is updated with `translateZ` for depth. The code relies on raw GitHub-sourced libraries and jQuery for event handling.

Aabernier
63% match
Loading thumbnail…

Page Swiping

Five vertical pages, each displaying a large index number on a radial gradient background, alternate between light and dark themes. Using touch input, the user can drag or flick through the pages with momentum-based scrolling. The D3 v3 code listens to touch events, records drag samples to calculate velocity, and animates the final page position and a CSS `translate3d` overscroll effect via `d3.interpolateNumber`.

Mmbostock
62% match