スクロールを促す

2024年2月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はトップページとかによくある「スクロールを促す、アニメーションする線とか矢印」をいろいろ作ってみたいと思います。

参考：PHOTOPIZZA｜【CSS】スクロールを促す華麗なアニメーション20選

参考：SPIQA NOTE｜【簡単】CSS でスクロールを促すラインアニメーションを作る方法

線

シンプルな線がオシャレですね。

矢印

こういう図形のことをchevron（シェブロン：山型の紋章）というそうです。ダ〇ソー 仮面ライダーガッ〇ャード

マウス

うーん、イカス！マウスはトラックボール派の私もこれには脱帽せざるを得ない。

環状の文字

前回やりましたね。やっぱり時計回りの方がいいのかなあ。

まとめ

個人的には、クリック（タッチ）でスクロールしてくれたら嬉しくなりますね。

うちのトップページにも実装してみたのですが「画像に重なる部分は白」「白背景に重なる部分は黒」にするいい方法がわかりませんでした（beforeとafterで無理矢理2色に分けてみました）

ブレンドモードとやらを使えばできる・・・のか？