このページの本文へ

スクロールで画像がクロスフェードするCrossfade.js

2014年06月26日 12時00分更新

大竹孔明/まぼろし

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

Crossfade.js


 「Crossfade.js」 は、スクロール量に応じて画像をクロスフェードで切り替えるプラグインです。最近流行の「ぼかし」のかかった写真を用意すれば、ページをスクロールすると写真がぼやけていくオシャレなトップページが作れます。

 Crossfade.js は非常に軽量で、非圧縮版でも3.2KBしかありません。また、アニメーション用のJavaScript APIであるwindow.requestAnimationFrame を使って画像を再描画するので、レンダリングが高速です(window.requestAnimationFrame をサポートしていないブラウザーにも対応しています)。

 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、Crossfade.jsをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

GitHubページの画像
GitHubページの画像

 Crossfade.js は、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドでCrossfade.jsがすぐに利用できます。


bower install crossfade.js

 利用するWebページの body の閉じタグ直前で、jQuery本体と「crossfade.jquery.js」を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="crossfade.jquery.js">
</body>
//(中略)

 これで準備はOKです。

step2 基本的な使い方

 実際にプラグインの使い方を説明します。

 crossfade.jquery.js を読み込んだ後、crossfade()メソッドを実行します。crossfade()メソッドは、使用したい要素をセレクターで指定して、.(ドット)繋ぎで指定します。下の例では「crossfade」というclass名を指定しています。

JavaScript


//(中略)
<script src="jquery.min.js"></script>
<script src="crossfade.jquery.js"></script>
<script>
$(function(){
    $('.crossfade').crossfade();
});
</script> 
//(中略)

 HTMLは以下のように指定します。画像を表示する場所にdiv要素を記述し、「crossfade」というclass名を付与します。

HTML


//(中略)
<div class="crossfade"></div>
//(中略)

 Crossfade.jsは「最初に表示させておく画像」「スクロール後に表示させる画像」の2種類の画像が必要です。スクロールに合わせて画像にぼかしをかけたい場合は、「通常の画像」と「ぼかし画像」の2枚が必要になります。

 最初に表示しておきたい通常の画像のパスをカスタムデータ属性「data-crossfade-start」に、スクロールに応じて切り替えるぼかし画像のパスを「data-crossfade-end」に記述します。

HTML


//(中略)
<div class="crossfade" data-crossfade-start="psth/to/image" data-crossfade-end="path/to/image">
</div>
//(中略)

 CSSを指定します。画像を表示する要素には、 position プロパティの「relative」「fixed 」「absolute」のいずれかを指定する必要があります。以下の例では relative を指定しています。

CSS


//(中略)
.crossfade {
    position: relative;
}
//(中略)

 カスタムデータ属性に指定した画像は、 canvasを使って対象要素の領域に描画されます。内包するコンテンツがなく、ただ画像を表示させたい場合は、height プロパティで高さを指定しましょう。

step3 オプションを指定してカスタマイズする

 Crossfade.js にはいくつかオプションが用意されています。オプションは以下のようにcrossfade ({...})内に指定します。

JavaScript


//(中略)
$(function(){
    $('.crossfade').crossfade({
        // ここにオプションを指定する
        threshold: 0.5, // オプション指定の例。
        backgroundPosition: 'center center'
    });
});
//(中略)

 複数のオプションを指定する場合は、,(カンマ)区切りで指定します。

startオプション

 data-crossfade-start の値(通常画像のパス)を指定できます。最初は存在せず、後からDOMに追加する要素などに利用できます。

デフォルトの値:null

endオプション

 start オプションの逆で、data-crossfade-end の値(ぼかし画像のパス)を指定できます。

デフォルトの値:null

 以下の2つはどちらも同じ動きをします。

HTMLで指定


<div class="cover-content crossfade-01" data-crossfade-start="img/exmple-01.jpg" data-crossfade-end="img/exmple-01-blur.jpg">
</div>

JavaScript オプションで指定


$(function () {
$('.crossfade-01').crossfade({
start: "img/exmple-01.jpg",
end: "img/exmple-01-blur.jpg"
});
});

thresholdオプション

 クロスフェードを適用するタイミングを変更するには、thresholdオプションを使います。 値は0〜1の間で指定でき、0に近いほど少しのスクロールで、1に近いほど多くのスクロールで画像が切り替わります。

デフォルトの値:0.5

backgroundPositionオプション

 Crossfade.jsで指定する画像は、背景画像として描画されます。backgroundPositionオプションは、画像の水平・垂直方向の位置(CSSのbackground-position プロパティの値)を指定できます。

デフォルト値:'center center'

 いかがでしたか。個人のポートフォリオサイトから、ランディングページ、最近流行のシングルページまで、幅広いサイトで効果的なエフェクトとして利用できそうですね。


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く