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') }
Expand for more options Login