
個性的なマウスカーソルに対するインタラクションがおもしろい Nael Messaoudene さんのポートフォリオサイト
いろいろ芸が細かい
今回ご紹介するのは Nael Messaoudene さんのポートフォリオサイトです。
2D と 3D の両方を上手に活用したエフェクトが用いられており、なんとも個性的なポートフォリオに仕上がっています。
WebGL 実装以外の部分にも結構芸が細かい仕込みがいろいろあり、見ごたえのあるウェブサイトとなっています。
リンク:
Nael Messaoudene - Freelance Creative Developer Portfolio
カーソルの動きに連動したエフェクト
今回のサイトで最もビジュアルとしてのインパクトが強いのはなんといってもトップページの部分です。
ページがロードされた直後に発生するイントロ演出では、リールが回転するような感じで画像がスクロールしながら画面に現れます。
このリールみたいな画像の部分は立体的にわずかに歪んでいて、ほんの少しのディストーションなんですがすごく目を引きます。
カーソルを動かしてやると、さらに大きく歪むようにエフェクトが発生します。
カーソルが動くと、そのカーソルの周辺に対して UV がずれるような感じでインタラクティブに演出が発生するのですが、カーソルを動かすのを止めると、歪んだ部分が徐々に戻っていくような感じで変化します。
この戻っていくときの質感もなんかおもしろいんですよね。
ヌルっと元の状態へと戻る動きがおもしろくて何度もカーソルを動かしたくなってしまいます。
ページが切り替わる際のトランジションエフェクトも見どころの1つです。
About ページに移動するときと、トップページで画像をクリックして事例の詳細ページへと移動するときとで、それぞれ演出方法が異なっています。
いずれのエフェクトもなかなか凝っていて、丁寧に作り込まれている感じがします。
各事例のページのデザインもオシャレでかっこいいです。
今回のサイトは WebGL を演出の要として使っていますが、実際のところ、WebGL を使っていない部分の作り込みにも注目したいポイントがいくつもありますね。
セクションを区切るラインがカーソルに弾かれたようにたわんだり、個性的なフォントが印象的に使われていたり、全体的なレベルの高さを感じます。
各事例の詳細ページへ遷移する際の動きなんか、すごく気持ちがいいですね。
ぜひチェックしてみてください。