l Webデザイン　スクロールエフェクトまとめ

Webサイトのフロントエンドを実装するうえで、ボタンアニメーションなどのアイディアがほしい！と言う時には、CodePenというサービスがおすすめです。ウェブ制作時、フロントエンドで使用する技術のコードの共有や外部サイトへの埋め込みができるサービスです。そんなCodePenの中でもスクロールダウンのデザインや効果として使えそうなアイディアをまとめてみました。

CodePenについては以前にも紹介しているので、下記からご確認ください。

l スクロールエフェクト

Webサイトのメインビジュアルでよく使われているスクロールダウンボタンですが、次のセクションへスクロールを促すアニメーショを表現したサンプルです。

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

【IE11動作】未対応

l 最後に

動きをつけることによってユーザーの興味を引きつけたり、商品への理解をより促す効果が期待できるので、活用できそうなエフェクトがあれば、チャレンジしてみてください。