Animate.cssでのクリックアニメーション

プログラム言語CSSJavaScriptフロントエンドUX・UI

nishimura

公開日2021.01.05

更新日2021.04.16

main_img

jQueryを用いてボタンにアニメーションクラス名をデータ属性値（data-animate=”***”）として記述し、
クリックするとそのアニメーション効果を確認することが出来る。
https://designlink.work/ja/animatecss/

＜読み込みファイル＞

//Animate.cssを追加
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
//jQueryを追加 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Animate.cssはクラス名にアニメーション名を追加して使用します。繰り返し再生する際は、クラス名に”infinite”を追加する。

<a href="#" class="animated infinite {animation-class-name}">Example</a>

<!-- bounce: クラス名に"animated bounce"を追加 -->
<a href="#" class="button" data-animate="bounce">bounce</a>

【更新履歴】: 2021.04.16　記事を公開しました。

最新記事: タグマネージャーの設定（随時更新）

2021.11.09 WEB・APPSEO対策

mori; メルマガの開封・クリックをGoogleアナリティクスで測定する方法

2021.10.19 WEB・APPテクニックSEO対策

mori; 横スクロールサイトがかっこいいサイト

2021.10.18 WEB・APPテクニックアイデア

mori

カテゴリー: WEB・APP(94); アニメーション(7); テクニック(44); アイデア(17); SEO対策(11)

タグ: UX・UI デザインバックエンドフロントエンド ECサイトサーバー・ドメイン SNS ツール PHP SEO Webツール note JavaScript GoogleTagManager Git Facebook ショップサーブオウンドメディア CSS SearchConsole VScode Instagram お名前ドットコムカラーミー CMS HTML GoogleAnalytics XD プログラム言語 Twitter heteml EC-CUBE WordPress 操作方法アプリ画像関係 Python VBA データベース MySQL Ruby Shopify

メンバー: kitada(29); mori(23); nakano(7); nishimura(31); hatori(7); watanabe(2); titan-suzuki(0)

月別アーカイブ