[JS]矩形の要素をゼリーのようにぷるぷるさせる、かわいいスクリプト -Jelly.js

矩形の要素をゼリーのようにぷるぷる、ぷるんぷるんした物理シミュレーションのかわいい動きをCanvasで実装するスクリプトを紹介します。

引っ張っても、弾ませても、気持ちよくぷるぷるします。

デモのキャプチャデモのアニメーション

Jelly.js -GitHub

Jelly.jsのデモ

ぷるぷるの動きは、下記のデモページでお楽しみください。

サイトのキャプチャ

Jelly.js -CodePen

デモの操作方法

  1. マウスをドラッグすると、矩形がぷるぷる動きます。
  2. 「1」を押すと、スローモーションに。
  3. 「2」を押すと、無重力に。
  4. 「3」を押すと、反重力に。

Jelly.jsの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

Step 2: HTML

矩形を配置する場所に、canvas要素を記述するだけです。

sponsors

top of page

©2018 coliss