Codehints | Simple Background Parallax Scrolling in JavaScript

Simple Background Parallax Scrolling in JavaScript

Anish

Jul 13^th, 2016

CSS3 , Jquery

A tutorial about creating simple background parallax scrolling in JavaScript.


function parallax() {
  window.onscroll = function() {
    var speed = 5.0;
    document.body.style.backgroundPosition = (-window.pageXOffset/speed)+"px "+(-window.pageYOffset/speed)+"px";
  }
}

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400);
body,html{height:100%;}
body {
  font-family: 'Ubuntu Mono', sans-serif;
  height: 200%; 
  width: 200%; 
  background-image:url('http://loremflickr.com/800/600/brazil,rio');
  background-attachment: fixed; 
  background-size: cover;
}
div {
  @square: 200px;
  
  position: absolute;
  top: 40%;
  left: 20%;
  color: white; 
  font-size: 1.2em;
  text-shadow: #000 1px 1px 1px;
  width: @square*5;
  height: @square;
  padding: 20px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 6px;
  
  pre {
    font-size: .7em;
    word-break: break-all;
  }
}

function parallax() {
  window.onscroll = function() {
    var speed = 5.0;
    document.body.style.backgroundPosition = (-window.pageXOffset/speed)+"px "+(-window.pageYOffset/speed)+"px";
  }
}

parallax();

Website