11 JavaScript Animation Libraries For 2019
While browsing the web looking for a neat Javascript animation library, I’ve found that many of the “recommended” ones were not maintained for a while. After some research, I’ve gathered 11 of the finest libraries around to use in your app. I’ve also added a few more, mostly unmaintained, useful libraries. When building your UI with components, use Bit (GitHub) to easily share and reuse components
Lottieであなたの「サービス」をもっとリッチにアニメーションさせる話 - pixiv inside
この記事はピクシブ株式会社 Advent Calendar 2017の19日目です。 こんにちは、17新卒エンジニアのまつらいです。普段は主にpixivFANBOXというサービスでJavaScriptやPHPを書いています。今日は、ウェブブラウザ上で動く軽量で扱いやすいアニメーションを実現させることができる、僕の大好きな「Lottie / Bodymovin」について作例を含めて紹介します。 https://matsurai25.info/bodymovin/blue/ たとえば、デザイナー(※1)に貰ったAIファイルをそのままAfterEffectsで加工、レイヤー毎に動きをつけてみました。このページはiOS safariやIE11でも動作します。LPなどの目立つ部分でLottieを使うと、サービスがグッと印象的になるはずです。 なお、この例ではサイズの大きな画像が使っているので、端末の
アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ - Qiita
少し前に、アニメーション最強のVelocity.jsの使い方という記事を書きましたが、対抗馬となるanime.jsが出てきたので使ってみました。 anime.jsとは？ 高機能かつ軽快なアニメーションする軽量ライブラリです。 Velocity.jsと違い、jQueryの$.animateと互換性はありませんが、記述方法が分かりやすくカンタンに導入できると思います。 なお、アニメーションは、Velocity.jsと同様にrequestAnimationFrameベースで動作させており、スムーズにアニメーションされます。 容量 Velocity.jsと比べると、anime.jsの方が軽いですね。 velocity.min.js : 34.4 KB anime.min.js : 9.21 KB 記述方法 はい、これで動きます。（右に100px移動） カンタンですね。
奇術の日なので、ScrollMagicとかJavaScriptのスクロール連動ライブラリについて調べてみました - Qiita
MITライセンス | Wikipedia GPL（GNU GPL v3）ライセンス | Wikipedia ここで言う「スクロール連動」とは、閲覧者のページ上のでのスクロール（量）を検知し、特定の量やビューポート（ブラウザの表示領域）内に特定の要素が検知されたときに、特定のイベントや演出が展開されるコンテンツ。としています。 ScrollReveal ScrollReveal は、他の類似ライブラリに比べてスター数も多く、頻繁にアップデートも行われているようで、2018年12月現在のバージョンは4.0.5。非商用はGNU GPL v3。商用ライセンスも用意されています。 アニメーションなど演出処理もjsに含まれた演出一体型ライブラリで、別途cssを読み込む必要はないので、手軽に使用できるのがメリット。他のライブラリと同様に、スクロール・要素検知イベントが用意されているので、イベント発火時に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
