Skip to content

ko-yelie/mini-parallax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mini-parallax

Parallax library contains both normal parallax and background parallax.

Written in vanilla JavaScript. It's lightweight.

Demo

Installation

ES Modules

npm

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

CDN

unpkg

<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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
IE11, Edge last version last version last version last version

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