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

WordPressテーマ「CUBEY (tcd023)」
WordPressテーマ「Precious (tcd019)」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQueryプラグインの読み込み

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.fademover.js"></script>
<script>
$(function(){
	$('body').fadeMover();
});
</script>

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

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

オプション

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

▼初期値

<script>
$(function(){
	$('body').fadeMover();
});
</script>

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

<script>
$(document).ready(function() {
    $("body").fadeMover({
            'effectType': 1,
            // → 1:フェードイン&&フェードアウト 2:フェードインのみ 3:フェードアウトのみ
            'inSpeed': 800,
            // → フェードインのスピードをミリ秒で指定します。
            'outSpeed': 800,
            // → フェードアウトのスピードをミリ秒で指定します。
            'inDelay' : '0',
            // → フェードイン遅延スピードをミリ秒で指定します。
            //   複数要素がある場合順番にフェードインしていきます。「0」を指定すると遅延なくフェードインします。
            'outDelay' : '0',
            // → フェードアウト遅延スピードをミリ秒で指定します。
            //   複数要素がある場合順番にフェードアウトしていきます。「0」を指定すると遅延なくフェードアウトします。
            'nofadeOut' : 'nonmover'
            // → <a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。
            //   それ以外の<a>タグでフェードアウト動作させたくない場合のclass名を指定します。
            //   <a href="○○○.html" class="nonmover">とclass指定した<a>タグはフェードアウト動作禁止になります。
            //   これはajax等でコンテンツを書き換える場合、利用するかも?と思ってつけている機能です。

    });
});
</script>

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

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

WordPressテーマ「BLOC(tcd035)」
WordPressテーマ「SOURCE(TCD045)」

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

architecture-1868502_1280

CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...

MORE

cup-2884023_1280

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

MORE

season-1985856_1280

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

laptop-computer-1245981_1280

コピペで使えるCSSデザイン枠テンプレート

どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...

MORE

home-office-569153_1280

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

food-2940553_1280

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

MORE

computer-1185626_1280

CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...

MORE

background-2846221_1280

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

desktop-2325627_1280

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

MORE

background-2850091_1280

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

flower