ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。

今回新たに作成しているサイトがすんごくシンプルなので、
ちょっとおしゃれにしてみたくて思い立ちました。
動作デモということでそのサイトはこちらから。

JavaScriptを使用しますが、既に配布してくださっているサイトがありましたので
とっても簡単に実装できますヽ(;▽;)ノ

このページではWordPressユーザーさん向けに実装方法を一から書いています。

テーマを編集するのでできれば子テーマの導入も検討してみてくださいね。
WordPressをカスタマイズする前に子テーマを作っておく

jQueryプラグインをダウンロードする

まずは以下のサイトからjQueryプラグインをダウンロードします。
jquery.fadeMover

ページの下部にダウンロードリンクがありますのでそちらをクリックしてください。

表示されたコードをコピーしてからエディタに貼り付けて、
「jquery.fademover.js」という名前で保存しましょう。

エディタがメモ帳(Windows)しかない方は サクラエディタ とかを使ってくださいねー。

ファイルをアップロードする

FTPソフトを使って保存したファイルをテーマ内にアップロードします。

アップロード先は以下です。

/ドメイン名/wp-content/themes/使用中のテーマ名/js

「js」っていうフォルダがなければテーマフォルダ直下にサクッと作っておきましょう!

jQueryプラグインの読み込み

「ダッシュボード」→「テーマ」→「テーマ編集」から、「header.php」を開きます。

</head>タグの手前あたりに以下のコードを記述します。

更新して作業終わり!かんたーん!

ハイライト部分はオプションで書き替え可能です。下記で詳しく!

オプション

上記のコードを書き替えて動作をカスタマイズすることができます。

▼初期値

▼オプション適用(配布サイトより引用)

そのまんまでも十分いい感じですがお好みで調整してください(*^^*)

フェード効果を適用するだけでサイトのクオリティーがグッと上がる気がしますね!
ブランディング用のオフィシャルサイトなんかにいいかもです。

  • このエントリーをはてなブックマークに追加

こんな記事も書きました!