20

A Simple JavaScript library to add parallax effects to the background-image with...

 5 years ago
source link: https://appleple.github.io/backpax/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Reason

There are prenty of libraries out there to add parallax effects

But still, We had reasons we had to make this library.

1. Simplicity

We just want to add parallax effects to background-image and We don't need to add effects to any other elements too

2. Speed Control

Almost all libraries that we encountered, need speed option

but What if the images are too small that images can't move anymore? In some cases, it's difficult to set the speed of parallax effects.

That's why, We want the library to set the speed by itself, So that the whole image will be shown during scroll

Demo

Quick start

Installation

Using CDN

You can easily start by using CDN.

Add the following description in the <head> tag of the web page you want to use Backpax. 

<script src="https://unpkg.com/backpax@latest/bundle/backpax.js"

You can also bundle the library with Browserify/Webpack

npm install backpax --save
import Backpax from 'backpax'

Just replace the style="background-image:url(...)" to data-img="..." 

<div class="js-parallax" 
  data-img="https://images.unsplash.com/photo-1565275706395-d452122d6cfc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
  <p>contents here</p>
</div>

Write the following script

new Backpax('.js-scrollable');

Demo2

Options

breakpoints

You can also set some breakpoints so that you can optimize image size in accordance with the screen size.

Add the following description to the target tag.

<div class="js-parallax" 
  data-img="./path/to/default-image"
  data-img-768="./path/to/image-which-size-is-smaller-than-768"
  data-img-1024="./path/to/image-which-size-is-smaller-than-1024"
>
  <p>contents here</p>
</div>

And write the following script

new Backpax('.js-scrollable');

You can also use NodeList instead of string 

new Backpax(document.querySelectorAll('.js-scrollable'));

Join development on

GitHub

License


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK