parallax.js
1.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
(function ($) {
$.fn.parallax = function () {
var window_width = $(window).width();
// Parallax Scripts
return this.each(function(i) {
var $this = $(this);
$this.addClass('parallax');
function updateParallax(initial) {
var container_height;
if (window_width < 601) {
container_height = ($this.height() > 0) ? $this.height() : $this.children("img").height();
}
else {
container_height = ($this.height() > 0) ? $this.height() : 500;
}
var $img = $this.children("img").first();
var img_height = $img.height();
var parallax_dist = img_height - container_height;
var bottom = $this.offset().top + container_height;
var top = $this.offset().top;
var scrollTop = $(window).scrollTop();
var windowHeight = window.innerHeight;
var windowBottom = scrollTop + windowHeight;
var percentScrolled = (windowBottom - top) / (container_height + windowHeight);
var parallax = Math.round((parallax_dist * percentScrolled));
if (initial) {
$img.css('display', 'block');
}
if ((bottom > scrollTop) && (top < (scrollTop + windowHeight))) {
$img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
}
}
// Wait for image load
$this.children("img").one("load", function() {
updateParallax(true);
}).each(function() {
if(this.complete) $(this).load();
});
$(window).scroll(function() {
window_width = $(window).width();
updateParallax(false);
});
$(window).resize(function() {
window_width = $(window).width();
updateParallax(false);
});
});
};
}( jQuery ));