three.js をベースに WebGL で画像遷移のトランジションエフェクトを実現する hover-effects が素晴らしい出来

doxas : 2018-04-13 13:57:46

短い設定用スクリプトだけで利用できる

今回ご紹介するのは、当サイトでも何度かご紹介したことのある Codrops に投稿された記事から、2枚の画像を遷移するようなエフェクトを実装するライブラリのお話。

当該の記事からは、実際に動作するデモを見ることができるのはもちろん、簡単なライブラリについての概要の説明のほか、ソースコードのダウンロード、さらには Github のリポジトリへのリンクなども置かれています。

記事の執筆者でもある Robin Delaporte さんは、フロントエンドでは結構有名人だと思いますのでご存知の方も多いかもしれません。

とてもシンプルだがそれだけに使いやすい実装

以前に Codrops から引用させていただいたときも書いたかもしれませんが、当サイトで他のサイトから記事を引用するのって、結構気が引けるというか……

まったく他者さまの成果を盗用するつもりはないのですが、非常に良くできたデモが置かれているので、日本でも、ひとりでも多くの方に知ってほしくてご紹介させていただこうと思いました。

ここでは、そこで紹介されているライブラリについて、WebGL 的な視点で少し触れてみたいと思います。

今回紹介されているライブラリは「メインとなる2枚の画像」と、それをエフェクト付きで遷移させる際の「歪ませるための画像」の合計3枚の画像を用いる設計になっています。

元記事の「View demo」のボタンからは、それらを実際に動作させているデモを見ることができるのですが、マウスカーソルを画像の上にホバーさせると、スッと歪んだようなエフェクトが掛かるようになっているのがわかると思います。

上の画像を見ると、水平方向に引き摺ったような感じで画像が歪んでいるのがわかりますかね。

このように、ふたつの画像が切り替わる際の歪みエフェクトを簡単に扱えるようにしたのが今回紹介されているライブラリです。

このライブラリは three.js を WebGL 描画の足回りとして使っていて、イージングアニメーションには TweenMax を使っているようですね。これらのヘルパーライブラリを組み合わせることで、誰でも簡単にエフェクトをサイト上に再現できるように工夫されています。

歪みがどのように現れるのかは、歪ませるための第三の画像がどのような柄になっているのかによって決まります。

デモのなかには、単純な水平方向の歪みの他にも、雪の結晶のようなものをイメージさせるものや、三角形などのエッジの利いたラインが特徴的なものなどもあります。

実際にどのように使うのかは、当該記事や Github のリポジトリ等を見てもらえばわかるかと思います。

ほんの数行のコードで、このようにリッチなトランジションエフェクトが行えるというのはとても素晴らしいですね。

WebGL を使ったエフェクトのメリットは、なんといってもその柔軟性にあると思います。シェーダを独自に記述できるわけですから、大抵のことは、WebGL を導入することで実現できます。

しかし実際には、シェーダをバリバリ書くというのはなかなか敷居の高い作業です。その点、今回のライブラリでは利用者が用意するのは基本的には画像リソースだけですので、非常に手軽だと言えるでしょう。

ソースコードをダウンロードできるようになっていますので、興味のある人は、その中身を見て勉強してみるのもいいと思います。

いろいろ省いて簡潔に言うと、要するに使われているシェーダはまったく同じで、歪ませるための第三の画像の内容に応じて、トランジションエフェクトの見た目が変わるようになっている感じです。かなり、ソースコードはシンプルにまとまっているので、読むのはそれほど難しく無いと思います。

コードを参考にするだけでなく、純粋に演出の参考資料として見てみても、かなり刺激的な内容のデモになっていると思います。

ぜひチェックしてみてください。

リンク:

WebGL Distortion Hover Effects | Codrops

@not__robin

share

follow us in feedly

search

search

sponsor

social