custom-properties-parallax

Parallax effect using custom properties - Inspired by Cheapass Parallax - daverupert.com

Installation

# npm
npm i custom-properties-parallax --save

# Yarn
yarn add custom-properties-parallax

esnext

import 'custom-properties-parallax';

ES5

<script src="node_modules/custom-properties-parallax/dist/custom-properties-parallax.js"></script>

Usage

• Add data-cpp attributes to each of the elements that require a parallax effect on initialisation

• Declare any of the following custom properties in the :root pseudo-class to override library defaults:

  Name	Type	Default
  --cpp-distance	Unit	0.625rem
  --cpp-speed	Number	0.5

• For individual control, leverage the cascade by declaring any of the above custom properties within the CSS selectors of the target elements. For example:

  h1 {
    --cpp-speed: 1;
  }

• Use the create method to apply the parallax effect to an element after initialisation. For example:

  const h1 = document.querySelector('h1');
  CustomPropertiesParallax.create(h1);