1.0.0 • Published 4 years ago
@miraidesigns/parallax v1.0.0
Parallax
Add a parallax effect to <img> or <picture> elements.
HTML
<div class="mdf-parallax">
<img src="/path/to/image.jpg" />
</div>Sass
// Include default styles without configuration
@forward '@miraidesigns/parallax/styles';TypeScript
import { MDFParallax } from '@miraidesigns/parallax';
new MDFParallax(document.querySelector('.mdf-parallax'));Implementation
Classes
| Name | Type | Description |
|---|---|---|
mdf-parallax | Parent | Wrapper for the parallax element |
Properties
| Name | Type | Description |
|---|---|---|
.container | HTMLElement | Returns the parallax container element |
.image | HTMLElement | Returns the parallax image element |
Options
| Name | Type | Default | Description |
|---|---|---|---|
delay | number | 0 | Transition delay |
direction | string | up | Scrolling direction. Allowed values are up right down left |
easing | string | linear | Transition timing function |
scale | number | 1.2 | Image scaling factor to create headroom for the parallax effect. Keep above 1.2 |
1.0.0
4 years ago