今回は完全な自分用メモ。
現在の本業で使おうかと思ってやってみた事のメモです。
広告
クリックアクションでランダムなアニメーション
今回やりたかったのは、クリックアニメーションのランダム化。
サイト構築の度に、なんらかしらのクリック発動アニメーションを入れるようにしてるのですが、どうせなら全部入れで良くね？？
と思ったワケ。
オリジナルのアニメーション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パターン位あると思う。
ではでは。
おすすめのコンテンツ
広告