【JS】物理法則に基づいたアニメーションライブラリ「Dynamics.js」

 
ワンポイントでアニメーションを使いたい時など、シンプルなコードで実装できるJSライブラリ。実用例のコードも用意できるので、自分でアレンジしやすい所も便利。

Dynamics.js

Githubに公開されてますのでファイル一式をダウンロードしてください。

使い方は「dynamics.js」を読み込ませます。

Java File
<script src="dynamics.js"></script>

適用する要素を指定し、アニメーションの設定を行います。

Java
var el = document.getElementById("logo")
dynamics.animate(el, {
  translateX: 350,
  scale: 2,
  opacity: 0.5
}, {
  type: dynamics.spring,
  frequency: 200,
  friction: 200,
  duration: 1500
})
html
<body>
  <div id="logo"></div>
</body>


  • anime.jsを使用したテキストエフェクト集「Moving Letters」
  • 手書き風SVGアニメーションを簡単に実装できる「vivus.js」
  • アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
  • 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
  • 【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」
RELATED POSTS
  • Webサイトのページ表示速度を測定できる無料サービスまとめ
  • CSSで作成する吹き出しとデザインのアイデア
  • 【JS】マウスの動きに合わせて影の角度が変化する「shine.js」
  • 【JS】要素の切り替え時にアニメーションエフェクトを掛けられる「animateTransition.js」
  • 【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」
  • レスポンシブデザインのパターン集「Responsive Patterns」
RECENT POSTS
  • 【2021年版】Google Fontsの使い方とおすすめ日本語フォント
  • 【2021年版】無料で使えるフリー動画素材サイト10選
  • 【2021年版】無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 無料で使えるフリーアイコン素材サイト15選
POPULAR POSTS
  • 【2021年版】無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント63選
  • 【2021年版】Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • Photoshopで簡単に背景を伸ばすテクニック