custom-properties-parallax

1.1.3 • Public • Published

custom-properties-parallax

Build Status

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

Installation

# npm
npm install 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);

Package Sidebar

Install

npm i custom-properties-parallax

Weekly Downloads

1

Version

1.1.3

License

MIT

Unpacked Size

5.09 kB

Total Files

3

Last publish

Collaborators

  • simonfinney