Sal.js

JavaScript

Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです。Vanilla JSが使われていてjQueryなどへの依存性もありません。オプションやアニメーションの種類もいくつか用意されているのでカスタマイズしたい人にも使いやすそうですね。

Sal.js

デモ

デモでは四角形や星形や六角形などいろんな図形がスクロールとともにアニメーション表示されます。スクロールアニメーションがあることでスクロールするのが楽しくなりますね。

  • fade
  • slide-up
  • slide-down
  • slide-left
  • slide-right
  • zoom-in
  • zoom-out
  • flip-up
  • flip-down
  • flip-left
  • flip-right

また、data属性には、data-sal-duration、data-sal-delay、data-sal-easingが用意されています。

Sal.js

Foodie料理や日常をオシャレに撮影できるiPhoneカメラアプリ「Foodie」前のページ

アクセシブルなビフォーアフター画像を実装できる「BeerSlider」次のページno-image

関連記事

  1. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  3. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  4. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  5. TabTab.js

    JavaScript

    アニメーション付きで切り替わるjQueryのタブプラグイン「TabTab.js」

    TabTab.jsは素敵なアニメーション付きのタブコンテンツを実装する…

  6. lightGallery

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP