1

Есть сайт на котором при скролле фоновая заставка плавно растворяется и переходит в видео. Подскажите, как реализовать подобный эффект?

<div id="h-header-scroll-txt-container">
  <div id="h-header-scroll-txt-wrap" style="opacity: 0.999996;">
    <div id="h-header-scroll-txt" style="transform: translate3d(0px, 0%, 0px);"><span>S</span> <span>C</span> <span>R</span> <span>O</span> <span>L</span> <span>L</span></div>
  </div>
</div>
<section id="h-intro"><video id="h-intro-video" src="/static/media/vid/home/00.mp4" loop="loop" muted=""></video>
  <div id="h-intro-sail"></div>
  <div id="h-intro-txt" style="opacity: 0.2; transform: translate3d(0px, 40.0004%, 0px);">
    <h2 class="title title-l title-light title-marge-m">Adventure awaits</h2>
    <div class="line-wrap">
      <div id="h-intro-line" class="line line-red" style="transform: translate3d(-40.0004%, 0px, 0px);"></div>
    </div>
    <p class="p-l p-light">Be brave. Inquisitive. Prepared for the journey.<br> Ready for anything. Unafraid to fail - we never give up.<br> Uncover your adventure spirit and we'll be with you all the way.</p>
  </div>
  <div id="h-intro-progress-wrap">
    <div id="h-intro-progress" style="transform: translate3d(0px, -94.5457%, 0px);"></div>
  </div>
  <div id="h-intro-scroll-wrap">
    <div id="h-intro-scroll" style="opacity: 0.2;">SCROLL</div>
  </div>
</section>

1 ответ 1

5

Подобный эффект делается так, по событию wheel до определенного момента приближаются картинки с помощью свойства css transform: scale, затем плавно меняется opacity у картинок в меньшую сторону, а у видео в большую. Код будет выглядеть приблизительно так:

var images = document.querySelectorAll('#h-header img');
var videoWrapper = document.querySelector('#h-intro');
var video = document.querySelector('#h-intro-video');
var scrollCounter = 0;
document.querySelector('#h-header').addEventListener('wheel', function(e) {
  if (scrollCounter < 100) {
    e.preventDefault();
    if (e.deltaY > 0) {
      scrollCounter++;
    } else {
      scrollCounter--;
      scrollCounter = scrollCounter < 0 ? 0 : scrollCounter;
    }
    var scale = 1 + scrollCounter / 100;
    var opacity = 1 - (scrollCounter - 30) / 30;
    images.forEach(function(image) {

      image.style.transform = 'scale(' + scale + ')';
      if (scrollCounter > 30) {
        image.style.opacity = opacity;
      }
    });
    if (scrollCounter > 30) {
      if (video.paused) video.play();
      videoWrapper.style.opacity = 1 - opacity;
    } else {
      if (!video.paused) video.pause();
    }
  }
}, false);
body {
  width: 100%;
  height: 100%;
}

#h-header {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: 50%;
  background-image: url(https://cdn.shopify.com/s/files/1/0074/0642/0038/files/bg-no-logo_750x960_crop_center.jpg);
  background-repeat: no-repeat;
}

#h-header-background-wrap,
#h-header-center-wrap,
#h-header-foreground-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#h-header img {
  position: absolute;
  bottom: 0;
  left: 0;
}

img,
video {
  width: 100%;
  height: auto;
}

#h-intro {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  background: #212121;
  opacity: 0;
}

#h-intro-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  overflow: hidden;
}
<div id="h-header">
  <div id="h-header-background-wrap">
    <img id="h-header-background" src="https://www.beargrylls.com/static/media/img/home/header/01.png" alt="">
  </div>
  <div id="h-header-center-wrap">
    <img id="h-header-center" src="https://www.beargrylls.com/static/media/img/home/header/02.png" alt="">
  </div>
  <div id="h-header-foreground-wrap">
    <img id="h-header-foreground" src="https://www.beargrylls.com/static/media/img/home/header/03.png" alt="">
  </div>
  <section id="h-intro">
    <video id="h-intro-video" src="https://www.beargrylls.com/static/media/vid/home/00.mp4" loop="loop" muted=""></video>
  </section>
</div>

2
  • а почему данный эффект не работает в firefox ?
    – Вася
    3 фев 2019 в 12:05
  • 1
    @Вася в firefox нет поля wheelData у события я заменил на deltaY, должно теперь работать и в firefox
    – Vladimir
    3 фев 2019 в 16:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.