• コミュニティ

  アンケートWidgetの中に動くボタンをいれたいです！

  トピックス by widget初心者 1792 pt  2023年10月18日 16:09 143 PV

  【相談内容】

  アンケート全問回答後に有効になるボタンの画像に動きを付けたいです。
  現在設定しているウェジット内に「ぷるぷるしながら光る画像ボタン」のHTMLをコピペすると、アンケート未回答でもボタンが有効になってしまいます。
  回答後にボタンが有効になる条件は変えずに、画像ボタンを動かすにはどのように設定すればよいでしょうか？

  ボタン-1.png 60 KB 画像ファイル — クリックして 見る

  • コピーダウンロードリンク

  

  widgetマスター   6 月, 3 数週間前 2 人 · 1 コメント

  • widget
  • ボタン
• 1 コメント

• 

  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

Log In to Reply