<div class="parallax-image">
<picture>
<source srcset="https://placehold.co/1920x960/A0A0A6/FFFFFF.webp?text=1920x960-webp" type="image/webp" media="(min-width:78.75em)" />
<source srcset="https://placehold.co/1920x960/A0A0A6/FFFFFF.jpg?text=1920x960-jpg" type="image/jpg" media="(min-width:78.75em)" />
<source srcset="https://placehold.co/1259x630/A0A0A6/FFFFFF.webp?text=1259x630-webp" type="image/webp" media="(min-width:48em)" />
<source srcset="https://placehold.co/1259x630/A0A0A6/FFFFFF.jpg?text=1259x630-jpg" type="image/jpg" media="(min-width:48em)" />
<source srcset="https://placehold.co/767x346/A0A0A6/FFFFFF.webp?text=767x384-webp" type="image/webp" />
<img src="https://picsum.photos/id/FFFFFF/767/384" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." width="767" height="384" loading="lazy" />
</picture>
</div>
if picture
.parallax-image
+include('@picture', picture)
if video
.parallax-video
video.parallax-video__video(playsinline autoplay muted loop)
source(src=video.mp4 type='video/mp4')
source(src=video.webm type='video/webm')
{
"picture": {
"src": null,
"width": 767,
"height": 384,
"lazyload": true,
"items": [
{
"src": "https://placehold.co/1920x960/A0A0A6/FFFFFF.webp?text=1920x960-webp",
"type": "webp",
"breakpoint": 1260
},
{
"src": "https://placehold.co/1920x960/A0A0A6/FFFFFF.jpg?text=1920x960-jpg",
"type": "jpg",
"breakpoint": 1260
},
{
"src": "https://placehold.co/1259x630/A0A0A6/FFFFFF.webp?text=1259x630-webp",
"type": "webp",
"breakpoint": 768
},
{
"src": "https://placehold.co/1259x630/A0A0A6/FFFFFF.jpg?text=1259x630-jpg",
"type": "jpg",
"breakpoint": 768
},
{
"src": "https://placehold.co/767x346/A0A0A6/FFFFFF.webp?text=767x384-webp",
"type": "webp",
"breakpoint": null
}
]
}
}
import SimpleParallax from 'simple-parallax-js';
// Parallax image
const parallaxImage = document.querySelectorAll('.parallax-image img');
parallaxImage.forEach(
parallax => new SimpleParallax(parallax, {
delay: 0,
scale: 1.3,
}),
);
// Parallax video
const parallaxVideo = document.querySelectorAll('.parallax-video__video');
parallaxVideo.forEach(
parallax => new SimpleParallax(parallax, {
delay: 0,
scale: 1.3,
}),
);
.parallax-image {
aspect-ratio: 2 / 1;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
img {
object-fit: cover;
}
}
.parallax-video {
aspect-ratio: 16 / 9;
background-color: #000;
display: block;
height: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.parallax-video__video {
background-color: transparent;
border: 0;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
default: 767 * 384, ratio 2 / 1
> 768px: 1259 * 630, ratio 2 / 1
> 1260px: 1920 * 960, ratio 2 / 1