【CSS】scrollを促すアニメーションの作り方

今回はWEBサイトのファーストビューでよく見られるscrollを促すアニメーションの作り方を紹介します。

コピペできるので、是非真似してコーディングしてみてください!

【CSS】scrollを促すアニメーションの作り方

完成形はこちら。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

scrollを促すアニメーションがあることで、ユーザーに下へスクロールできることを伝えることができます。

それでは早速作っていきましょう!

HTML

CSS

 

 

 

◎2行目〜7行目

背景画像を高さ100vhにして、背景画像をつけます。

◎9行目〜17行目

scroll要素に対して「position: absolute;」を指定して絶対配置にします。

◎18行目〜26行目

aタグをインラインブロック要素にします。

そして「writingmode: verticallr;」でscrollの文字を縦にします。

◎27行目〜40行目

擬似要素でアニメーションの線を実装していきます。

そしてanimationプロパティでscrollといった名前のアニメーションを指定します。

scrollのアニメーションは後で作成していきます。

◎43行目〜60行目

scrollといった名前のアニメーションを作成しました。

0%・50%・50.1%・100%の時の挙動をCSSで細かく指定していきます。

まとめ

以上が、scrollを促すアニメーションの作り方でした。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事