パララックスという言葉をご存知ですか？
「視差」という意味なのですが、WEBページにおいてスクロールのタイミングをずらして遠近感を出したりできる特殊効果で使います。
この効果を使うと、通常スクロールしていく下手なページに立体感を持たせる事ができ、リッチな感覚を与える事が可能になります。
やり方
スクロールの値を変更するには、javascriptを使ってonscrollイベント時に、スクロール値に従って、特定のエレメントの座標を変更する事で視覚効果を演出します。
今回はサンプルとして、「背景画像」の手前に３つのエレメントを配置し、一番手前は通行スクロール、二番目は、3分の１のスクロール座標値で移動、三番目は2分の1のスクロール座標値で移動、というプログラムを書いてみました。
ソースコード
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tooltip</title>
<link rel="stylesheet" href="common.css">
<script src="parallax.js"></script>
</head>
<body>
<h1>Parallax</h1>
<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
</body>
</html>
html body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.bg{
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
z-index:1;
width:100%;
height:200%;
}
h1{
position:relative;
z-index:100;
color:white;
}
body{
background-image:url(photoshop-2845779_1280.jpg);
background-size:auto 100%;
background-repeat: no-repeat;
background-position:center;
background-attachment: fixed;
background-color:black;
}
.bubble{
position :absolute;
border-radius:50%;
box-shadow:4px 4px 16px rgba(0,0,0,0.5);
}
.bg1 .bubble{
background-color:red;
}
.bg2 .bubble{
background-color:blue;
}
.bg3 .bubble{
background-color:yellow;
}
;(function(){
var $$ = function(){
var bg1 = document.querySelector(".bg1");
if(bg1 !== null){
$$.prototype.addBubble(bg1);
}
var bg2 = document.querySelector(".bg2");
if(bg2 !== null){
$$.prototype.addBubble(bg2);
}
var bg3 = document.querySelector(".bg3");
if(bg3 !== null){
$$.prototype.addBubble(bg3);
}
window.addEventListener("scroll", $$.prototype.scroll_1, false);
};
$$.prototype.addBubble = function(bg){
var cnt = Math.floor( Math.random() * 10 );
for(var i=0; i<cnt+10; i++){
var div = document.createElement("div");
div.className = "bubble";
var x = Math.floor( Math.random() * 100 );
var y = Math.floor( Math.random() * 100 );
div.style.setProperty("left",x+"%","");
div.style.setProperty("top",y+"%","");
var w = Math.floor( Math.random() * 5 );
// var h = Math.floor( Math.random() * 5 );
div.style.setProperty("width",((w+5)*10)+"px","");
div.style.setProperty("height",((w+5)*10)+"px","");
bg.appendChild(div);
}
};
$$.prototype.scroll_1 = function(){
var bg1 = document.querySelector(".bg1");
if(bg1 !== null){
var top = document.body.scrollTop;
bg1.style.setProperty("top", (top/2)+"px","");
}
var bg2 = document.querySelector(".bg2");
if(bg2 !== null){
var top = document.body.scrollTop;
bg2.style.setProperty("top", (top/3)+"px","");
}
};
window.addEventListener("DOMContentLoaded", $$, false);
})();
解説
今回のサンプルページは、以下のようなエレメント構成になっています。
ページ読み込み直後に、bg1~3はそれぞれ、中に丸いエレメントをランダム数分追加します。
そして、スクロールイベントのタイミングで、bg-1とbg-2の座標を変更しています。
ちなみに、ページのスクロール値は「document.body.scrollTop」で簡単に取得できます。
サンプル
サンプルページ
いかがでしょう？こうした視覚効果を使って、面白いページを構築するイメージが湧きましたでしょうか？
デザイナーでなくても、こうしたページを構築できるようになると、仕事の幅も広がりますよね。
