タグ

2018年6月22日のブックマーク (2件)

  • スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」

    シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB(minified / gzipped)で軽量 単体で動く。jQueryなどのライブラリに依存しないし別途CSSも必要ない 実装がシンプル アニメーションを細かく調整できる まだ開発中でv4がそろそろ完了しそう?(2017年内にと書いてあります が…) animate.css のようなCSSアニメーションのライブラリと連携させるスクリプト や他にもAOS とかDelighters.JS とかもあるんですが、単体でサクッと

    スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」
    sima-box
    sima-box 2018/06/22
  • 実装がどんどん簡単になっている!スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters

    コンテンツが横からスライドしたり、カードが追従するように表示されたり、スクロールに連動するCSSアニメーションを簡単に実装できるスクリプトを紹介します。 汎用性に非常に優れており、デスクトップ・タブレット・スマホを完全にサポートしています。また、他のスクリプトやスタイルシートに依存はなく、ReactVueJS、Angular、jQueryなどと一緒に利用することもできます。 Delighters Delighters -GitHub Delightersの特徴 Delightersのデモ Delightersの使い方 Delightersの特徴 DelightersはCSSアニメーションを加えて、ユーザーがスクロールするのを楽しませるスクリプトです。 超軽量 1.43kBの超軽量スクリプトで、他のスクリプトやスタイルシートに依存はありません。 フレームワークにとらわれない React、V

    実装がどんどん簡単になっている!スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters
    sima-box
    sima-box 2018/06/22