WEB広告運用の困りごとが集まる場所 › コミュニティ › コミュニティ › アンケートWidgetの中に動くボタンをいれたいです! › 返信先:アンケートWidgetの中に動くボタンをいれたいです!
-
このように修正してみてください👍
●JS Headにコピペするscript 24行目以降に追加
resultBtn.parentNode.classList.add('is-purupuru');
●CSS 110行目以降に追加
.is-purupuru:before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: shiny-brite 3s ease-in-out infinite;
pointer-events: none;
}
@-webkit-keyframes shiny-brite {
0% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-webkit-transform: scale(0) rotate(45deg);
opacity: 0.5;
}
81% {
-webkit-transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-webkit-transform: scale(50) rotate(45deg);
opacity: 0;
}
}
.is-purupuru {
animation: purupuru 2s linear 0s infinite;
overflow: hidden;
text-align: center;
}
@keyframes purupuru {
0% {
transform: skew(9deg);
}
10% {
transform: skew(-8deg);
}
20% {
transform: skew(7deg);
}
30% {
transform: skew(-6deg);
}
40% {
transform: skew(5deg);
}
50% {
transform: skew(-4deg);
}
60% {
transform: skew(3deg);
}
70% {
transform: skew(-2deg);
}
80% {
transform: skew(1deg);
}
90% {
transform: skew(0deg);
}
100% {
transform: skew(0deg);
}
}widgetに登録されてるプルプルボタンのクラスは.purupuru でしたが、JSで効果づけるため.is-purupuru を付与して、付与されたタイミング(全問回答)でプルプルする…というようになっています!
プレビュー:
https://app.squadbeyond.com/ab_tests/pSXuCVUuvf_lYyhpgLcg/articles#SuXhGrNYJvchtq-oJkQ