animate.cssをランダムに入れて遊ぶ

今回は完全な自分用メモ。
現在の本業で使おうかと思ってやってみた事のメモです。

広告

クリックアクションでランダムなアニメーション

今回やりたかったのは、クリックアニメーションのランダム化。

サイト構築の度に、なんらかしらのクリック発動アニメーションを入れるようにしてるのですが、どうせなら全部入れで良くね??
と思ったワケ。

オリジナルのアニメーション1個よりも、公開されているanimate.cssを使って色々あったほうが閲覧者にとっては楽しいのでは? と。

で実装。

まずはcdnでcssの読み込み。

<link rel="stylesheet" id="animate_css-css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css">

あとはjavascriptで配列の中にclassを入れて、ランダムにしてやれば良い。

メインサイトには実装してみたので、興味があればどうぞ。
https://www.u-hg.com/

全部じゃないですが、主要の画像リンクはクリックで動く。
動きの種類はanimate.cssで用意されてる範囲だけど、20パターン位あると思う。

ではでは。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です