画面遷移

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.

背景色が伸びる（中央から上下）

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の不具合をなおす人

TwitterInstagramYouTubeContact

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