Background JS

Introduction

this is an awesome plugin that makes your website background move when scrolling, that's hard to describe, you can visit these websites to see the effect:

• ihaveu.com/home
• swordray.com

and you can assgin multiple background images by json and it will change automatically by time!

Requirements

• jQuery ~> 1.7

Installation

Bower

bower install background.js

Gem

gem install rails-assets-background.js --source https://rails-assets.org

Demonstration Effect

Please visit

• ihaveu.com/home
• swordray.com

Without Background.js

With Background.js

Usage

Example

first, load jQuery and the plugin, Zepto.js can also support this plugin.

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://fr0m.github.io/background.js/background.min.js" type="text/javascript"></script>

just do this.

body { background-image: url("http://i1.ihaveu.net/image/auction/picture/000/053/564/path/16dd7c4e.jpg"); }

$(function(){
  Background.tick();
});

or an image url can be used.

$(function(){
  Background.tick({imageUrl:"http://i1.ihaveu.net/image/auction/picture/000/053/564/path/16dd7c4e.jpg"});
});

string in format of json is also acceptable.

$(function(){
  var json = {
    "backgrounds" : [
      {
        "started_at":"00:00:00",
        "ended_at":"24:00:00",
        "image":"http://i1.ihaveu.net/image/auction/picture/000/053/564/path/16dd7c4e.jpg",
        "color":"#fff"
      }
    ] 
  };
});
Background.tick({json:json});

an url return in format of json is acceptable as well.

$(function(){
  Background.tick({jsonString:"http://fr0m.github.io/background.js/test/test.json"});
});

and a callback function is supported

$(function(){
  Background.tick({jsonString:"http://fr0m.github.io/background.js/test/test.json"},function(){
    alert("done!");
  });  
});

Documentation

Credits

• fr0m @ihaveu

License

Copyright © 2014 He Liu [email protected] under The MIT License.