webmanab.html

menu

これは素敵。いますぐナビゲーションに使いたい、おしゃれなホバーエフェクトまとめ -『effect』

 

ナビゲーションに適応したい、おしゃれでかっこいいエフェクトサンプルのまとめです。

グローバルナビゲーション

サイトの上部に固定表示したり、あらかじめ隠しておいてハンバーガーアイコンなどをトリガーに、スライドイン表示させるメインのメニューのエフェクトをまとめます。

Inspiration for Line Menu Styles

LineMenuStyles

シンプルで効果的なナビゲーションエフェクトのインスピレーション集。

Inspiration for Line Menu Styles

Creative Link Effects

CreativeLinkEffects1

プロジェクトに取り入れやすそうな、シンプルなラインアクションなどをまとめたスタイル集。

Creative Link Effects

Sidebar Transitions

sidebartransitions

トランジションをうまく使った、アニメーション集。
3d表現のダイナミックなスタイルも用意されている。

Sidebar Transitions

Header Effects

HeaderEffects

ヘッダーナビゲーション固定レイアウト実装の際、スクロール後に縮小などのアニメーションを伴ったスタイル変更のインスピレーション。

Header Effects

Prev / Next

次のポストや前のポストに移動するナビゲーションのまとめです。

Arrow Navigation Styles

ArrowNavigationEffects

矢印をホバーすると、サムネイルやタイトルなどのキャプションが現れるインタラクティブなスタイル集。

ArrowNavigationStyles

バレットナビゲーション

スライダーでよく実装される、アイテムの切り替えや、現在位置を知らせてくれるナビゲーションのまとめです。

Dot Navigation Styles

DotNavigationStyles

よくあるサークル状のバレットスタイルで、遊びのあるアニメーションやツールチップを表示させるスタイルも用意されている。

Dot Navigation Styles

スライダーなどで使用される、バレットナビゲーションのスタイル・エフェクトサンプル

bullet-navigation

実装のコードなどが細やかに開設されており、シンプルでカスタマイズしやすいものがたくさん紹介されている。
サークル状や矩形、三角形のスタイルなど形状も多様。

スライダーなどで使用される、バレットナビゲーションのスタイル・エフェクトサンプル

おわります。

share

tip