これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js
スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.jsの特徴 Sal.jsのデモ Sal.jsの使い方 Sal.jsの特徴 vanilla JavaScript vanilla JavaScriptで書かれており、他のスクリプトへの依存はありません。 超軽量 2.26KBの超軽量スクリプト。 パフォーマンス パフォーマンスにフォーカスして設計。 実装が簡単 外部ファイルを加えて、HTMLにdata属性を加えるだけの簡単実装。 ライセンス MITライセンスで、個人でも商用でも利用できます。 Sal.jsのデモ デモでは、S
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and flexible JavaScript library to animate the web.
CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron
ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バインド インタラクション 「data-micron-bind="true"」で、他の要素にも簡単にバインドできます。 コントロール インタラクション エフェクト、スピード、イージングなどは、data属性で簡単に変更できます。 Micron.jsのデモ ライブラリを実際に使用して、Micron.jsをボタンに適用してみました。 ボタンをクリックすると、基本となる12種類のアニメーションを楽しめます。
KUTE.js Core Engine Examples | Javascript Animation Engine
KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript without libraries like jQuery, but before we head over to the more advanced examples, let's have a quick look at these two basic examples here. Note: the examples are posted on codepen. Basic Native Javascript Example When developing with native Javascript, a very ba
現場で使えるアニメーション系JSライブラリまとめ(2018年版) – TweenMax, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
参考 タイムライン：GSAP入門（後編） - タイムライン制御やスクロール演出など FLIP : FLIPアニメーションの原理と基礎 スクロール連動：JavaScriptで作る本格スクロール演出 スタッガー：バラツキのある動き CSS補完：x等の指定をtransformかleftに、rotate等の指定をtransformへマッピングするかどうかの意味で記載 まとめ：目的に適したライブラリを 実際にどのライブラリを使用するかは目的に合わせるべきだと思います。GSAPは多機能で高性能が魅力で、DOM制御では簡潔に記述できるAnime.jsも良い選択肢といえます。学習コストや将来性、枯れ具合、動作環境、デバッグの行いやすさ、開発環境の充実度などもあわせて、最適なライブラリを選ぶのがいいでしょう。 調べるのが大変という方は、とりあえずGSAPを使うのがオススメでしょうか。基本的な使い方はどのライ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テキストを部分的にアニメーションしながら交換できる「jQuery Text Rotator」:phpspot開発日誌
