Continuous scroll-bound movement
Parallax
Control direction, travel distance, speed, reverse movement, clipping, and stacked parallax compositions.
Live demo
Scroll-bound parallax
The orange orb uses parallax.dramatic. Scroll this page to see the offset update continuously.
Parallax follows viewport position with a soft, frame-rate-independent
settle so objects continue floating briefly after scrolling stops. It does
not use reveal duration, delay, easing, or once settings. Use the global
parallaxSmoothing option when the whole site should follow more
tightly or take longer to settle.
Minimal
<div class="hf-parallax">Content</div>Default behavior: vertical movement, 120 px distance, speed 0.85.
Fully Customized Parallax
<div
data-hf="parallax"
data-hf-direction="top"
data-hf-distance="320"
data-hf-speed="1.15"
>
Dramatic upward parallax
</div>How Distance and Speed Work
distance sets the approximate total travel range across the viewport.
speed multiplies the distance and controls intensity.
speed 0 produces no visible movement.
negative speed reverses the configured direction.
Very large distance and speed values may expose empty space or cause clipping.
Horizontal Parallax
<div class="hf-parallax-left">Moves on the left axis</div>
<div class="hf-parallax-right">Moves on the right axis</div>Use the Fully Customized pattern above when the horizontal preset also needs an exact distance or speed.
Reverse Parallax
<div
data-hf="parallax"
data-hf-direction="top"
data-hf-distance="180"
data-hf-speed="-0.75"
>
Moves opposite the top direction
</div>Image with Fade and Parallax
<figure
data-hf="parallax"
data-hf-set="dramatic"
>
<img
src="/images/product.jpg"
alt="Product"
data-hf="fade"
data-hf-set="default"
>
</figure>