jquery.parallax-1.1.3.js
2.24 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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/
(function($) {
    var $window = $(window);
    var windowHeight = $window.height();
    $window.resize(
        function() {
            windowHeight = $window.height();
        }
    );
    $.fn.parallax = function(xpos, speedFactor, outerHeight) {
        var $this = $(this);
        var getHeight;
        var firstTop;
        var paddingTop = 0;
        //get the starting position of each element to have parallax applied to it
        $this.each(
            function() {
                firstTop = $this.offset().top;
            }
        );
        if (outerHeight) {
            getHeight = function(jqo) {
                return jqo.outerHeight(true);
            };
        } else {
            getHeight = function(jqo) {
                return jqo.height();
            };
        }
        // setup defaults if arguments aren't specified
        if (arguments.length < 1 || xpos === null) {
            xpos = "50%";
        }
        if (arguments.length < 2 || speedFactor === null) {
            speedFactor = 0.1;
        }
        if (arguments.length < 3 || outerHeight === null) {
            outerHeight = true;
        }
        // function to be called whenever the window is scrolled or resized
        function update() {
            var pos = $window.scrollTop();
            $this.each(
                function() {
                    var $element = $(this);
                    var top = $element.offset().top;
                    var height = getHeight($element);
                    // Check if totally above or totally below viewport
                    if (top + height < pos || top > pos + windowHeight) {
                        return;
                    }
                    $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
                }
            );
        }
        $window.bind('scroll', update)
               .resize(update);
        update();
    };
})(jQuery);