スライダー画像にホバーすると背景動画が再生する機能を実装する方法【JavaScript】

SHARE

今回はJavaScriptを使用して。スライダー画像にホバーすると背景動画が再生する機能を実装してみました

コピペしてすぐに実装できるようにCodePenによるデモを用意しています。ぜひ最後までご覧いただけると嬉しいです。

1.実装イメージ

実装イメージは以下の通りです。

See the Pen hover-thumbnail-videoplay3 by りょーすけ (@s_ryosuke_1242) on CodePen.

注意点としては予め、CDNでプラグインをダウンロードしておきましょう。

CDNはコチラ

必要なファイルは『gsap.min.js』です。

2.HTML

HTMLはコチラの通りになっています。比較的シンプルですね


<section class="animation-area">
  <div class="video-wrapeer">
    <video src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/video/01.mp4" muted></video>
    <video src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/video/02.mp4" muted></video>
    <video src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/video/03.mp4" muted></video>
    <video src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/video/04.mp4" muted></video>
    <video src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/video/05.mp4" muted></video>
    <video src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/video/06.mp4" muted></video>
  </div>
  <div class="loop-lists">
    <ul class="wrapper loop-left">
      <li class="box"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/01.jpg"></li>
      <li class="box"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/02.jpg"></li>
      <li class="box"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/03.jpg"></li>
      <li class="box"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/04.jpg"></li>
      <li class="box"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/05.jpg"></li>
      <li class="box"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/06.jpg"></li>
    </ul>

    <ul class="wrapper loop-left">
      <li class="box2"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/01.jpg"></li>
      <li class="box2"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/02.jpg"></li>
      <li class="box2"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/03.jpg"></li>
      <li class="box2"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/04.jpg"></li>
      <li class="box2"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/05.jpg"></li>
      <li class="box2"><img src="https://ryo-sukeblog.net/wp-content/uploads/slider-hover-playvideo/img/06.jpg"></li>
    </ul>
  </div>
</section>

3.CSS

次にCSSです。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body,main,section{
    width: 100%;
}
h1 {
    font-size: 10vw;
}
.spacer{
    width: 100%;
    height: 40vh;
    background-color: pink;
}
.animation-area{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.video-wrapeer{
    width: 100%;
    height: 100%;
}
video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    opacity: 0;
    transition: all .3s;
}
.wrapper{
    width: 100%;
    display: flex;
}
.box,.box2{
    width: 300px;
    height: 300px;
    background-color: #ccc;
    color: white;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    flex-shrink: 0;
    cursor: pointer;
}
.box img,.box2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.js-visible{
    opacity: 1;
    display: block;
}

/* loop slider */
@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
}
.loop-left{
    animation :infinity-scroll-left 10s infinite linear 0.5s both;
}
.loop-lists {
    display: flex;
    width: fit-content;
    height: 300px;
    list-style: none;
    position: absolute;
    top: 50%;
    overflow: hidden;
}

4.JavaScript

次にJavaScriptです

var videos = document.querySelectorAll('video');
var thumbnails = document.querySelectorAll('.box');
var thumbnails2 = document.querySelectorAll('.box2');

for (let i = 0; i < videos.length; i++) {
  
  thumbnails[i].addEventListener('mouseover',function(e){
    videos[i].currentTime = 0;
    videos[i].classList.add("js-visible");
    videos[i].play();
  })
  thumbnails[i].addEventListener('mouseout',function(e){
    videos[i].classList.remove("js-visible");
  })

  thumbnails2[i].addEventListener('mouseover',function(e){
    videos[i].currentTime = 0;
    videos[i].classList.add("js-visible");
    videos[i].play();
  })
  thumbnails2[i].addEventListener('mouseout',function(e){
    videos[i].classList.remove("js-visible");
  })
}

前の記事

【GSAP】テキストの時間差出現を利用したローディング演出を実…

次の記事

【GSAP】転がるテキストに時間差出現を組み合わせる【デモあり…