STYLE SWITCHER

Simple Background Parallax Scrolling in JavaScript

jquery3

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

Recent Article

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.