コピペで簡単!メニュー関連のアニメーションCSSスニペット10個

スポンサーリンク

スポンサーリンク

CSS3によるアニメーション・エフェクトを実装することで、webサイトをより魅力的に見せることが可能になります。

今回は、webサイトには必須とも言えるナビゲーションメニュー関連のアニメーションCSSを10個まとめました。

ホバーエフェクトではなくクリックエフェクトなのと同時に、カレント表示もさせるので1ページ構成のwebサイトと相性抜群です。

デモ画面

HTML

メニュー部分のHTML例になります。

基本的には、1行目の「anime-1」の箇所の数字を変更するだけでアニメーションも変更出来るようにしてあります。

外部ファイルの読み込み

今回のアニメーションでは、指定した要素のクラスのチェック→追加→削除を自動的に行ってくれるJavaScriptである、「Classie.js」を使わせて頂きます。

ダウンロードは、以下のGitHub該当ページより行ってください。

GitHub – desandro/classie: class helper functions

ダウンロードした「Classie.js」ファイルを、サーバーにアップロードして読み込ませます。

スクリプト

スクリプトについては、以下の記述を丸々コピペするだけで大丈夫です。

CSS

アニメーション・エフェクトを変更するためのCSSは、デモ画面にてそれぞれのCSSをコピペして頂ければと思います。

まとめ

1ページ構成のwebサイトと相性抜群の、ナビゲーションメニューのアニメーション・エフェクト。

是非ランディングページ等の固定ナビゲーション等にご活用ください。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク