スクロールとホバー効果はデザインをより豊かにし、サイトへの興味を引きつけることができます。Framerはこれらの効果を実現するために最適化されています。このチュートリアルでは、スクロール効果を用いてテキストと背景色を動的に変更する方法とカードに楽しい3Dホバー効果を適用する方法を見ていきます。

ヒーロー/背景Variantを作成する

スクロール効果の出発点は、ヒーローコンテンツと背景のVariantを準備することです。画像セクションが3つの区間であれば、それに対応する3つのバリエーションを作成すると管理がすっきりします。

各画像セクションフレームには固有のScroll Section名を指定します。その後、ヒーローと背景コンポーネントでScroll Variantを使用すると、現在のビューに表示されるセクション名に基づいてそのVariantに自動的に切り替わります。

控えめな3Dホバー効果を追加

スクロールの切り替えだけでも十分に生き生きしていますが、カードに3Dホバーを加えると微細なインタラクションがより説得力のあるものに感じられます。属性パネルでHover効果を選択し、角度やスケールなどの詳細属性を少しずつ調整してみてください。インタラクションが大きすぎると情報自体より効果が先に目に入りやすいため、微細に動く程度に調整するとメインコンテンツが主役でありながらも、ささやかなインタラクションを楽しむことができます。望む感触を得るまで値を少しずつ動かしてみてください。

まとめ

デザインにスクロールとホバー効果を使用すると、新しい次元のインタラクティブ性と視覚的な興味を加えることができます。Framerを使えばこれらの効果を簡単に作成し、望む結果を得るまで様々なスタイルを試すことができます。スクロールとホバー効果の可能性を探りながら、デザインのスキルを一段階向上させ、注目を集める魅力的なデザインを制作できます。

効果を見てプロジェクトを追いかける→

本記事はFramer公式ブログの「Framerでスクロールとホバー効果を探る」を翻訳・改作したコンテンツです。