スクロールダウン

説明

縦線が動いてスクロールを促します。

手順

手順1

HTMLの要素を用意します

スクロールダウンのコンテナ要素、テキスト、ライン要素を作ります。

<div class="scroll">
 <span class="scroll-text">Scroll</span>
 <span class="scroll-line"></span>
</div>

手順2

CSSでライン要素に同じwidth、heightの擬似要素を追加し、position:absoluteで同じ位置に重ねます。

.scroll-line {
    width: 2px;
    height: 80px;
    background-color: yellow;
    
    &::after {
      content: "";
       // ライン要素の同じ位置に重ねる
      position: absolute;
　　　　　　　// ライン要素と同じwidth, height
      width: 2px;
      height: 80px;
      background-color: #000;
    }
  }

手順3

ライン要素にoverflow:hiddenを追加し、@keyframeアニメーションで擬似要素の位置を動かすことで実現します。

.scroll-line {
  width: 2px;
  height: 80px;
  background-color: yellow;
  overflow: hidden; //　はみ出した部分が見えないように
  
  &::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 80px;
    background-color: #000;
    animation: scrolldown 1.4s ease-in-out infinite;
    
    @keyframes scrolldown {
      0% {
        transform: translateY(-100%); //要素自身の高さの分、上に移動
      }
      
      100% {
        transform: translateY(100%);　//要素自身の高さの分、下に移動
      }
    }
  }
}

サンプル

参考

• 縦線が動いてスクロールを促す | 動くWebデザインアイディア帳