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

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

Scroll

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

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

参考にしたコード🙏

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

HTML

 

ライブラリ読み込み

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

CSS

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

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

JS

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

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

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

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