個性的なホバーエフェクトでサイト全体が明滅する Daniel Vaszka さんのポートフォリオサイト
アイデアとしてはおもしろい
今回ご紹介するのは、ウェブデザイナーであり webflow を利用したデベロッパーでもある Daniel Vaszka さんのポートフォリオサイトです。
最近、webflow developer という肩書をよく目にするようになった気がするのですが、日本でいうところの STUDIO みたいな感じで普及が進んでいるんですかね？
今回のサイトでは WebGL をエフェクトの用途で利用していて、なかなか個性的なホバーエフェクトを見ることができます。
リンク：
影響が広範囲に及ぶのは珍しい気がする
今回のサイトの WebGL 実装は、他の事例と比較して飛び抜けて技術的に優れているというわけではありません。
どちらかというと、初歩的というか、割と王道の使い方だと言えると思います。
たとえばトップページ部分には Daniel Vaszka さんご本人と思われる写真が表示されますが、そこには走査線風のエフェクトが掛かっていたりしてこれも WebGL の表現としては基本的なものですね。
個人的におもしろいなと思ったのは、トップページのほか Project のページなどでも見ることができるホバーエフェクトです。
一部の画像部分が、単なる画像ではなくエフェクトを伴うインタラクティブ性のある実装になっていて、カーソルを乗せることで大きくビジュアルが変化するようになっています。
ディストーションと RGB シフト、さらに加算合成的にライトのような模様が重ねられるというちょっと変わったエフェクトで、視覚的な効果はなかなか大きいと思います。
このエフェクトの特殊なところは WebGL 実装によるビジュアルとしてのおもしろさだけではなく、その変化が「ページ全体に及ぶ」ことにあると思います。
いずれかの画像にカーソルが乗りエフェクトが発生すると、周辺にあるその他の DOM がグッと明度が落ちて暗くなるように変化します。
このページ全体としての複合的な変化も含めてエフェクトを見てみるとより印象的な仕上がりになっていて、よく工夫されていなと思いました。
ウェブサイトを日々眺めていると、なんかこういうフォントが流行ってるな～とか、こういうエフェクトばかり見かけるな～とか、いろいろ感じることがあります。
今回のサイトのホバーエフェクトはあまり見たことがない感じに調整されていて、新鮮な気分で見ることができました。
WebGL のエフェクトが発動している最中にページ全体の明度が変化するなんて、ありそうでなかったというか、シンプルだからこそ視覚効果が大きくて興味深いなと感じました。
ぜひチェックしてみてください。