<aside> <img src="/icons/list_gray.svg" alt="/icons/list_gray.svg" width="40px" /> 目次

</aside>

LPcatsでは、HTML記述により各ステップをカスタマイズできます。

よくLPで使用される記述のサンプルをご紹介いたします。ステップ作成の参考にご利用ください。

タップでムービー再生

タップによりムービーが再生される仕様です。

demo

https://lpcats.com/demo/click_movie.html

ステップのHTML記述

<style>
  #triggerImage {
      max-width: 100%;
      height: auto;
      cursor: pointer;
  }
  .popup {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.8);
  }
  .popup-content {
      position: relative;
      background-color: #fefefe;
      margin: 10% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 90%;
      max-width: 800px;
      box-sizing: border-box;
  }
  .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
  }
  .close:hover,
  .close:focus {
      color: black;
      text-decoration: none;
  }
  .video-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 アスペクト比 */
      height: 0;
      overflow: hidden;
  }
  .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

.image-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      flex-direction:column;
      gap:16px;
  }
</style>

<div class="image-container">
<p>↓をクリックすると動画が流れます</p>
<img id="triggerImage" src="<https://lpcats.com/assets/img/animation/logo.svg>" alt="クリックして動画を再生">
</div>

<div id="videoPopup" class="popup">
  <div class="popup-content">
      <span class="close">&times;</span>
      <div class="video-container">
          <iframe id="videoFrame" frameborder="0" allowfullscreen></iframe>
      </div>
  </div>
</div>

<script>
  const triggerImage = document.getElementById('triggerImage');
  const videoPopup = document.getElementById('videoPopup');
  const closeBtn = document.querySelector('.close');
  const videoFrame = document.getElementById('videoFrame');

  triggerImage.onclick = function() {
      videoPopup.style.display = "block";
      videoFrame.src = "<https://www.youtube.com/embed/vQrNSCZuPjI?autoplay=1&mute=1>";
  }

  closeBtn.onclick = function() {
      closePopup();
  }

  window.onclick = function(event) {
      if (event.target == videoPopup) {
          closePopup();
      }
  }

  function closePopup() {
      videoPopup.style.display = "none";
      videoFrame.src = "";
  }
</script>

アコーディオン

タップによりアコーディオンが開く仕様です。

demo

https://lpcats.com/demo/accordion.html