mini-parallax

Parallax library contains both normal parallax and background parallax.

Written in vanilla JavaScript. It's lightweight.

Demo

• GitHub Pages
• CodePen

Installation

ES Modules

npm

npm i mini-parallax

import { NormalParallax, BackgroundParallax } from 'mini-parallax'

CDN

unpkg (3.6 KB)

<script src="https://unpkg.com/mini-parallax"></script>

const { NormalParallax, BackgroundParallax } = MiniParallax

MiniParallax is global object containing NormalParallax and BackgroundParallax class.

Usage

NormalParallax class

Docs

new NormalParallax('.js-parallax', {
  speed: 0.03
})

<div class="js-parallax"></div>

<!-- Set speed only for this element -->
<div class="js-parallax" data-speed="0.05"></div>

If you disable autoRun, run it at any time you like.

const parallax = new NormalParallax('.js-parallax', {
  autoRun: false
})

window.addEventListener('load', () => {
  parallax.run()
})

If the text is in the parallax element, it will blur, so set the isRound option to true.

new NormalParallax('.js-parallax', {
  isRound: true
})

BackgroundParallax class

It automatically calculates the position of the background element from the height of the parent element and the background element.

Docs

new BackgroundParallax('.js-background-parallax')

<div class="parent">
  <div class="js-background-parallax"></div>
</div>

Browsers support

| IE / Edge | Firefox | Chrome | Safari | iOS Safari | | --------- | --------- | --------- | --------- | --------- | | IE11, Edge| last version| last version| last version| last version

If you want more features, please consider other parallax libraries.

• Rellax
• smooth