sinとcos
stylusではビルドイン関数が用意されている。
そのなかで、これ使い所ある？みたいなものもありますね💩
その代表がsin(),cos()じゃないでしょうか。
sin(),cos()って聞くと波が思いつくので、波の形を作りたい時に使えそうです。
というわけでやってみます！
Let's Try!
今回はちょっとコードが長くなるのでhtmlはpugを使います。
上のボタンを押してもらうとうんちたちが波の形に動きます💩
ボタンを押した時クラスを付けたかったので、そこはjsも書きました。
普通に書くとめんどくさいのでvueでサクッと書いてます。
See the Pen sin by petapetapeta (@petapetapeta) on CodePen.
ポイント
pug
pug(html)ではいっぱい同じような要素を作り、連番のクラスを振ります。
ここはvueでループさせてクラス振るように組んでも良かったですが、今回はpugのループで組みました。
stylus
こちらもループを使い、連番のクラスのpositionを計算して波の形にします。
横軸（left）は単純にループの数値にXpx掛ける。
縦軸（top）はループの数値とsinやcos使って-1~1の数値を計算しそこにオフセットを掛けたり足したりするとOKです。
vue
ulについたクラスによって、波の形を変えたいので、ここをバインドにして
buttonに@clickを入れてクラスを変更するようにします。
めちゃ簡単ですね💩