クジラたちの姿やその鳴き声の視聴も可能！ 独特なスクロール演出も面白い Save whales
うねる波のような横方向のスクロール
今回ご紹介するのは、Save whales というクジラたちの保護を訴えるウェブサイトです。
こちらのサイトでは、トップページで行う水平方向のスクロール操作や、各コンテンツページでのクジラの立体表現などに WebGL が使われています。
クジラたちを捉えた美しい写真もたくさん使われていて、とてもきれいなウェブサイトになっています。
リンク：
ホイールスクロールやスワイプ操作でぐいぐい動く
今回のサイトの特徴的な演出のひとつが、トップページ部分に実装されている水平方向にスクロールする演出です。
PC で閲覧している場合であれば、ホイールスクロールでも、あるいはマウスで要素を掴んでスワイプするように動かす操作でも、この水平スクロールの演出を見ることができます。
ふたつのシーンを繋ぐ部分やシーン全体が、歪められることでうまくつなぎ合わされています。
この静止画だけを見てもちょっとわかりにくいですかね……
左側と右側を比べると、明らかに海の色の明暗が異なると思うのですが、ふたつのシーンがガラスや水で歪められたみたいな感じでくっついています。
シーン全体も波うつように大きく変形しているのですが、実際に動いている様子を見てみないと、キャプチャ画像ではわかりにくいかもしれません。
かなりダイナミックに動くので、迫力があります。
さらに、このトップページ部分から特定のクジラの名称をクリックすると、そのクジラに関するより詳細なコンテンツを見ることができるようになっています。
各コンテンツページでは、クジラの 3D モデルがゆったりと泳ぐような感じで現れる演出があります。
さらに、このシーンではクジラの鳴き声の音声データも再生されるようになっていて、まるで海中の様子を見ているかのような、神秘的な気持ちになりますね……
クジラの種類ごとに形状や色がまったく違うことがよくわかる。
今回のサイトはクジラを守っていこうという趣旨のページなのですが、クジラの生態や特徴が結構詳しく紹介されていて、大変興味深い内容になっていますね。
各コンテンツページに登場する、クジラの 3D モデルも質感良く作られていて、わずかにですが波に揺れるようにアニメーションもしています。
独特なスクロール表現も含めて、見ていて思わず目を引かれる内容が多いサイトになっていると思います。
ぜひチェックしてみてください。
