スクロールダウン

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

スクロールダウン

おさえておきたいところ

「スクロールダウン」を使う目的はこんな感じです。

             目的：ページのスクロールを促す
動きのきっかけ：画面の読み込み中 / 画面の読み込み後 / スクロール / クリック

縦線が動いてスクロールを促す

See the Pen 縦線が動いてスクロールを促す by Web Navigator (@web-navigator) on CodePen.

丸が動いてスクロールを促す

See the Pen 丸が動いてスクロールを促す by Web Navigator (@web-navigator) on CodePen.

マウスが動いてスクロールを促す

See the Pen マウスが動いてスクロールを促す by Web Navigator (@web-navigator) on CodePen.

矢印が動いてスクロールを促す

See the Pen 矢印が動いてスクロールを促す by Web Navigator (@web-navigator) on CodePen.

スクロールをするとタイムラインの縦線が伸びる

See the Pen スクロールをするとタイムラインの縦線が伸びる by Web Navigator (@web-navigator) on CodePen.

次回の予定

連続する内容をまとめ、項目の全体像を先に伝える
「アコーディオンパネル」を作ってみようと思います＼＼\\٩( ‘ω’ )و //／／

合わせて読みたい

スクロールダウン

WEBさん

WordPressの不具合をなおす人

XInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。