• widgetマスター

    モデレータ
    2023年10月18日 16:16

    このように修正してみてください👍

    ●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