パララックスサイト
2012年頃からFlashを使うサイトが減っていき、動きのある演出については、代わりにJavaScriptを使うようになりました。その時に流行り始めたのがブラウザのスクロール量に応じて変化する演出です。
こういうサイトは、パララックスとか言われています。
Parallaxとは視差という意味で、角度や位置などが違う地点によって、同じものが違うように見える事です。
本来多重スクロールなどに用いられる言葉ですが、今ではブラウザのスクロールに応じて変化するような仕掛けのあるWebサイトの事をまとめて「パララックス」と呼んだりします。
ただ、本来の意味でのParallaxとは違うので、パララックスと呼ぶ事を迷う事も多く、スクロール演出とか、スクロールエフェクトとか呼んだりもします。
よく見るスクロール演出
よく見るのは、スクロールする前は何も表示されず、表示領域内に入ってくるとポンッ！とか勢いよく現われるような演出です。
動きをつける事でユーザーの目を引き付ける事もできますし、特別に印象付けたいワードなどを引き立てたい時。商品紹介で高級感を持たせたり、ただ流れるだけの紙面のようなサイトとは違う特別感を出せます。
こういった演出を作るために、JavaScriptの知識がなくても、うまい事設定できるようなjQueryと併せて使うプラグインなども出ていますので、導入してみると、面白いでしょう。
でも、そろそろ同じような演出に飽きてきたので、もう少し工夫を見せたい場合、ちょっと原点に戻って演出を考えてみても良いかもしれません。
演出事例
まず、この手の演出サイトは、ユーザーのスクロール量に応じて変化するという特徴があります。
ユーザーのスクロール量とは、こういった数値です。
この数字を使って、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)'});
}