Parallax-Pg

Create dynamic parallax effects only using HTML

This is a lightweight JavaScript library that allows users to create the parallax effects they see all over the web by just adding a file and changing the markup. Parallax-Pg is open source so feel free to alter or change it to your liking.

Instructions

Installation

There are two different ways to install Parallax-PG

1. $npm install parallax-pg --save-dev
2. download the parallax-pg.min.js file (recommended for smaller projects)

Adding File

1. Using npm

Open command line and navigate to your working folder, then enter npm install parallax-pg. Once it has finished, you should see parallax-pg as one of your dev dependencies.

2. Using parallax-pg.min.js

If you downloaded the min.js file, attach it right before the closing </body> tag.

Start animating

Parallax-Pg is a plug-and-play library

1. Navigate to the parent of the items you want to animate and add a class of either pg-scroll or pg-mouse.

<div class="pg-scroll"> <div class="item-to-animate"></div> </div>