画面遷移
WEB先案内
WEB先案内 ITブログ
テキストナビゲーション
WEB先案内
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を押して動きを確かめてね！↑
左から右に線が伸びて背景になる
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を押して動きを確かめてね！↑
中心から外に線が伸びる（中央）
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を押して動きを確かめてね！↑
左から右に線が伸びる（下部）
See the Pen
左から右に線が伸びる（下部） by Web Navigator (@web-navigator)
on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
次回の予定
掲載内容をコンパクトに収め、情報の全体像や重要度を俯瞰的に見せるタブメニューを作ってみようと思います＼＼\\٩( ‘ω’ )و //／／
ABOUT ME
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？
WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。
