海外のサイトを見るとリッチなユーザーインターフェースが実装されたものが増えてきているのに気付きます。私もその波に乗っていきたいので、今年は、このブログに対して「UIの強化」を目標にいろいろやっていこうと考えています。
その第一弾として、タイトルの通り「ページ遷移時に指定要素をフェードイン・フェードアウトさせる機能」を実装してみました。詳しく言うとサイト内のページ間を移動する際に、テンプレート部分の表示は残したまま、コンテンツ部分（ブログの記事）のみをフェードアウトさせ、ページ遷移後も同様にコンテンツ部分（ブログの記事）のみをフェードインさせるといった機能です。機能の実装は意外と簡単でjQueryとそのプラグインで実現可能でした。
実装方法について以下にまとめてみました。
リンクのクリック時に指定個所をフェイドアウトさせる
まず、リンクをクリックすると指定個所がフェイドアウトする機能から説明します。この機能の実装にはjQueryとjquery.pageswitch.jsというjQueryプラグインを使いました。（ちなみにこのプラグインを使うと、スライドしながらページ遷移させることなどもできるようです。）
jquery.pageswitch.jsを使ったフェードアウト機能の実装方法
jQuery.jsファイルと、jquery.pageswitch.jsファイルを読み込むように設定し、あとはJavaScript内で以下のように対象のセレクターに「pageswitch()」メソッドを指定するだけです。HTML側は特にいじる必要はありません。
$("対象のセレクター").pageswitch();
以下のように細かくオプションを指定することも可能です。
$("対象のセレクター").pageswitch({
url:遷移先URL //デフォルトはクリックしたhref内のデータ
event:トリガーとなるイベント //click,mouseover,mouseenter,mouseleave…
target:アニメーションの対象となるセレクター //複数可
properties:{アニメーションのプロパティ} //{opacity:0}など
options:{アニメーションのオプション} //{duration:750}など
});＜参考サイト＞
当ブログでの実装例
今回の実装においては、
- 「target=”_blank”」を指定していない「a要素」を全て対象とし、
- フェードアウトさせる箇所を「#content」内とし、
- フェードアウトの時間を0.5秒としたので、
以下のように指定しました。
$(document).ready(function(){
$("a:not([target='_blank'])").pageswitch({
target:"#content",
options:{duration:500}
});
});jquery.pageswitch.jsを使う上での注意点
なお、jquery.pageswitch.jsを使う際に注意すべき点として、フェードアウト機能の対象としたリンクの履歴が残らなくなり、ブラウザーの「戻る」ボタンで前のページに戻ることができなくなります。私としては、ブラウザーの「戻る」ボタンで戻れないということは、ユーザビリティー的にあまり好ましくないという考えなので、jquery.pageswitch.jsファイル内の一文を以下のように修正しました。
options.options.complete=function(){window.location.replace(target)};
options.options.complete=function(){window.location.assign(target)};
また、上記の他に、コントロール（Ctrl）ボタンを押しながら対象のリンクをクリックした際に、別タブでページを開けなくなります（右クリックで「リンクを新しいタブで開く」についてはOK）。これについては、そのままにしています。
リンクのクリック時に指定個所をフェイドアウトさせる機能の実装方法についての説明は以上となります。
ページを開いた際に、指定個所をフェードインさせる
次にページ遷移後に、ページが表示される際にフェードインさせる方法について説明します。この機能はjQueryのfadeIn()メソッドを使うことで実装可能です。
fadeIn()メソッドを使ったフェードイン機能の実装方法
まずfadeIn()メソッドを使うには、フェードインの対象とする要素を非表示にしておく必要があります。CSSで以下のように設定してもよいと思います。
対象のセレクター{
display:none;
}
ただ、この方法だとブラウザの設定でJavaScriptがオフになっていた場合、コンテンツの表示に支障をきたすので、JavaScriptを使って以下のように対象とする要素を非表示にするようにします。
$("head").append("
<style>
対象のセレクター{display:none;}
</style>
");ページ全体の読み込みが終わったら、以下のようにfadeIn()メソッドを使って、この非表示の部分をフェードインして表示させるようにします。
$(document).ready(function(){
$(function(){
$("対象のセレクター").fadeIn();
});
});当ブログでの実装例
当ブログでは、#content部分を非表示にした際に、#contentの外側の#content-borderの高さを維持しておきたかったので、フェードインの対象となる要素を非表示にするスクリプトに以下の一文を追加しました。
$("head").append("
<style>
#content{display:none;}
/* ↓以下の一文を追加↓ */
#content-border{height:" + $(window).height() + "px}
</style>
");ただ、上記のように高さを絶対指定してしまうと、#contentがフェードインして表示された際に、#contentの高さに合わせて#content-borderの高さが変動しなくなるため、以下の一文を追加して、#contentがフェードインされる際に#content-borderの高さの指定を解除するようにしました。
$(function(){
$("#content").fadeIn(500);
//↓以下の一文を追加↓
$("#content-border").css("height","auto");
});ページを開いた際に、指定個所をフェードインさせる機能の実装方法についての説明は以上となります。
最後に上記をまとめると以下のようなソースコードとなります。
// <head>要素に追加
$("head").append("
<style>
/* #contentを非表示 */
#content{display:none;}
/* #content-borderの高さをウィンドウの高さに指定 */
#content-border{height:" + $(window).height() + "px}
</style>
");
// ページが読み込まれたら処理を実行
$(document).ready(function(){
// ページを開いた際に、指定個所をフェードインさせる
$(function(){
// フェードインの時間を0.5秒に指定
$("#content").fadeIn(500);
// #content-borderの高さ指定を解除
$("#content-border").css("height","auto");
});
// 「target="_blak"」の指定のないリンクのクリック時に
// 指定個所をフェイドアウトさせる
$("a:not([target='_blank'])").pageswitch({
// フェードアウトさせる要素を#contentに指定
target:"#content",
// フェードアウトの時間を0.5秒に指定
options:{duration:500}
});
});今回はjquery.pageswitch.jsというjQueryのプラグインに頼ってしまいましたが、以上のような感じで、フェードイン・フェードアウト機能を実装することができました。検証は軽くしか行っていないので、古いブラウザーでもちゃんと動くかは今のところわかっていません…。この機能がどのようなものかは、トップページやサイドバーの記事のリンクをクリックしていただければ確認できると思います。もしくは以下をクリックしてみてください。何かあればご意見いただければと思います。
最初にも書きましたが、今年はUIの強化に力を入れたいと考えています。次はサイドバーあたりをやってみようかなと思っていますが、いずれにせよまた新たな機能を追加しましたらこちらのブログにて紹介したいと思います。
コメント一覧
トラックバックURL