スクロールを促すアニメーション

こちらのサイトを参考にスクロールを促すアニメーションをトップページに実装したので、それについて書いていきます。

追加した後のイメージ

このように下スクロールを促すマークが追加されました。

トップページで確認できます。

追加する前のHTML

下スクロールを追加する前のHTMLは以下のようになっていました。

<div class="mv">
  <img class="pc-img" src="<?php echo get_template_directory_uri(); ?>/assets/img/top/mv-pc.png?20220804" alt="PCのメインビジュアル">
  <img class="sp-img" src="<?php echo get_template_directory_uri(); ?>/assets/img/top/mv-sp.png?20220804" alt="スマホのメインビジュアル">
  <a href="<?php echo home_url('#contact'); ?>" class="contact-btn">
    <img class="sp-img" src="<?php echo get_template_directory_uri(); ?>/assets/img/top/contact-btn.png?20220806" alt="お問い合わせボタン">
  </a>
</div>

親要素にmvというクラスを持つdivタグがあります。

STEP1: 下スクロールを促すHTMLを追加する

こちらのHTMLをmvの中に追加します。

<div class="scrolldown1"><span>Scroll</span></div>

すると親divのmvの中に、Scrollという文字が表示されました。

STEP2: CSSでアイコンの調整をする

次にScrollアイコンの調整を行います。

位置調整

親要素のmvには、position: relative;が付いているという前提で、以下のCSSを記述します。

.mv .scrolldown1 {
  position:absolute;
  left:50%;
  bottom:10px;
  height:50px;
}

テキストの調整

Scrollというテキストの色などを調整します。

.mv .scrolldown1 span {
  position: absolute;
  left:-15px;
  top: -15px;
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

線の設定

アニメーションしている線を設定します。

.mv .scrolldown1::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 25px;
  background: #eee;
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
}

@keyframes pathmove {
  0% {
    height: 0;
    top: 10px;
    opacity: 0;
  }
  30% {
    height: 25px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0;
  }
}