A very simple and short JQuery plugin to scroll background image with window scroll
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
preview
source
.DS_Store
.gitattributes
LICENSE
README.md
index.html

README.md

JQuery Background Image Scroll

A very simple, short, beautiful, and responsive JQuery plugin to scroll background image with page scroll. show1 show2

Live Demo

Get started

To start using JQuery Background Image Scroll you just need to add bgscroll.js to your page in the <head> section just after JQuery.

<script src='scripts/bgscroll.js'></script>

Now let's create <div> element with some background-image css property.

<head>
  <style>
    .background{
      width: 100vw;
      height: 70vh;
      background-image: url('background1.jpg');
      background-repeat: no-repeat;
      background-position: 50% 0%;
    }
  </style>
  <script src='scripts/jquery.js'></script>
  <script src='scripts/bgscroll.js'></script>
</head>

<body>
  <div class="background"></div>
</body>

And add JQuery's $(window).scroll() event in <head> and <script> section.

  <script>
    $(window).scroll(function(){
      $('.background').bgscroll();
    })
  </script>

That's all!

Options

You can define some options and change its default to your custom:

  • bgpositionx [INT between 0 and 100] X position of the background image measured in %. The value 50 is 50% (center of the image). Default: 50
  • direction [STRING 'top' or 'bottom'] The direction of scrolled image, top means: when the page is scrolled down, the background image is scrolled to top, bottom means: when the page is scrolled down, the background image is scrolled also to down. Default : 'top'
  • debug [BOOLEAN true or false] Output of current's image position in the browser console. Default : false
  • max - [INT between 0 and 100] the maximum position (in %) this background-image can move to. Default : '100'
  • min - [INT between 0 and 100] the minimum position (in %) this background-image can move from. Default : '0'