Blog

[CSS]CSSのみで実装する魅力的なスクロールダウンボタン

皆様こんにちは。開発部・アニマル部署統括のPです。
今日はCSS animationを使用して魅力的なスクロールダウンボタンを実装する方法をご紹介します。

◎ そもそもスクロールダウンボタンとは?

下へのスクロールを促すボタンのことです。
メインビジュアル部分に付けることが多く、画面の高さいっぱいにメインビジュアルがある場合に
「この下にもコンテンツがありますよ」と教えるためによくこのボタンを付けますね。

下矢印()などをアニメーションさせたりするのが一般的ですが、今回はちょっとおしゃれなやつを。
こんな感じ。

イルミネーションでこういうのありますよね(笑)
では早速実装してみましょう。まずはHTMLから。

.lineは線の部分です。

続いてCSS。

writing-modeでテキスト部分は縦書きにしています。
線部分はanimationプロパティで線を動かすアニメーションdropを設定。infiniteでループさせています。
落ちるスピードはお好みで調整してみてください。
【注意】IE11では動きません!

クリスマスシーズンですが、今年はどこにも出かけられそうにありませんね。皆様体調を崩さないようにご自愛くださいませ。
ではでは~(*_*)

タグ:css,html

2020.12.07