CSSで実装する次のコンテンツへと促すスクロールダウンのラインアニメーション

CSSで実装する次のコンテンツへと促すスクロールダウンのラインアニメーション

ファーストビューで大きめのイメージやムービーなどを配置しているサイトでよく見る、次セクションへスクロールするよう促すラインアニメーションをCSSで表現したサンプルです。
以前にもスクロールを促す要素として矢印・サークル・マウスなどをCSSで表現する実装コードを紹介しましたが、最近はこのタイプの実装要望が多いので自分用に一覧化したものをシェアします。

基本同じような動きでこれといってユニークな動きもないですが、汎用的に使えそうなもの7タイプです。
見栄えも動きもすべてCSSで表現しているため、カラー・サイズ・スピードなど自分好みにいろいろと変更するのも容易だと思います。

共通のHTML・CSS

以下で紹介している内容は、すべて下記のようなHTMLを使用しています。

HTML

<a href="#">Scroll</a>

CSSはa要素とその擬似要素への共通スタイルとして下記を記述しています。
a要素にいろいろとスタイル指定はしてありますが、colorからwriting-modeまでは基本的に見栄え調整用の記述になるので、これらは任意の見栄えに合わせて変更してください。
また、位置調整に関するスタイルについてもデモページのように右下に表示するための記述となるので、それらも表示したい箇所に合わせて任意で変更してください。

CSS

a {
  display: inline-block;
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 110px;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
}
a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #fff;
}

また、ここでは動きの紹介にアニメーションGIFを使用しているので、実際の動きや表示は以下デモページで確認できます。
デモはCodePenを使用しているためPCでの閲覧推奨です。

タイプ1

タイプ1

ラインが下に向かって伸び、その後下に向かってラインが縮むタイプです。
実装には擬似要素の共通スタイルへアニメーション指定を追記する形で下記を記述します。

CSS

a::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

タイプ2

タイプ2

こちらは基本の見栄えや動きはタイプ1と同様ですが、@keyframesのパーセント値を調整することで次アニメーションを実行するまでに少し間隔をあけたものになります。
実装には擬似要素の共通スタイルへアニメーション指定を追記する形で下記を記述します。

CSS

a::after {
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  35% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  35.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  70%, 100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

タイプ3

タイプ3

同じく基本の見栄えや動きはタイプ1と同様で、こちらはラインが見えている状態を長くしたものになります。
タイプ2でもそうだったように、基本スタイルは一緒でもanimation-delayの値や@keyframesのパーセント値を変えるだけでこのような違いを出すことが可能です。
実装には擬似要素の共通スタイルへアニメーション指定を追記する形で下記を記述します。

CSS

a::after {
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

タイプ4

タイプ4

ラインが下に向かって伸びた後はフェードアウトするタイプです。
実装には擬似要素の共通スタイルへアニメーション指定を追記する形で下記を記述します。

CSS

a::after {
  animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    opacity: 1;
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  30.1%, 70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    opacity: 0;
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

タイプ5

タイプ5

短めのラインが上から下へと流れていくタイプです。
実装には擬似要素の共通スタイルへアニメーション指定を追記するのに加え、短めのラインにするために擬似要素の高さを変更する形で下記を記述します。
ラインの長さを変更する場合は、@keyframes内にあるtransform: translateY()の値も併せて調整する必要があります。

CSS

a::after {
  height: 30px;
  animation: sdl 1.5s ease infinite;
}
@keyframes sdl {
  0% {
    transform: translateY(-70px);
  }
  50%, 100% {
    transform: translateY(30px);
  }
}

タイプ6

タイプ6

こちらはアニメーションするラインの見栄えや動きはタイプ1と同様ですが、そこへラインが通る部分をうっすらと示した装飾を加えたものになります。
実装には擬似要素の共通スタイルへアニメーション指定を追記しつつ、a要素に新たな擬似要素を追加する形で下記を記述します。

CSS

a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: rgba(255, 255, 255, .4);
}
a::after {
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

タイプ7

タイプ7

同じくラインが通る部分を示した装飾を加えたもので、アニメーションするラインはタイプ5と同様です。
実装には擬似要素の共通スタイルへのアニメーション指定追記とラインの高さ変更に加え、a要素に新たな擬似要素を追加する形で下記を記述します。

CSS

a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: rgba(255, 255, 255, .4);
}
a::after {
  height: 30px;
  animation: sdl 1.5s ease infinite;
}
@keyframes sdl {
  0% {
    transform: translateY(-70px);
  }
  50%, 100% {
    transform: translateY(30px);
  }
}

Posted on

Category : Tips

Close the search window,
please press close button or esc key.