2018年10月16日(火)
JavaScriptで簡単にアニメーションを実装できるライブラリ「anime.js」「TweenMax (GSAP)」「Tween.js」
当ブログでは主にjQueryを使ったアニメーション動作について紹介していますが
jQueryを使わずにJavaScriptのみでWebページ上に簡単にアニメーションを
実装できるライブラリも多々あります。そんなJavaScriptのみで、とても使いやすくなめらかな動きのアニメーションを
組み込むことができるライブラリを自分用メモとして紹介してみます。anime.js
anime.js「anime.js」はCSSのTransformを扱う感覚でアニメーションを実装することができ
動作自体もとても軽快です。ライブラリサイトがそのままデモ画面になっていますが
その動きを見ているだけでいろいろな発想が湧いてきそうです。「anime.js」の対応ブラウザは以下になっています。
・Chrome
・Safari
・Firefox
・Internet Explorer 10以降実装方法の一例は以下のようになっています。
◆HTML ...
0
5
5
22
author:
BlackFlag
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログ
‹ PREV
【2024年版】おしゃれな湯たんぽ15選。かわいいデザインもおすすめ
NEXT ›
今だけ無料！秋にぴったりな草花がかわいくデザインされたパターン素材 -Autumn Splendour Patterns
Ads
マークアップエンジニア矢次悟郎さんによる、jQueryをはじめとしたWebサイト制作に役立つで技術やサービスの情報発信ブログBlackFlagの記事『JavaScriptで簡単にアニメーションを実装できるライブラリ「anime.js」「TweenMax (GSAP)」「Tween.js」』についてまとめています。
この記事は特にjavascript・アニメーション・jQuery・SEO・Google・Chrome・Firefox・safari・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のBlackFlagで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとBlackFlagの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
