Parallax The Easy Way
JADE
h1 Parallax The Easy Way
.container
.parallaxed
SCSS
body {
margin-bottom: 1000px; //This is just to have some scroll space
}
h1 {
text-align: center;
margin: 100px 0;
}
.container {
height: 500px;
width: 700px;
background-color: #1A1A1A;
margin: 0 auto;
}
.parallaxed {
height: 100%;
width: 700px;
opacity: .4;
background-image: url(http://placekitten.com/g/700/1000);
background-repeat: no-repeat;
background-position: center 0px;
}
JAVASCRIPT
$(window).scroll(function(){
scrollEffect1(1.3);
});
function scrollEffect1(speed = '1') {
var scrollPosition = $(window).scrollTop();
$('.parallaxed')
.css('background-position', 'center -' + scrollPosition/speed +'px')
}
