BondJS
A Scroll Spy that drinks Vodka Martini!
If you dont want the hazzle of keeping control over when to start your animations when it reaches a certain point on the screen, and when to stop them again, BondJS is maybe something for you.
Bond JS keeps track of your HTMLElements an starts animations when they appear in the window you define. Bond JS can call functions when you elements appear or disaapear or just toggle a css class on them.
Keep scrolling to read the simple documentation, examples and the demo page.
Bond is tested with modern browser, such as Chrome, FireFox, Safari & >IE8
Example
In this example, the olives will rotate when they become visible in the window. Try scroll up and down, so they become hidden and visible to see them rotate.
var bond = new Bond();
bond.spyon([
{
victim: $('.olive'),
missionData:{
visibility:{
victimBody:true
}
}
}
]).start();
Documentation
Initialize Bond JS
var bond = Bond();
Global defaults
The default values is top:0, bottom:0, victimBody:false, cssClass:'spotted', once:false. You can choose to only override some of the values.
{
visbility:{
top:0,
bottom:0,
victimBody:false
},
animation: {
cssClass: 'spotted',
once: false
}
}Override defaults
You override the default values by passing new Bond an object with the new values.
var bond = new Bond({
visibility: {
top: 0.2,
bottom: 0.2,
victimBody: true
},
animation:{
cssClass: 'animate',
once: true,
in: function (e){
console.log("in");
},
out: function (e) {
console.log("out");
}
}
});
Give bond victims to spy on
To get bond to spot victims, pass him an array of objects, and add one property called victim. Give that property and HTMLElement or an jQuery object.
E.g.$('.le-chiffre') (one element) $('.pretty-ladies') (multiple elements).
Bond will spot the HTMLElement when it enters the window and give it the default class spotted unless the defaults has been override.
var bond = new Bond();
bond.spyon([
{
victim: HTMLElement
},
{
victim: document.getElementsByClassName('mr-big');
},
{
victim: $('.le-chiffre')
},
{
victim: $('.pretty-ladies')
},
[...]
]);
Add properties to the victims
The missionData overrides the global options for the current victim.
Therefore it will only work for the victim inside the wrapping object.
var bond = new Bond();
bond.spyon([
{
victim: HTMLElement,
missionData:{
visibility:{
top: 0.5,
bottom: 0.5,
victimBody: true
},
animation:{
cssClass: "animation",
in: function (e) {
console.log("in");
},
out: function (e) {
console.log("out");
}
}
}
},
[...]
]);
Start Bond JS
You can start bond, after you giving bond some victims to spy on by adding them to spyon.
You can also chain start to the spyon method.
bond.start();
// or
bond.spyon([
{
victim: HTMLElement
}
]).start();
Make bond report back
You can make bond tell you whats he's doing, so you can debug your code, if something is wrong.
var bond = new Bond();
bond.report = true;
bond.spyon([
...
]).start();
Forced spying
If you have som animation, that change the victims location, use forcespy to make bond search for the victims even though the user doesn't scroll
You can choose to manually call forcespy or make it a timed method by adding a timespan forcespy(2000) this will force bond to spy for 2s, and the window.scroll will be disabled in that period.
bond.forcespy(); // or bond.forcespy(2000);
Snippet
This is how you could use BondJS
var bond = new Bond();
bond.spyon([
{
victim: $('.mr-big'),
missionData:{
visibility:{
top:0,
bottom: 0,
victimBody:true
},
animation:{
cssClass: 'custom',
in:function(e){
console.log(e, "in");
},
out:function(e){
console.log(e, "out");
}
}
}
}
])
bond.start();
Examples
Spot the victim when it's center in window
When we give bond top:0.5 it means that he should spot the victim when its 50% from the top, and the same for the bottom.
When we say to bond that the victimBody:true it means that he should spot the victim from the center of the victim instead of the the top.
bond.spyon([
{
victim: HTMLElement,
missionData:{
visibility:{
top: 0.5,
bottom: 0.5,
victimBody: true
}
}
},
[...]
])
Spot the victim when its 100px in
Here we tell bond that he should be using px 100px values instead of pct.
Now bond will spot the victim when the head or bottom is 100px in (the browser window).
bond.spyon([
{
victim: HTMLElement,
missionData:{
visibility:{
top: 100,
bottom: 100
}
}
},
[...]
])
Change the cssClass
We can tell bond that when he spots the victim he should put another css class on it e.g. custom-css-class
bond.spyon([
{
victim: HTMLElement,
missionData:{
animation:{
cssClass: 'custom-css-class'
}
}
},
[...]
])
Callbacks
You can make bond call a function when the victim is spotted.
By setting the once:true bond will only spot the victim once. Therefore it will only call the in callback once, and won't call the out.
If you want bond to call the in and out callback, as the victim goes in and out of the window, just set once:false or dont set it all.
If you want some extra data on the victim set it on the extra variable. Bond adds some value to the victim object, but the extra property is safe.
bond.spyon([
{
victim: HTMLElement,
extra:{
data: 'extra data'
},
missionData:{
animation:{
once: true,
in: function(e){
console.log(e.extra.data, "in");
},
out:function(e){
// wont be called
console.log(e.extra.data, "out");
}
}
}
},
[...]
]
Example code
Rotating Olives
In the rotation olives example we start by create a shared object for the animations. Here we use the in and out callbacks to start bootstraps popover. The callback recieves the victim object, and there a cache jQuery element of the victim called $victim.
Next we create our bond object, and passes some objects for bond to spy on. Next we define how bond should spot the different victims.
var oliveanimation = {
in:function(e){
e.$victim.popover('show');
},
out:function(e){
e.$victim.popover('hide');
}
};
var bond = new Bond();
bond.spyon([
{
victim: $('.olive-1'),
missionData:{
visibility:{
victimBody:true
},
animation: oliveanimation
}
},
{
victim: $('.olive-2'),
missionData:{
visibility:{
victimBody:true,
top:0.5,
bottom:0.5
},
animation: oliveanimation
}
},
{
victim: $('.olive-3'),
missionData:{
visibility:{
victimBody:true,
top:0.2,
bottom:0.8
},
animation: oliveanimation
}
},
{
victim: $('.olive-4'),
missionData:{
animation: oliveanimation
}
},
{
victim: $('.olive-5'),
missionData:{
visibility:{
top:300,
bottom:300
},
animation: oliveanimation
}
},
{
victim: $('.olive-6'),
missionData:{
visibility:{
top:0.25,
bottom:0.25
},
animation: oliveanimation
}
}
]).start();