This is standard

KAIZEN PLATFORM社が提供するA/Bテストプラットフォームにてグロースハックを行っているフリーランサーのサイトです。

LPで使えるjQueryアニメーションボタン2

   

ボタンにきらっと光るアニメーションを入れる方法をご紹介します。

デモページはこちら

■仕様
1.キラっと光る画像を用意します。サンプルでは透過.png画像で作成しています。
2.0.5秒でアニメーションが完了し、4秒後に再生します。
3.id=shineをキラっと光る画像につけます。この画像を移動させてきらっと光るを表現しています。

■jQuery

■CSS

■HTML

こちらもご覧下さい。
LPで使えるjQueryアニメーションボタン

 - HTML・CSS・Javascript, Tips

  関連記事

mampで実装したファイルをngrokで公開する

わざわざローカルで実装して、FTPでテストサーバーにアップしてのやり取りって本当 …

【jQuery】画像が404エラーの時、別の画像を表示する方法

クライアントより、動的に一覧ページに複数の画像を掲載したいというご要望がありまし …

instagramのuser idを取得する方法

※2016.09.08追記 こちらのサイトのテキストボックスにuser名を入力す …

Thunderbird 45で返信の本文をデフォルトで本文のテキストに戻す方法

今回はWebのTipsではなく、ThunderbirdのTipsです。 Thum …

slick.jsのiframeバグ対応

楽天GOLDでよくiframeを使いますが、iframe内でslick.jsを使 …

Googleアナリティクスでフィルタをかける

上のグラフはこのサイトのセッション数を表しています。 見てわかるようにまだ全然ア …

MovableTypeでイベントやフェアブログを構築するときに使えるテンプレート

MovableTypeでイベント情報ブログを構築するときに使えるテンプレートをご …

.htaccessの覚書

■メンテナンス画面 [crayon-5b73efab146da418130501 …

CSS3で立体ボタンを作成する

立体デザインボタン 昨今のフラットデザインの流れでボタンと認識できず、CTRが下 …

Kaizen Platformでscroll()イベントを使う時の注意点

追記2017.01.04 公式サイトにナレッジが追加されていました。「要素を固定 …