スクロールを促す
Web
2024年2月5日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回はトップページとかによくある「スクロールを促す、アニメーションする線とか矢印」をいろいろ作ってみたいと思います。
参考:PHOTOPIZZA|【CSS】スクロールを促す華麗なアニメーション20選
参考:SPIQA NOTE|【簡単】CSS でスクロールを促すラインアニメーションを作る方法
線
シンプルな線がオシャレですね。
矢印
こういう図形のことをchevron(シェブロン:山型の紋章)というそうです。ダ〇ソー 仮面ライダーガッ〇ャード
マウス
うーん、イカス!マウスはトラックボール派の私もこれには脱帽せざるを得ない。
環状の文字
前回やりましたね。やっぱり時計回りの方がいいのかなあ。
まとめ
個人的には、クリック(タッチ)でスクロールしてくれたら嬉しくなりますね。
うちのトップページにも実装してみたのですが「画像に重なる部分は白」「白背景に重なる部分は黒」にするいい方法がわかりませんでした(beforeとafterで無理矢理2色に分けてみました)
ブレンドモードとやらを使えばできる・・・のか?