テキストナビゲーション
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.
中心から外に線が伸びる(下部)
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.
次回の予定
掲載内容をコンパクトに収め、情報の全体像や重要度を俯瞰的に見せるタブメニューを作ってみようと思います\\\\٩( ‘ω’ )و ////