CSS Shakeを使うと、いろんなものをプルプルさせることが出来ます。なんかアニメの『日常』っぽいなっておもったので、それっぽく動くようにいじってみた。ChromeとSafariだとちゃんと動いてた。
http://fromatom.github.io/ （※音出ます）
CSShakeのカスタマイズ
回転とかして欲しくなかったし、もう少しプルプル幅も小さくしたかったのでいじった。 elrumordelaluz/csshake · GitHubのREADMEにも書いてあるけど
@include shake($x, $y, $rot, $name, $steps, $opacity);
を書き換えてあげると、ぷるぷるの動き具合が変えられる。今回はslowを使ったので、
@include shake(3px, 3px, 0deg, 'shake-slow', 2);
とした。これ、READMEには_mixins.scssを編集してねって書いてあるけど、実際は_shake.scssに書かれてる（使い方違うのかな？）。書き換えたらコンパイルして、必要なら.min.cssを生成してあげて使うと良い。
HTMLだけど、
<div class="shake shake-slow shake-constant hover-stop"></div>
という風に書ける。こうすると
- slow
- constant
- hover-stop
が同時に効くので、「読み込まれたらずっとスローでプルプル震えてて、マウスオーバーしたら止まる。」という動作になる。
ぼかし
ぼかしをやってくれるもの結構あって、Vague.jsとかspoiler.jsとか使ってみたけど、しっくり来なかった。CSSいじって-webkit-filterにblur()を動的に設定する方針にした。
こういう、時間で変化するパラメータの生成には、sin波をいじって使ってるんだけど、だれか使いやすい方程式情報とかあったら教えて下さい。
