https://www.kingsseeds.com/Themes/stacktech/Content/js/ScrollOnReveal.js

1'use strict';
2(function($){
3	$.fn.ScrollOnReveal = function(options){
4
5		var settings = $.extend({}, this.ScrollOnReveal.defaults, options);
6
7		return this.each(function(){
8			var Api = new API($(this), settings);
9			Api.init();
10		})
11	}
12
13	$.fn.ScrollOnReveal.defaults = {
14		container: $(window),
15		speed: 1000,
16		reset: true,
17		delay: 80,
18		viewFactor: 20,
19		easing: 'ease-in-out',
20		animatedCss: {
21			'opacity': '1'
22		},
23
24		beforeCss: {
25			'opacity': '0'
26		}
27	};
28
29	function API(elem, settings){
30		this.opts = settings;
31		this.elem = elem;
32		this.Transition;
33		this.reval = false;
34	};
35
36	API.prototype = {
37		init: function() {
38			var that = this;
39			that.opts.container.on('scroll', that.doTransition.bind(this));
40			that.before();
41		},
42
43		doTransition: function() {
44			var that = this;
45			window.requestAnimationFrame(function(){
46				that.transition();
47			})
48		},
49
50		elemOffsets: function(elem) {
51			var elemH = elem !== undefined ? elem.height() : 0;
52			var elemTop = 0,
53				elemBottom = 0;
54
55			if(!$.type(elem) !== 'null' && elem !== undefined) {
56				elemTop += elem.offset().top;
57				elemBottom += elemTop + elemH;
58			}
59
60			return {
61				Top: elemTop,
62				Bottom: elemBottom,
63				Height: elemH
64			}
65		},
66
67		containerOffsets: function(cont){
68			var opt = this.opts;
69			var _cont;
70			var contTop = 0,
71				contBottom = 0,
72				contH;
73
74			if($.type(cont) !== 'null' && cont !== undefined) {
75				contH = cont.height();
76				contTop += cont.scrollTop();
77				contBottom += contTop + cont.height();
78			} else {
79				_cont = opt.container;
80				contH = _cont.height();
81				contTop += _cont.scrollTop();
82				contBottom += contTop + _cont.height();
83			}
84
85			return {
86				Top: contTop,
87				Bottom: contBottom,
88				Height: contH
89			}
90		},
91
92		touchTarget: function(elem) {
93			var opt = this.opts;
94			var that = this;
95			var touchTop = false;
96			var reset = false;
97
98			var elemOff = that.elemOffsets(elem);
99			var contOff = that.containerOffsets(opt.container);
100
101			var resetCalc = contOff.Top - elemOff.Bottom;
102
103			if((elemOff.Top + opt.viewFactor) <= contOff.Bottom) {
104				touchTop = true;
105			}
106			if((resetCalc + opt.viewFactor) > 0 || !touchTop) {
107				reset = true;
108				touchTop = false;
109			}
110			return {
111				Top: touchTop,
112				Reset: reset
113			}
114		},
115
116		before: function(elem) {
117			var opt = this.opts;
118			var element;
119			var Css = getKeys(opt.beforeCss);
120
121			if(elem !== undefined) {
122				element = elem;
123			} else {
124				element = this.elem;
125			}
126			
127			if($.isEmptyObject(Css)) {
128				return;
129			}
130			else {
131				element.css(Css);
132			}
133
134			if(elementPosition(element).absolute) {
135				element.css('position', 'relative');
136			} else {
137				element.css('position', 'relative')
138			}
139		},
140
141		transition: function() {
142			var opt = this.opts;
143			var elem = this.elem;
144			var transition = {'transition': 'all ' + opt.easing + ' ' + opt.speed / 1000 + 's'}
145			var animateCSS = $.extend(opt.animatedCss, transition, {});
146			var befCss = getKeys(opt.beforeCss);
147			var touch = this.touchTarget(elem);
148
149			if(touch.Top) {
150				
151				setTimeout(function(){
152					elem.eq(0).css(animateCSS)
153				}, opt.delay || 1)
154				
155			}
156
157			if(touch.Reset && opt.reset) {
158				setTimeout(function(){
159					elem.eq(0).css(befCss);
160				}, 0)
161			}
162		}
163
164	}
165
166	function getKeys(target) {
167		var key;
168		var obj = {};
169		for(key in target) {
170			if(target.hasOwnProperty(key)) {
171				obj[key] = target[key];
172			} else {
173				return;
174			}
175		}
176		return obj;
177	}
178
179	function elementPosition(elem) {
180		var relative = false;
181		var absolute = false;
182
183		if($.type(elem) !== 'null') {
184			relative = elem.css('position') === 'relative' ? true : false;
185			absolute = elem.css('position') === 'absolute' ? true : false;
186		}
187
188		return {
189			relative: relative,
190			absolute: absolute
191		}
192	}
193})(jQuery);