このページの本文へ

スクロールアニメにはjQuery不要でサクッと使える「ScrollReveal.js」が便利

2018年03月30日 13時22分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

スクロールに気の利いた動きを加えたいときに便利なJavaScriptのライブラリー「ScrollReveal」を紹介します。

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal」というやつです。

無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。

ScrollRevealのいいところ

  • 3.3KB(minified / gzipped)で軽量
  • 単体で動く。jQueryなどのライブラリに依存しないし別途CSSも必要ない
  • 実装がシンプル
  • アニメーションを細かく調整できる
  • まだ開発中でv4がそろそろ完了しそう?(2017年内にと書いてありますが…)

animate.cssのようなCSSアニメーションのライブラリと連携させるスクリプトや他にもAOSとかDelighters.JSとかもあるんですが、単体でサクッとアニメーションを実装したいときにはScrollRevealが良さそうです。すでにサイトでanimate.cssやjQueryを使っている場合はAniViewもありかもしれませんけど。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く