[JS]矩形の要素をゼリーのようにぷるぷるさせる、かわいいスクリプト -Jelly.js
Post on:2018年1月22日
sponsors
矩形の要素をゼリーのようにぷるぷる、ぷるんぷるんした物理シミュレーションのかわいい動きをCanvasで実装するスクリプトを紹介します。
引っ張っても、弾ませても、気持ちよくぷるぷるします。
Jelly.jsのデモ
ぷるぷるの動きは、下記のデモページでお楽しみください。
デモの操作方法
- マウスをドラッグすると、矩形がぷるぷる動きます。
- 「1」を押すと、スローモーションに。
- 「2」を押すと、無重力に。
- 「3」を押すと、反重力に。
Jelly.jsの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 |
<head> ... <script src="./jelly.js"></script> <link rel="stylesheet" href="./style.css" /> </head> |
Step 2: HTML
矩形を配置する場所に、canvas要素を記述するだけです。
|
1 |
<canvas></canvas> |
sponsors
