パララックスサイト

もくじ > Web開発ノート > リッチサイト+JavaScript

2012年頃からFlashを使うサイトが減っていき、動きのある演出については、代わりにJavaScriptを使うようになりました。その時に流行り始めたのがブラウザのスクロール量に応じて変化する演出です。

こういうサイトは、パララックスとか言われています。

Parallaxとは視差という意味で、角度や位置などが違う地点によって、同じものが違うように見える事です。

本来多重スクロールなどに用いられる言葉ですが、今ではブラウザのスクロールに応じて変化するような仕掛けのあるWebサイトの事をまとめて「パララックス」と呼んだりします。

ただ、本来の意味でのParallaxとは違うので、パララックスと呼ぶ事を迷う事も多く、スクロール演出とか、スクロールエフェクトとか呼んだりもします。

よく見るスクロール演出

よく見るのは、スクロールする前は何も表示されず、表示領域内に入ってくるとポンッ!とか勢いよく現われるような演出です。

動きをつける事でユーザーの目を引き付ける事もできますし、特別に印象付けたいワードなどを引き立てたい時。商品紹介で高級感を持たせたり、ただ流れるだけの紙面のようなサイトとは違う特別感を出せます。

こういった演出を作るために、JavaScriptの知識がなくても、うまい事設定できるようなjQueryと併せて使うプラグインなども出ていますので、導入してみると、面白いでしょう。

でも、そろそろ同じような演出に飽きてきたので、もう少し工夫を見せたい場合、ちょっと原点に戻って演出を考えてみても良いかもしれません。

演出事例

まず、この手の演出サイトは、ユーザーのスクロール量に応じて変化するという特徴があります。

ユーザーのスクロール量とは、こういった数値です。

現在のスクロール値は 0 です。

この数字を使って、HTML内の設定値をリアルタイムに変更させています。

設定値を使って作れる演出事例を、いくつかあげてみます。

幅を変化させる例

位置を変化させる例

カラーを変化させる例

角度を変化させる例

こんな風に、アイデア次第で、ユニークな演出が表現できます。

このシンプルな数値を使って、どこまで応用できるのか? Webサイトを企画する時に、自分自身の発想力を試してみましょう。

このページのJavaScript

$(function() {

    $(window).scroll(function () {
        ScrEffectsSample();
    });

});

function ScrEffectsSample() {
    var scrTop = $(document).scrollTop();
    var win_w = $(window).width();
    var win_h = $(window).height();

    $('.scref-sample-scrnum').text(scrTop);

    $('.scref-sample-pon').each(function(num) {
        if($(this).css('visibility') == 'hidden'){
            var py = $(this).offset().top;
            if(py < (scrTop + win_h / 2)){
                var from_w = '10px';
                var to_w = $(this).width();
                $(this).css({'visibility':'visible','margin-left':'-300px'});
                $(this).animate({'margin-left':'0px'}, 1000, 'easeOutElastic');
            }
        }
    });

    var w = scrTop % 200 / 2;
    $('.scref-sample-wid').css({'width':w+'%'});

    var x = scrTop % 200 / 200 * win_w;
    if(x < 0){x = 0};
    $('.scref-sample-loc').css({'left':x});

    var r = 255 - scrTop % 255;
    var g = scrTop % 255;
    var b = scrTop % 500 / 2;
    $('.scref-sample-color').css({'background':'RGB('+r+','+g+','+b+')'});

    var ang = scrTop % 360;
    $('.scref-sample-angle').css({'transform':'rotate('+ang+'deg)'});

}