We Blog Weblog

スクロールを促す

Web

2024年2月5日

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

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

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

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

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

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

矢印

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

マウス

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

環状の文字

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

まとめ

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

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

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP