paralless

Hyper-minimal parallax implementation for subtle animation. 349b gzipped.

Usage

Import the library and pass a selector as its only argument. Then, call init() on the returned instance to start watching scroll events and animating all selected elements.

import { paralless } from 'paralless'

const para = paralless('.my-parallax-selector')

para.init()

Optionally define speeds in your markup via the data-speed attribution. This option defaults to 2 and so halves the distance scrolled, creating a effect that is half the speed of your scroll. Increase or decrease this integer to find your desired effect.

<div class='my-parallax-selector' data-speed='4'>...children...</div>
<div class='my-parallax-selector' data-speed='10'>...children...</div>

Recommended styles

.my-parallax-selector {
  transition: transform 200ms ease-in-out;
}

MIT License