HIDA - Helmholtz Information and Data Science Academy

Parallax 

<!-- Parallax Image -->
<div class="parallax-image">
    <div class="image loading" style="padding-top: 20.833333333333336%;"><noscript><img class="image__fallback" alt="Alternativ-Text" width="1440" height="300" src="../images/content/stage-team-1440x650.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="1440" height="300" data-src="../images/content/stage-team-1440x650.jpg" /></div>
</div>


<!-- Parallax Video -->
<div class="parallax-video"><video class="parallax-video__video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
        <source src="../images/content/video2.m4v" type="video/mp4" />
        <source src="../images/content/video2.webm" type="video/webm" /></video></div>


if image
  .parallax-image
    +include('@image', image)

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')
 
/* Parallax Image */
{
  "image": {
    "src": "../images/content/stage-team-1440x650.jpg",
    "width": 1440,
    "heigth": 650,
    "alt": "Alternativ-Text"
  }
}


/* Parallax Video */
{
  "video": {
    "mp4": "../images/content/video2.m4v",
    "webm": "../images/content/video2.webm"
  }
}
  • Content: 
    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,
  }),
);
  • URL: /components/raw/parallax/parallax.js
  • Filesystem Path: src/components/atoms/parallax/parallax.js
  • Size: 448 Bytes
  • Content: 
    @use "sass:math";

.parallax-video {
  background-color: #000;
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  padding-bottom: percentage(math.div(9, 16));
  position: relative;
}

.parallax-video__video {
  background-color: transparent;
  border: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.parallax-image .image--cover,
.parallax-image .image--cover > * {
  height: 100%;
}
  • URL: /components/raw/parallax/parallax.scss
  • Filesystem Path: src/components/atoms/parallax/parallax.scss
  • Size: 446 Bytes

There are no notes for this item.