はじめに
今回は過去の実務経験で作成をした、「上下にぷるぷる揺れる」購入を促すボタンのレイアウトとソースコードをご紹介します。
「上下にぷるぷる揺れる」お申し込みボタンのレイアウトとソースコード
「上下にぷるぷる揺れる」購入を促すボタンのレイアウト
「上下にぷるぷる揺れる」購入を促すボタンのソースコード
<div class="btn-center purupuru">
<a href="#" class="btn-link">
<img src="https://kk-works.koukoba.net/wp-content/uploads/2022/09/trial_cta.webp" alt="お得な○%OFF！ 〇〇〇〇円（税込）で試す" width="640" height="196">
</a>
</div>PR
.btn-center {
text-align: center;
}
.btn-link {
display: inline-block;
width: 100%;
max-width: 640px;
}
.purupuru {
animation: purupuru 2s infinite;
}
@keyframes purupuru {
0% {
transform: translate(0px, 2px);
}
5% {
transform: translate(0px, -2px);
}
10% {
transform: translate(0px, 2px);
}
15% {
transform: translate(0px, -2px);
}
20% {
transform: translate(0px, 2px);
}
25% {
transform: translate(0px, -2px);
}
30% {
transform: translate(0px, 2px);
}
35% {
transform: translate(0px, -2px);
}
80% {
transform: translate(0px, 2px);
}
85% {
transform: translate(0px, -2px);
}
90% {
transform: translate(0px, 2px);
}
95% {
transform: translate(0px, -2px);
}
100% {
transform: translate(0px, 2px);
}
}ソースコード解説
上下にぷるぷる揺れるアニメーション
「animation-name」は「purupuru」にしました。
「animation-duration」が「2秒」なので、@keyframesの0%から100%までを2秒で実行します。
「animation-iteration-count」が「infinite」なので無限に繰り返します。
@keyframesでアニメーションの動きを指定しています。基本的に上下2pxの動きを繰り返していますが、35%から80%のところだけ間が空いています。この間でタメを作り、ぷるぷるした動きを表現しています。このぷるぷるした動きでユーザーに注目を喚起し、クリックすることを誘導しています。
下記記事でもLPなどで使用される「キラッと光り、上下に揺れるアニメーション」でボタンを紹介しています。
LPなどで使用されるお申し込みボタンを、キラッと光が右に流れ、上下に揺れるアニメーションで実装をし、レイアウトとソースコードを紹介しています。
「animation」プロパティの指定の仕方を忘れたり、いまいちわからないよ。という方は、下記でanimationプロパティについて記事を書いていますのでご覧ください。
毎回忘れてしまうcssのanimationプロパティの指定の仕方・順番、サブプロパティについて動きを含めて紹介しています。
まとめ
今回は過去の実務経験で作成をした、「上下にぷるぷる揺れる」お申し込みボタンのレイアウトとソースコードをご紹介しました。アニメーションを実装することで、ユーザーに注目を喚起し、クリックなどのアクションに繋がりやすくなるので、ぜひ参考にしていただければと思います。
他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。
