menu

おすすめのスクロールアニメーション

カテゴリー： スタッフブログ

2020年5月7日

最近では、スクロールするとコンテンツや画像が変化するアニメーションを取り入れているWebサイトが多くあります。

スクロールすることでWebサイトに動きがあるとオシャレに感じますよね。
しかし、「専門知識がないと実装するのは難しそう」と思っている方も多いのではないでしょうか。そこで、ここではjQueryの知識がなくても簡単に実装できるスクロールアニメーションのライブラリを２つご紹介します。


ScrollReveal
ScrollRevealは、公式サイトのトップページで表示されるような、ふわっと動くアニメーションを簡単に実装することができます。公式サイトのデモを是非ご覧になってみてください。
公式サイト(デモ)：https://scrollrevealjs.org/

■おすすめポイント

  • ・jQueryやCSSを必要とせず、「ScrollReveal」単体で動作する
    ・細かく表示タイミングを設定できる
    ・アニメーションさせたい要素をclass指定するだけで設定が完了する
    ・高機能にもかかわらず、簡単に実装できる

 

AOS
AOSは Animate On Scroll Library の略称です。
ウィンドウ全体をスクロールしたときに、対象要素が表示されるタイミングでアニメーションが開始します。公式サイトでは、複数のデモが表示されるため、一番下までスクロールしてみてください。
公式サイト(デモ)：http://michalsnik.github.io/aos/

■おすすめポイント

  • ・jQueryを使用しない
    ・JavaScriptとCSSを必要とするが、CDNで読み込むことが可能なため、導入が簡単
    ・アニメーションさせたい要素にカスタム属性を指定するだけで設定が完了する
    ・シンプルで分かりやすい

 

まとめ
今回は、簡単に導入できるスクロールアニメーションのライブラリをご紹介しました。どちらのライブラリもオプションの設定が可能で、ニーズにあわせてカスタマイズすることができます。

スクロールアニメーションには「アイキャッチ」効果があり、閲覧者の注意を引き付けることができます。そのため、スクロールアニメーションを導入することで、閲覧者をWebサイトに長くとどめる効果があると言われています。

スクロールアニメーションを導入して個性的なWebサイトを作ってみてはいかがでしょうか。

CPTIMES

   

投稿一覧

HTMLコーディング WordPress制作のお問い合せ・お見積りはこちらから

  • メニュー・料金
  • 納品までの流れ

pagetop