Added comments
This commit is contained in:
parent
6ba53c9136
commit
db5afc91f9
1 changed files with 11 additions and 2 deletions
13
parallax.js
13
parallax.js
|
@ -9,28 +9,37 @@ var Parallax = {
|
||||||
});
|
});
|
||||||
console.log("Parallax Initialised.");
|
console.log("Parallax Initialised.");
|
||||||
if (createEvents) {this.createEvents();}
|
if (createEvents) {this.createEvents();}
|
||||||
|
//Calculate the initial positions of the images.
|
||||||
this.calculate();
|
this.calculate();
|
||||||
},
|
},
|
||||||
calculate: function() {
|
calculate: function() {
|
||||||
|
// Get the window dimentions.
|
||||||
window_top = $(window).scrollTop();
|
window_top = $(window).scrollTop();
|
||||||
window_bottom = window_top + $(window).height();
|
window_bottom = window_top + $(window).height();
|
||||||
|
|
||||||
$(this.ident).each(function(){
|
$(this.ident).each(function(){
|
||||||
|
// If the element isn't on the screen, or wasn't initialised, ignore it.
|
||||||
if (!is_on_screen(this) || !$(this).attr('parallax-offset')) { return; }
|
if (!is_on_screen(this) || !$(this).attr('parallax-offset')) { return; }
|
||||||
element = $(this);
|
element = $(this);
|
||||||
|
//Calculate the center position of the image
|
||||||
center_pos = (element.offset().top - $(window).scrollTop()) + (element.height() / 2);
|
center_pos = (element.offset().top - $(window).scrollTop()) + (element.height() / 2);
|
||||||
|
// Calculate the position of the center point, relative to the center.
|
||||||
perc = -(0.5 - ((window_top - center_pos) / window_bottom));
|
perc = -(0.5 - ((window_top - center_pos) / window_bottom));
|
||||||
|
// Calculate the position of the center of the image from the percentage through the screen.
|
||||||
pos = Math.round((perc * element.attr('parallax-offset')) * 100) / 100;
|
pos = Math.round((perc * element.attr('parallax-offset')) * 100) / 100;
|
||||||
|
// Apply the calculated value.
|
||||||
element.css('background-position',"0px " + pos + "px");
|
element.css('background-position',"0px " + pos + "px");
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
createEvents: function() {
|
createEvents: function() {
|
||||||
|
// Create scroll and resize events for Parallax
|
||||||
$(window).scroll(function() { Parallax.calculate(); });
|
$(window).scroll(function() { Parallax.calculate(); });
|
||||||
$(window).resize(function() { Parallax.initialise(false); })
|
$(window).resize(function() { Parallax.initialise(false); })
|
||||||
},
|
},
|
||||||
ident: '.parallax'
|
ident: '.parallax' //The identifier for Parallax elements
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check if the element is on the screen, not necessarily all of it.
|
||||||
function is_on_screen(elm) {
|
function is_on_screen(elm) {
|
||||||
var vpH = $(window).height(),
|
var vpH = $(window).height(),
|
||||||
st = $(window).scrollTop(),
|
st = $(window).scrollTop(),
|
||||||
|
|
Reference in a new issue