BLOG
Webエンジニア2025年新卒採⽤ BRISKは新卒からリモートワークです。

[jQuery]スクロールに応じてホワッと表示させる効果(スクロールエフェクト)を簡単に実装する

更新日:2018/06/25

eyecatch_simple_scroll_effect
サイトを表示したときに、少し動きがあると目が自然とそこに注目し、その下はどうなってるのかな、と読み続けてみたくなりますよね。
そんな効果をスクロールエフェクトと呼びますが、あまりゴテゴテした動きをつけると逆にサイトが読みづらくなるときもあるので、サイトのコンセプトに沿ったエフェクトを選択する必要があります。
しかし、シンプルなスクロールエフェクトはたいていのサイトに馴染みますし、プラグインなどを使わなくても簡単なjsで実装できます。

ホワッと出てきたボタンは、押してみたくなったりするかもしれません。

これの良いところは、html側はクラスをつけるだけ、そしてcssは何もいじらなくても実装できる点です。
大変シンプルなので、仕組みが分かればいろいろ応用することも簡単です。

横からシュッと出すエフェクトとか。
ボタンの色を途中で変化させるエフェクトとか。

簡単なので、ランディングページ作成などに利用してみるのはいかがでしょうか。
ただ最初にも書きましたが、多用すると逆効果にもなりかねませんので、適切な量と統一感を持って使用するのが良いかと思います。

南本貴之


FOLLOW US