スクロールダウン – 004

プレビュー

別タブで表示する

コードの紹介

html

<div class="cScrollDown">
  <span class="cScrollDown__text"> Scroll</span>
  <span class="cScrollDown__line"></span>
</div>

CSS

.cScrollDown {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cScrollDown__text {
  font-size: 12px;
  font-weight: 400;
}
.cScrollDown__line {
  display: inline-block;
  width: 3px;
  height: 60px;

  position: relative;
  overflow: hidden;
}
.cScrollDown__line::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;
}
.cScrollDown__line::after {
  background: #000;
  height: 100%;
  animation: scroll 2s infinite;
}

@keyframes scroll {
  0% {
    transform: scaleY(0);
    transform-origin: 0 0;
  }

  50% {
    transform: scaleY(1);
    transform-origin: 0 0;
  }

  50.1% {
    transform: scaleY(1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scaleY(0);
    transform-origin: 0 100%;
  }
}