【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」
  • 【JS】要素の切り替え時にアニメーションエフェクトを掛けられる「animateTransition.js」
  • 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
  • 手描きのアニメーションGIFを簡単に作成できる「Brush Ninja」
  • アニメーションで変化するカスタムカーソル「Custom Cursor Effects」
RELATED POSTS
  • 【jQuery】背景画像のスライドショーを実装する「Vegas2」
  • 画像に3Dブラーのホバーエフェクトを掛けられる「tiltfx.js」
  • 【jQuery】テキストカラーをシャッフルさせるjQueryプラグイン「JUMBLE」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • 【jQuery】エフェクトが魅力的なスライダー「jQuery Hero Slider Plugin」
  • レスポンシブデザインのパターン集「Responsive Patterns」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】