【JavaScript】背景を固定し、パララックスっぽくするParallax background

シングルページなどで見かける背景を固定しておいてスクロールに合わせて下の要素が動いてかぶさってくるように見せる視覚効果。それを実装してくれるのがParallax background。少ないコードなので難しいところはないと思います。

CSS

.t{
background-position:center top;
height:100%;
}
.t1{
background-color:#203137;
background-image:url(03.jpg)}
.t2{
background-color:#BA9197;
background-image:url(04.jpg)}
.t3{
background-color:#3BB4D1;
background-image:url(05.jpg)}
.f{
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
.s{
background-color:#f7f7f7;
height:90%;
}
.s>div,
.t>div{
font-size:2em;
position:relative;
text-align:center;
top:50%;
transform:translateY(-1em);
}
.t>div{color:#fff}
.s>div{color:#666}

HTML

<div class="f">
<div class="t t1"><div>Parallax background</div></div>
<div class="s s1"><div>A tiny javascript code</div></div>
<div class="t t2"><div>change CSS background-position<br>on page scroll</div></div>
<div class="s s2"><div>emulate parallax movement effect</div></div>
<div class="t t3"><div>Try instruction</div></div>
<div class="s s3"><div>Open website with big background<br>images in a new tab</div></div>
</div>

JS

/body前に入れます。
parallax-background.jsを使わない場合、以下をコピペします。

!function(){function g(b,c){var d=a.innerHeight,g=b.height,h=b.top,i=h+g,j=0;-1*h>g||h>d||(0>h&&(j=-1*h>>1),i>d&&(j=-1*(i-d)>>1),c[e]=(c[e].split(" ")[0]||"50%")+" "+j+"px","scroll"!==c[f]&&(c[f]="scroll"))}function h(a){for(a=d.length;a--;)g(d[a].getBoundingClientRect(),d[a].style)}var a=window,b=console,c=["scroll","resize"],d=document.querySelectorAll(arguments[0]),e="backgroundPosition",f="backgroundAttachment";if(b&&(b.log("https://github.com/ytiurin/parallax-background.js"),b.log(d)),d.length){for(var i in c)addEventListener(c[i],h);h()}}
('.t')

最後の(‘.t’)はCSSセレクターを入れます。

ダウンロードしたparallax-background.jsを使う場合も最後に(‘.t’)はCSSセレクターを入れます。

 
pb_s

【JavaScript】背景を固定し、パララックスっぽくするParallax background

  • LATEST
  • RELATED
  • POPULAR