Scroll設定　矢印が下向きに流れる設定 HTML・CSS・animationで設定する方法でコード書いてみた。【サンプルコードあり】

よく見るページのトップ画像にある、下にスクロール
する画像の設定を、HTML・CSSで設定してみた。

下向き矢印が下にスクロールする設定です。

background-imageで画像を設定して
スクロール矢印の動きは、animation
で動きをつけてます。

参考になると幸いです

実際に書いたコード
フリーランス案件
YouTube動画はこちら

実際に書いたコード

HTML

<body>
  <section class="top-mv">
    <div class="top-image">
      <a href="#about" class="scroll">
        <p>scroll</p>
        <div class="scroll-button">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
    </div>
  </section>
  <section id="about">
    <h2>ここがABOUTセクションです。</h2>
    <img src="./imgs/a_2.jpg" alt="">
  </section>
</body>

<body>

<p>scroll</p>

</div>

</a>

</div>

</section>

<h2>ここがABOUTセクションです。</h2>

</section>

</body>

CSS

@charset "utf-8";


.top-mv{
  padding: 0 0;
}

.top-image{
	width: 100%;
	height: 100vh;
	background-image: url(./imgs/a_4.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.scroll p{
    color: #fff;
    font-size: 1.5rem;
    position: absolute;
    top: 69%;
    left: 90%;
    transform: translateX(-50%);
}

.scroll-button{
  position: absolute;
  top: 80%;
  left: 90%;
}

.scroll-button span {
    display: block;
    width: 25px;
    height: 25px;
    border-bottom: 1.5px solid #fff;
    border-right: 1.5px solid #fff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.scroll-button span:nth-child(2){
    animation-delay: -0.2s;
}
.scroll-button span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate{
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}

@charset "utf-8";

.top-mv{

padding: 0 0;

}

.top-image{

width: 100%;

height: 100vh;

background-image: url(./imgs/a_4.jpg);

background-repeat: no-repeat;

background-position: center;

background-size: cover;

}

.scroll p{

color: #fff;

font-size: 1.5rem;

position: absolute;

top: 69%;

left: 90%;

transform: translateX(-50%);

}

.scroll-button{

position: absolute;

top: 80%;

left: 90%;

}

.scroll-button span {

display: block;

width: 25px;

height: 25px;

border-bottom: 1.5px solid #fff;

border-right: 1.5px solid #fff;

transform: rotate(45deg);

margin: -10px;

animation: animate 2s infinite;

}

.scroll-button span:nth-child(2){

animation-delay: -0.2s;

}

.scroll-button span:nth-child(3){

animation-delay: -0.4s;

}

@keyframes animate{

0%{

opacity: 0;

transform: rotate(45deg) translate(-20px, -20px);

}

50%{

opacity: 1;

}

100%{

opacity: 0;

transform: rotate(45deg) translate(20px, 20px);

}

こんな感じのコードで作成してみました。

border-bottom: 1.5px solid #fff;
transform: rotate(45deg);
で下向きの矢印が出来てます。

フリーランス案件

フリーランスにもIT技術にも詳しいコンサルタントだから安心！【ポテパンフリーランス】

フリーランスコンサルタント・エンジニア伴走型マッチングサービス【RIRIKU】

YouTube動画はこちら