pic-01

【jQuery】画像をフェードしながらスクロールさせるcrossfade.jsプラグイン

2015.03.09   1073


画面のスクロールに合わせて任意の画像へフェードアウトさせるcrossfade.jsプラグインの使い方の紹介です。2枚の画像を組み合わせれば色々と面白いことが出来そうですね。画像を用意すればすぐに実装可能で簡単にオシャレなLPやWEBサービス紹介ページが出来ちゃいます。

百聞は一見にしかず。まずはデモを見てみてください。

crossfade.jsプラグインのオススメ/ポイント

  •   スクロールに合わせて画像を次の任意の画像にフェードアウトさせることが出来る
  •   逆にスクロールしてもフェードアウトする
  •   スマホにも対応

crossfade.jsプラグインのデモ


crossfade.jsプラグインのページ


crossfade.jsプラグインの使い方

それではcrossfade.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<section class="js-section">
    <div class="banner js-example-1" data-crossfade-start="demo/pic-01.jpg" data-crossfade-end="demo/pic-02.jpg">
        <h1 class="js-parallax">crossfade.js</h1>
    </div>
    <div class="content center">
        <h2>もっと下にスクロールさせてみて</h2>
        <h3>Try it. Scroll down.</h3>
    </div>
</section>

<section class="js-section">
    <div class="banner js-example-2">
        <h1>どう?良い感じ?</h1>
    </div>
    <div class="content">
        <h2 class="center">画像を2枚使ってフェードさせよう</h2>
        <h3 class="center">わざと2枚目にボヤケた画像を使用しているサンプル</h3>
    </div>
</section>

チェックポイント

1つ目のsectionと2つ目のsectionは敢えてプラグインの使い方を変えています。

CSSコード

<style>
html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    line-height: 1.5;
    color: #555;
}

.banner {
    position: relative;
    color: white;
    margin-bottom: 50px;
    height: 500px;
    background: #333;
}

.banner h1 {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    font-size: 4em;
    margin: 0;
    text-align: center;
    text-shadow: 0 2px 0 #444;
    z-index: 10;
}

section {
    min-height: 130%;
}

.content {
    max-width: 40em;
    margin: 0 auto;
}

.center {
    text-align: center;
}
</style>

チェックポイント

CSSはお好みで指定して下さい。これはサンプル用のCSSです。

JavaScriptコード

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="src/crossfade.jquery.js"></script>
<script>
$(function () {

    // 1つ目のsection
    $('.js-example-1').crossfade({
        threshold: 0.3 // フェードアウトの速さ
    });
    // 2つ目のsection
    $('.js-example-2').crossfade({
        start: 'demo/02.jpg', // スタートの画像URLを指定
        end: 'demo/02-blur.jpg', // フェードアウトする画像URLを指定
        threshold: 0.5, // フェードアウトの速さ
        backgroundPosition: 'center center' // 画像の位置
    });

});
</script>

チェックポイント

HTMLのチェックポイントでも書きましたが、1つ目のsectionと2つ目のsectionでプラグインの使い方を変えています。1つ目のsectionでは画像URLをタグで直接指定しています。2つ目はjavascript内で指定しているという違いですね。お好みでどちらかを指定して下さい。

またthresholdオプションは0〜1の間で指定して、値が0に近いほど速くフェードアウトします。

プラグインへ一言

これはWEBサービス紹介用ページに最適だね!

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております