Awesome-Elmenets Parallax

To help making an awesome multi-layer parallax effect with ease.

Demo

Installation

From NPM

npm i @awesome-elements/parallax

From UNPKG

<script type="module" src="https://unpkg.com/@awesome-elements/parallax"></script>

Usage

• Parallax

Importing

Using <script> tag

You can either grab the code using UNPKG or using NPM.
If you grab it from the UNPKG, then you just need to directly put the below code into your HTML file.

<script type="module" src="https://unpkg.com/@awesome-elements/parallax"></script>

If you grab it from NPM, then you might need adjust the src attribute. The code should be located at node_modules/@awesome-elements/parallax/dist/awesome-elements/awesome-elmenets.esm.js.
Note that type="module" is an ES6 syntax and only works in modern browsers. It is required to use type="module" and we do not provide the ES5 version.

Using loader

If you need to import inside JavaScript code, using the loader is the suggested way. Basically, you want to call defineCustomElements() from the loader. Optionally, you can call applyPolyfills() first. For different project types, please check below sections for more details.

Vanilla JS

First, install using NPM.
Then put below code in your JS file.

import { defineCustomElements } from "node_modules/@awesome-elements/parallax/loader";
defineCustomElements();

And make sure you import this JS file using type="module" like below.

<script type="module" src="path/to/the/js/file"></script>

Note that type="module" is an ES6 syntax and only works in modern browsers.
You can check here for more details for Vanilla JS importing.

Angular

Please check here for details. Just make sure you import defineCustomElements() from node_modules/@awesome-elements/parallax/loader instead.

React

We suggest to use our React wrapper package @awesome-elements/parallax-react.
However, if you still want to use the web component directly, please check here for details. Just make sure you import defineCustomElements() from node_modules/@awesome-elements/parallax/loader instead.

Vue

Please check here for details. Just make sure you import defineCustomElements() from node_modules/@awesome-elements/parallax/loader instead. In addition, when you ignore elements, you should ignore all elements starting with awesome-.