Parallax

This component is made on top of the Cover component.

Example

<div class="cover parallax" style="background-image: url('/background.jpg');"></div>

JavaScript

Import

import { SparkleParallax } from '@sparkleui/sparkle';

Initialize

const sparkleParallax = new SparkleParallax(document.querySelector('.parallax'));
sparkleParallax.mount();

Options

js

const sparkleParallax = new SparkleParallax(document.querySelector('.parallax'));
sparkleParallax.mount({
    scrollSpeed: 2,
});

html

<div class="cover parallax" style="background-image: url('/background.jpg');" data-parallax='{"scrollSpeed": 2}'></div>