\目次/
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!
画面遷移
おさえておきたいところ
画面遷移を使う目的と使いどころはこんな感じです。
- 目的:ページの遷移を知らせる
- 使いどころ:画面の読み込み後
背景色が伸びる(上から下)
See the Pen
背景色が伸びる(上から下) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
背景色が伸びる(下から上)
See the Pen
背景色が伸びる(下から上) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
背景色が伸びる(右から左)
See the Pen
背景色が伸びる(右から左) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
背景色が伸びる(左から右)
See the Pen
背景色が伸びる(左から右) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
背景色が伸びる(中央から外)
観音開きのように両サイドに開きます。
HTMLでは左右どちらのコードか分かりにくいため、CSSで左右の色を変えてみました。
See the Pen
背景色が伸びる(中央から外) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
背景色が伸びる(中央から上下)
こちらもHTMLでは上下どちらのコードか分かりにくいため、CSSで左右の色を変えてみました。
See the Pen
背景色が伸びる(中央から上下) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
背景色が伸びる(斜め)
ガラスが反射しているような感じにしてみました。
See the Pen
背景色が伸びる(斜め) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
背景色が円形に縮小(中央へ)
See the Pen
背景色が円形に縮小(中央へ) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
背景色が四角に拡大(四隅へ)
See the Pen
背景色が四角に拡大(四隅へ) by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
次回の予定
サイト全体の構成を分かりやすく伝えるグローバルナビゲーションを作ってみようと思います\\\\٩( ‘ω’ )و ////