マウス操作でパララックス!アシンメトリーな刺激的Webデザイン
Ursula B
Webデザイン3つの良いとこ : 3 Good Point!
- マウスの位置でパララックスエフェクト
- アシンメトリーな刺激的Webデザイン
- コンテンツの開閉っぷり
私はWebデザインのココを見た!
アシンメトリーであり刺激的であるWebサイトを、マウスの位置でパララックスさせる挑戦的なWebデザイン。この三角をモチーフにした構成が絶妙だし、写真一枚一枚のトリミング視点が面白い。
マウスの位置でパララックス効果
マウスを動かすことによって、画面がスクロールする演出が実装されています。
このスクロールの面白いところが、一見全てがしっかりと平面で一致しているような印象を持ちますが、実は三角や台形のコンテンツはabsoluteで独立しており、背景である女性と犬のものとは違うスクロール速度で動くというところ。つまりは視差効果が生まれパララックスWebデザインとなっています。
そもそもマウスでヌルヌルと動くのは意外と気持よく、というよりも最後まで行きたくなってしまう感覚を覚えてしまいました。このように短くコンテンツをまとめている場合は、マウスの位置でスクロールするこの演出は良いものかもしれませんね!
コンテンツの開き方がサイト全体に合っている
この三角形で区切られたコンテンツをクリックすると、コンテンツが開くのですが、その開き方が素晴らしい。
しっかりとその位置からコンテンツが開かれ、ゆっくりとした開閉時間もベストだと思います。lightbox系エフェクトとしてかなり好感が持てました。
他にもそもそもの写真のトリミング視点や、レイアウト構造そのものがとても独創的だったりと、参考になる点が多くあるWebデザインでした!
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー