WebGL

【WebGL】Distortion Hover Effectを使っておしゃれなカフェメニューを作ってみた

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Distortion Hover Effect

今回はDistortion Hover Effectを使ってカフェメニューを作ってみました。
オンマウスのhover部分のアニメーションにthree.jsを使っています。

Distortion Hover Effect 公式サイト

画像にオンマウスした際の画像の切り替えにWebGLを使用したアニメーション効果を使用するものです。

3DCG用ライブラリのthree.jsを使用するのでCSSやjqueryの表現レベルを超えたアニメーションが実現できます。

以下のWebデザインブラッシュアップ解説で作成したデザインを使ってDistortion Hover Effectを実装していきます。

以下よりソースをダウンロードします。

WebGL Distortion Hover Effects

imagesloaded.pkgd.min.js(ローディング画面用)、three.min.js、TweenMax.min.js、hover.jsを読み込みます。

※TweenMax.min.jsは用意されていないので以下のようにCDNを使用します。

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/hover.js"></script>

HTML

grid__item-img内にドリンクイメージとオンマウス時のイメージを設定します。

data-displacementにはアニメーション画像を設定します。

	<div class="grid">
		<div class="grid__item">
			<div class="grid__item-img" data-displacement="img/displacement/7.jpg" data-intensity="0.9" data-speedIn="0.8" data-speedOut="0.4" data-easing="Circ.easeOut">
				<img src="img/drink02.jpg" alt="Image"/>
				<img src="img/drink02_h.jpg" alt="Image Alt"/>
			</div>
		</div>
		<div class="grid__item">
			<div class="grid__item-img" data-displacement="img/displacement/10.jpg" data-intensity="0.7" data-speedIn="1" data-speedOut="0.5" data-easing="Power2.easeOut">
				<img src="img/drink01.jpg" alt="Image"/>
				<img src="img/drink01_h.jpg" alt="Image Alt"/>
			</div>
		</div>
		<div class="grid__item">
			<div class="grid__item-img" data-displacement="img/displacement/15.jpg" data-intensity="-0.1" data-speedIn="0.4" data-speedOut="0.4" data-easing="power2.easeInOut">
				<img src="img/drink03.jpg" alt="Image"/>
				<img src="img/drink03_h.jpg" alt="Image Alt"/>
			</div>
		</div>
	</div><!-- grid -->

JS

上記HTMLでのクラス(grid__item-img)を設定します。

<script>
//ローディング
	imagesLoaded( document.querySelectorAll('img'), () => {
		document.body.classList.remove('loading');
	});
//アニメーション
	Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => {
		const imgs = Array.from(el.querySelectorAll('img'));
		new hoverEffect({
			parent: el,
			intensity: el.dataset.intensity || undefined,
			speedIn: el.dataset.speedin || undefined,
			speedOut: el.dataset.speedout || undefined,
			easing: el.dataset.easing || undefined,
			hover: el.dataset.hover || undefined,
			image1: imgs[0].getAttribute('src'),
			image2: imgs[1].getAttribute('src'),
			displacementImage: el.dataset.displacement
		});
	});
</script>

css

gridを使用してレイアウトしています。

/* 正方形gridの作り方 */
.grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr; 
		padding: 5% 5% 0 5%;
	}
.grid > *:first-child::after {
      content: "";
      width: 0px;
      padding-bottom: 100%;
      grid-row: 1 / 1;
      grid-column: 1 / 1;
 }
.grid__item {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100vw;
	width: 100%;
}
.grid__item-img {
    display: block;
    height: calc(96% - 5px);
    width: calc(96% - 5px);
    margin: 2%;
    border: 5px solid #FFF94A;
}
/* canvas */
.grid__item-img canvas {
    width: 100%!important;
    height: 100%!important;
}
.grid__item-img img {
	height: 100%;
	display: block;
}
/* オンマウス時の画像 */
.grid__item-img img:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s;
}
.grid__item:hover .grid__item-img img:nth-child(2) {
	opacity: 1;
}
.js .grid__item-img img {
	display: none;
}

サンプル

Distortion Hover Effectはcssとjsの作りが汎用的ではないため公式サイトと全く違うデザインに実装するのは敷居が高そうでした。

ただ3Dアニメーションの表現力はWebGLの強みとも言えるので印象付け・差別化・ブランディングなどでは大いに役立ちそうです。

uhaha

今回カスタマイズするのに結構時間かかっちゃった。。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*