https://www.performancehealthacademy.com/skin/frontend/cst/theme716/js/cherry-fixed-parallax.js

1(function($){
2    var methods = {
3        init : function( options ) {
4
5            var settings = {
6                offset: true
7            ,   bgfixed: true
8            ,   invert: true
9            }
10
11            return this.each(function(){
12                if ( options ){
13                    $.extend(settings, options);
14                } 
15                
16                var 
17                    $this = $(this)
18                ,   windowSelector = $(window)
19                ,   documentSelector = $(document)
20                ,   thisHeight = 0
21                ,   thisOffsetTop
22                ,   image_url = ''
23                ,   image_width = ''
24                ,   image_height = ''
25                ,   msie8 = Boolean(navigator.userAgent.match(/MSIE ([8]+)\./))
26                ;
27                
28                _constructor();
29                function _constructor(){
30                    image_url = $this.data("source-url");
31                    image_width = parseFloat($this.data("source-width"));
32                    image_height = parseFloat($this.data("source-height"));
33
34                    $this.css({'background-image': 'url('+image_url+')'});
35                    if(settings.bgfixed){
36                        $this.css({'background-attachment': 'fixed'});
37                    }
38
39                    addEventsFunction();                    
40                }
41                
42                function addEventsFunction(){
43                    //------------------ window scroll event -------------//
44                    windowSelector.on('scroll',
45                        function(){
46                            if(settings.offset){
47                                mainScrollFunction();
48                            }
49                        }
50                    ).trigger('scroll');
51                    //------------------ window resize event -------------//
52                    windowSelector.on("resize",
53                        function(){
54                            $this.width(windowSelector.width());
55                            $this.css({'width' : windowSelector.width(), 'margin-left' : Math.floor(windowSelector.width()*-0.5), 'left' : '50%'});
56
57                            if(settings.offset){
58                                mainResizeFunction();
59                            }
60                        }
61                    ).trigger('resize');
62                }
63                //------------------ window scroll function -------------//
64                function mainScrollFunction(){
65                    parallaxEffect();
66                }
67                //------------------ window resize function -------------//
68                function mainResizeFunction(){                    
69                    parallaxEffect();
70                }
71                
72                function parallaxEffect(){
73                    var 
74                        documentScrollTop
75                    ,   startScrollTop
76                    ,   endScrollTop
77                    ,   visibleScrollValue
78                    ;
79
80                    thisHeight = $this.outerHeight();
81                    windowHeight = windowSelector.height();
82                    thisOffsetTop = $this.offset().top;
83                    documentScrollTop = documentSelector.scrollTop();
84                    startScrollTop = documentScrollTop + windowHeight;
85                    endScrollTop = documentScrollTop - thisHeight;
86
87                    if( ( startScrollTop > thisOffsetTop ) && ( endScrollTop < thisOffsetTop ) ){
88                        visibleScrollValue = startScrollTop - endScrollTop;
89                        pixelScrolled = documentScrollTop - (thisOffsetTop - windowHeight);
90                        percentScrolled = pixelScrolled / visibleScrollValue;
91
92                        if(settings.invert){
93                            deltaTopScrollVal = percentScrolled * 100;
94                            $this.css({'background-position': '50% '+deltaTopScrollVal+'%'});
95                        }else{
96                            deltaTopScrollVal = (1-percentScrolled) * 100;
97                            $this.css({'background-position': '50% '+deltaTopScrollVal+'%'});
98                        }
99                    }
100                }
101
102            });
103        },
104        destroy    : function( ) { },
105        reposition : function( ) { },
106        update     : function( content ) { }
107    };
108
109    $.fn.cherryFixedParallax = function( method ){ 
110        
111        if ( methods[method] ) {
112            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
113        } else if ( typeof method === 'object' || ! method ) {
114            return methods.init.apply( this, arguments );
115        } else {
116            $.error( 'Method with name ' +  method + ' is not exist for jQuery.cherryMediaParallax' );
117        }
118         
119        
120    }//end plugin
121})(jQuery);