皆様こんにちは。開発部・アニマル部署統括のPです。
今日はCSS animationを使用して魅力的なスクロールダウンボタンを実装する方法をご紹介します。
◎ そもそもスクロールダウンボタンとは？
下へのスクロールを促すボタンのことです。
メインビジュアル部分に付けることが多く、画面の高さいっぱいにメインビジュアルがある場合に
「この下にもコンテンツがありますよ」と教えるためによくこのボタンを付けますね。
下矢印（）などをアニメーションさせたりするのが一般的ですが、今回はちょっとおしゃれなやつを。
こんな感じ。
イルミネーションでこういうのありますよね(笑)
では早速実装してみましょう。まずはHTMLから。
|
1 2 3 4 5 6 |
<div class="scroll"> <a href="#">Scroll</a> <div class="line"> <span></span> </div> </div> |
.lineは線の部分です。
続いてCSS。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
.scroll a { display: block; height: 6em; text-align: right; padding-bottom: 5px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; color:black; } .scroll .line { display: block; height: 100px; width: 1px; margin-left: 5px; position: relative; overflow: hidden; background-color: #fff; } .scroll .line span { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 3px; background: -webkit-gradient(linear,left bottom,left top,from(#fff),color-stop(#999),to(#fff)); background: linear-gradient(0deg,#fff,#999,#fff); -webkit-animation: drop 1.5s cubic-bezier(.5,.05,.6,.15) infinite; animation: drop 1.5s cubic-bezier(.5,.05,.6,.15) infinite; z-index: 1; } @-webkit-keyframes drop { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%) } to { -webkit-transform: translateY(100%); transform: translateY(100%) } } @keyframes drop { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%) } to { -webkit-transform: translateY(100%); transform: translateY(100%) } } |
writing-modeでテキスト部分は縦書きにしています。
線部分はanimationプロパティで線を動かすアニメーションdropを設定。infiniteでループさせています。
落ちるスピードはお好みで調整してみてください。
【注意】IE11では動きません！
クリスマスシーズンですが、今年はどこにも出かけられそうにありませんね。皆様体調を崩さないようにご自愛くださいませ。
ではでは～(*_*)
タグ：css,html
2020.12.07