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

  関連記事

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

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

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

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

レスポンシブWebデザインで、selectフォームの高さを調整する

レスポンシブWebデザインに限ったことではないのですが、最近フォーム入力がしやす …

instagramのuser idを取得する方法

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

マークアップにschema.orgを利用してGoogleフレンドリーなページを作成しよう

Googleのリッチスニペットで知られているスキーマを利用して商品詳細ページをマ …

jQuery正規表現を使って金額を抽出するには

ある案件で、動的に価格表記を変更したいとの依頼がありました。 そこで正規表現を使 …

RSS feedのエラーチェック

WordPressのfeedを使ってニュース記事を表示させていたのですが、エラー …

FutureShop2(フューチャーショップ)でフォーム改善するときの注意点

FutureShop2はhttps://~領域のデザインも編集できる優れたASP …

よく使うCSSジェネレーターと参考サイト

よく使うジェネレーターと参考サイトを自分用にまとめました。 ・グラデーションジェ …

[グロースハック 136.7%改善]スマホ版LPでCTRをあげる改善事例

※申し訳ございません、都合上クライアント名・デザイン画像の掲載は控えさせていただ …