Horizontal scroll in the background

README.md

Scrollable.js

Just add a "scrollable" class name to your background element, then it will scroll from left to right, according to your scroll event.

scrollable.js

$(function() {
    var element, scrollValue, documentHeight, percent;

    $('.scrollable').each(function() {
      element = this;

      $(element).css('position', 'fixed')
                .css('top', 0)
                .css('left', 0)
                .css('width', '200%')
                .css('height', '100%')
                .css('z-index', 0);


      function scrollBackground() {
        documentHeight = $(document).height();
        scrollValue = $(document).scrollTop();
        var percent = Math.floor(scrollValue / (documentHeight) * 100);
        $(element).css('margin-left', '-' + percent + '%');
      }

      scrollBackground();

      $(window).scroll(function(e) {
        scrollBackground();
      });

      $(window).resize(function(e) {
        scrollBackground();
      })
    });
});