スロットマシンのドラムロールのように滑らかに動く画像が気持ち良いデジタルエージェンシー Everest のウェブサイト

doxas : 2019-02-07 14:05:04

ServiceWorker で読み込み速度などにも配慮

今回ご紹介するのは、Everest というデジタルエージェンシーのウェブサイトです。

WebGL を利用したドラムのようなアニメーションが非常に気持ちよく、思わずマウスでロールをぐいぐい動かしたくなるような気持ちにさせられます。

また読み込みがすごく速く感じられるのですが、そういうところも含めて操作感がとてもいいですね。

ServiceWorker を用いるなど、ウェブに必要な様々技術を駆使している感じも見受けられます。

一見ふつうの画像のように見えても……

今回のサイトはいわゆるコーポレートサイトなので、彼らの手がけてきたプロダクトや、所属するスタッフ、組織の得意とする技術や分野などについて丁寧に語られています。

多くの写真(しかも綺麗!)が使われているのですが、全体的にロードの遅延や待ち時間みたいなものがあまり感じられないような作りになっているのがすごいですね。

最初のトップページでは、操作方法のインフォメーションが手短な文章で表示されるのですが、それを読んでいる間にバックグラウンドで画像の読み込みがなされており、気がつくと操作できる状態になっています。

この画像を見ると、画面の右側に色のついた画像があり、真ん中より左側は、グレーアウトした状態になっているのがわかります。

実際には、ドラッグ操作やホイール操作を行った際には、これらの画像がすべて同時に動くのですが、真ん中や左側の列にある画像も、ロールし続けているときちんと右側に出てきます。

個別の列になっているというより、実際には全部がつながっているような感じですね。

このロールするアニメーションがすごく滑らかで、思わずぐいぐいと何度も動かしたくなってしまいます。

また、今回のサイトは一見普通の画像のように見えていても、それが Canvas 上に WebGL で描かれている矩形である場合があります。

そのような実装になっている理由は、クリックしてそのアイテムを選択した状態にするとわかるでしょう。

クリックすると同時に、まるでフワリと布が浮き上がるみたいな感じで画像が立体的な動きをするのですが、これが WebGL によって実現されていますね。

CSS などを使ってインタラクティブに動く部分もたくさんありますし、WebGL を全面に押し出したような実装ではありません。

でもその分、普通の画像が置かれているだけだと思ったものが、突如立体的に動いたりするちょっとした驚きのようなものが随所に仕込まれていて、とても楽しい動きになっています。

全体に、本当にサクサク動作するというか、ユーザーを待たせる瞬間がほとんどないのがすごいです。

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

リンク:

Everest | Digital Agency | Design, Development & Branding

share

follow us in feedly

search

search

monthly

sponsor

social