Good Inspiration of the Week. – November #1, 2017

November 01, 2017Inspiration

Good Inspiration Navigation Effect

リッチなコンテンツ表現として、HTML canvas animationやwebGLといった技術が使われているサイトが数多く出てきている中で、create.jsやpixi.jsやthree.jsは必須のスキルだと日々切迫感に迫られている昨今で、「そんな難しい技術を使わなくても十二分にリッチな表現ができるよ」という実装をしているサイトを発見。既存の基本的な要素でもこんなリッチなコンテンツが作れるのかと感動したので今週の最大のインスピレーションはこちらを採用。

フランスのレストラン「the Buyer」のブランドサイトです。

the Buyer

https://thebuyer.fr/

ナビゲーションボタンを押すと、フルスクリーンでグローバルナビゲーションが表示されているという点では昨今のトレンド通りなのですが、特筆すべきはその背景の挙動です。

背景と同型の別レイヤーを設けて、座標内に各要素を配置。


<div id="id" class="class">
 <div class="a1"></div>
 <div class="a2"></div>
 <div class="a3"></div>
 <div class="a4"></div>
 <div class="a5"></div>
</div>



#id {
	transform-style: preserve-3d;
	animation: turn 30s linear infinite;
}
@keyframes turn {
	100% { transform:rotateY(360deg) }
}
#id div {
	position: absolute;
	transition: .5s;
}
#id div::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    transform: rotate(45deg);
}
#id .a1 {
	width: ;
	height: ;
	top: ;
	left: ;
}
///以下.a5までそれぞれ設定

同型レイヤーを3d軸で360度回転させてダイナミックに動かしています。

更に、各メニューにマウスオーバーをすると、親要素のクラスが変異し、それによって子要素の絶対位置を切り替えてユーザーの挙動に意味を持たせるという小技が。

ナビゲーション以外にもPJAXを使った高速の読み込みでページ遷移の負担を感じさせない実装やカーソルの動きに追随したコンテンツの挙動など、本当によくできてる。参考にしたい要素が盛りだくさんのサイトです。