CODE STUDY WEBSITE Edit : 2019.12.02 Update : 2023.06.14

画像がぐにゃっと切り替わるスライドの作り方 – WebGL

まず、”ぐにゃっと切り替わる”とはどういうことかというと、下のサンプルのように歪んで切り替わるスライドの事を指します。

Scroll

そして、これを作るにあたりWebGLを少し理解することが必要になってくるのですが、「WebGL」とはなんぞや…?について、こちらの記事「【WebGL / GLSL】デザイナーにモテるためのWebGL入門(概念編)」にとても分かりやすく載っていました!一番下の参考記事も読むとさらに分かりやすいです。

この仕組みを頭にいれつつ、今回はこのスライドの作り方のみ簡単に記載します。

Contents

参考にしたコード🙏
HTML
ライブラリ読み込み
CSS
JS

参考にしたコード🙏

https://codepen.io/ReGGae/pen/bmyYEj
「Distortion Hover Effect」の仕組みがslide用に公開されているものと思われます。このコードは、マウスホイールを下に動かした際に、画像が縦にスライドする仕様になっているので、少しカスタムして作ります。

HTML

<div class="wapper_img">
  <div class="slider js-slider">
    <div class="slider__inner js-slider__inner"></div>
    <div class="slide js-slide"></div>
    <div class="slide js-slide"></div>
    <div class="slide js-slide"></div>
    <nav class="slider__nav js-slider__nav">
      <div class="slider-bullet js-slider-bullet">
        <span class="slider-bullet__text js-slider-bullet__text">01</span>
        <span class="slider-bullet__line js-slider-bullet__line"></span>
      </div>
      <div class="slider-bullet js-slider-bullet">
        <span class="slider-bullet__text js-slider-bullet__text">02</span>
        <span class="slider-bullet__line js-slider-bullet__line"></span>
      </div>
      <div class="slider-bullet js-slider-bullet">
        <span class="slider-bullet__text js-slider-bullet__text">03</span>
        <span class="slider-bullet__line js-slider-bullet__line"></span>
      </div>
    </nav>
    <div class="scroll js-scroll">Scroll</div>
  </div>
</div>

</div>

</div>

</div>

</nav>

<div class="scroll js-scroll">Scroll</div>

</div>

ライブラリ読み込み

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js'></script>

1 2	<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js'></script>

TweenMaxとthree.jsを読み込みます。

CSS

画像のみ使用し、ナビゲーションや、スクロールマークの箇所は不要なので、cssで非表示にしてしまいます。

<style>
.wapper_img .slider {
  height: 230px;
}
.slider__nav.js-slider__nav,
.scroll {
  display: none;
}
</style>

<style>

.wapper_img .slider {

height: 230px;

}

.slider__nav.js-slider__nav,

.scroll {

display: none;

}

</style>

HTMLから要素ごと削除する場合、JSも変更する必要があるのでここでは割愛します。

JS

まず、先ほどのお手本コードのJSをまるっと持ってきます。
今回、マウスホイールでスライドではなく、サイトにアクセスするとautoplayでスライドし続けるようにしたかったので、一部だけ以下のように書き換えます。

  listeners() {
    //window.addEventListener('wheel', this.nextSlide, { passive: true })
　　//wheelでスライドではなく、5秒ごとにスライドに変更
    setInterval(this.nextSlide, 5000, { passive: true });
  }

listeners() {

//window.addEventListener('wheel', this.nextSlide, { passive: true })

　　//wheelでスライドではなく、5秒ごとにスライドに変更

setInterval(this.nextSlide, 5000, { passive: true });

}

以下の箇所はスライドさせる画像に変更してください。また画像の枚数に合わせてHTMLも変更します。

    this.images = [
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg',
      'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg'
    ]

this.images = [

'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg',

'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg',

'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg'

]

ここまでで、スライドが完成します。
サンプルでは、ぐにゃっとさせる模様に「https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/rock-_disp.png」の画像を挟んでいますが、この画像を変更したり、各値(ease: Expo.easeInOut)等を変更することで独自の効果を演出することが可能になります。

参考:【WebGL / GLSL】シェーダー100本ノック〜ディストーションエフェクト