Parallax Picture Scrolling

A small script to make images scroll in a parallax way.

by Marcel Ferdinand

HTML

<div class="textbox">I'm a text box.</div>

<div class="parallaxbox" id="pb0" style="background-image: url('https://farm8.staticflickr.com/7177/14025543345_9e3a1ba6f5_b.jpg');">
dsadsadas
</div>

<div class="parallaxbox" id="pb1" style="background-image: url('https://farm3.staticflickr.com/2850/13713022943_77f7dfc9f3_b.jpg');"></div>

<div class="parallaxbox" id="pb4" style="background-image: url('https://farm4.staticflickr.com/3763/12273895274_9347eb5f1a_b.jpg');"></div>

<div class="textbox">I'm a the last text box.</div>

CSS

body{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.textbox {
    position: relative;
    height: auto;
    
    background: white;
    padding: 50px;
    margin-top: -1px;
    margin-bottom: -1px;
    
    z-index: 99;
    box-shadow: 0 0 18px rgba( 80, 80, 80, 0.8);
}
.parallaxbox {
    position: relative;
    height: 300px;
    
    background: #444;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    
    z-index: 9;
}

a, a:visited{
    color: blue;
    text-decoration: none;
}
a:hover{
    text-decoration:underline;
}

JavaScript

function parallax() {
    setpos("#pb0");
    setpos("#pb1");
    setpos("#pb4");
}



function setpos(element, factor) {
    factor = factor || 2;
    
    var offset = $(element).offset();
    var w = $(window);
    
    var posx = (offset.left - w.scrollLeft()) / factor;
    var posy = (offset.top - w.scrollTop()) / factor;
    
    $(element).css('background-position', '50% '+posy+'px');
    
    // use this to have parralax scrolling vertical and horizontal
    //$(element).css('background-position', posx+'px '+posy+'px');
}

$(document).ready(function () {
    parallax();
}).scroll(function () {
    parallax();
});