WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ Widget部分に到達した瞬間に紙吹雪を展開させたい

  • widgetマスター

    モデレータ
    2023年9月15日 11:09

    既に指定部分に到達した瞬間に紙吹雪を展開する仕様になっております!

    プレビュー:

    https://sb-draft-preview.squadbeyond.com/articles/kLOtlRdZLUAZgkN_VxecQ/draft?token=45a995e9a08b1f04b41c6302ac669881

    詳細設定に関してご不明点がありましたら、どうぞお気軽にご質問くださいませ。

  • メガルカリオ

    メンバー
    2023年9月15日 13:09

    お世話になっております。

    当ウィジェット挿入部上下に他ウィジェットや画像等が入っており、紙吹雪のウィジェットは2行程度に縮めているのですが、この際にページを確認するとエフェクトが展開されない次第です。これはウィジェットの長さの問題なのでしょうか。

    ご教示のほど、よろしくお願いいたします。

    • widgetマスター

      モデレータ
      2023年9月15日 13:17

      ご相談ありがとうございます!

      紙吹雪自体が確認できないということでしょうか?

      Widgetの長さは関係なさそうです!

      該当のbeyondページのURLをご共有いただけますか?

      また、どこの箇所で紙吹雪をさせたいのかも一緒にお願いします!

    • メガルカリオ

      メンバー
      2023年9月15日 13:39

      ご返信ありがとうございます。

      左様でございます、紙吹雪自体が出現しておりません。

      https://app.squadbeyond.com/ab_tests/KqfVByDtsznCBfAH-w/articles

      こちらのページの「このページ限定」バナー下部の2行の文言に紙吹雪ウィジェットを利用しております。

      お手数お掛けいたしますが、よろしくお願いいたします。

    • widgetマスター

      モデレータ
      2023年9月15日 15:30

      URLを共有いただきありがとうございます!確認させていただきました!

      紙吹雪の発生地点の指定としてjs-scroll-point というclassが必要になります。そのため、テキストを囲う<div> の<div class=”js-scroll-point”> への変更をお願いします。


          <!-- 以下がHTMLになります
      紙吹雪が現れる位置の要素に、クラスjs-scroll-pointをつけてください -->
      <div class="confetti_explosion">
      <div>
      <div style="text-align: center;">ここまで読んでくれた<strong style="color: rgb(255, 82, 82);">お礼</strong>に、</div>
      <div style="text-align: center;">
      <strong>このページ限定</strong>の</div>
      </div>
      </div>
    • メガルカリオ

      メンバー
      2023年9月15日 17:03

      ありがとうございました!無事解決いたしました!

    • widgetマスター

      モデレータ
      2023年9月15日 17:21

      よかったです!

      またなにかありましたらご相談ください💫