読者です 読者をやめる 読者になる 読者になる

文字っぽいの。

文字を書いています。写真も混ざります。

CSShakeが楽しかったので遊んでみた。

 CSS Shakeを使うと、いろんなものをプルプルさせることが出来ます。なんかアニメの『日常』っぽいなっておもったので、それっぽく動くようにいじってみた。ChromeSafariだとちゃんと動いてた。

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-filterblur()を動的に設定する方針にした。

 こういう、時間で変化するパラメータの生成には、sin波をいじって使ってるんだけど、だれか使いやすい方程式情報とかあったら教えて下さい。

まとめ

 初めてGithub Pages使ったけど、とても便利だった。独自ドメインとか欲しい。