https://advokat.fo/site/templates/default/assets/js/fm.parallaxator.jquery.js

1/*
2 Parallaxator jQuery Plugin
3 Parallaxator is a jQuery-based parallax plugin. It's simple, and amazingly easy to use.
4 version 1.0, Dec 11th, 2015
5 by Ingi P. Jacobsen
6
7 The MIT License (MIT)
8
9 Copyright (c) 2015 Faroe Media
10
11 Permission is hereby granted, free of charge, to any person obtaining a copy
12 of this software and associated documentation files (the "Software"), to deal
13 in the Software without restriction, including without limitation the rights
14 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15 copies of the Software, and to permit persons to whom the Software is
16 furnished to do so, subject to the following conditions:
17
18 The above copyright notice and this permission notice shall be included in all
19 copies or substantial portions of the Software.
20
21 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27 SOFTWARE.
28 */
29
30$(function () {
31	// Code still has a lot of deebug info going on, I'll remove it later on, 
32	// when it's been tested properly and all bugs have been removed
33	var DEBUG = false;
34	
35	var refreshParallaxator = function () {
36		var $window = $(window);
37		var i = 0;
38		$('.parallaxator').each(function () {
39			i++;
40			var holder = this;
41			var window_height = $window.height();
42			var holder_bounding = holder.getBoundingClientRect();
43
44			var HOLDER_IS_WITHIN_WINDOW = holder_bounding.top < window_height && holder_bounding.bottom > 0;
45			
46			if (HOLDER_IS_WITHIN_WINDOW) {
47				var $holder = $(holder);
48				$holder.children('.parallax_child').each(function () {
49					var child = this;
50					var $child = $(child);
51					var x = $child.prop('tagName');
52					var child_bounding = child.getBoundingClientRect();
53					var height_difference = holder_bounding.height - child_bounding.height;
54					var height_calc, top_calc, multiplier_inside, multiplier_outside, offset;
55					var velocity = typeof $child.attr('data-parallaxator-velocity') != 'undefined' ? parseFloat($child.attr('data-parallaxator-velocity')) : 1.0;
56
57					// Not all of these constants are used, but might be used later, 
58					// so I'll just leave them for now
59					var CHILD_IS_SMALLER_THAN_HOLDER  = child_bounding.height < holder_bounding.height;
60					var CHILD_IS_LARGER_THAN_HOLDER   = child_bounding.height >= holder_bounding.height;
61					var CHILD_IS_SMALLER_THAN_WINDOW  = child_bounding.height < window_height;
62					var CHILD_IS_LARGER_THAN_WINDOW   = child_bounding.height >= window_height;
63					var HOLDER_IS_SMALLER_THAN_CHILD  = holder_bounding.height < child_bounding.height;
64					var HOLDER_IS_LARGER_THAN_CHILD   = holder_bounding.height >= child_bounding.height;
65					var HOLDER_IS_SMALLER_THAN_WINDOW = holder_bounding.height < window_height;
66					var HOLDER_IS_LARGER_THAN_WINDOW  = holder_bounding.height >= window_height;
67					var WINDOW_IS_SMALLER_THAN_CHILD  = window_height < child_bounding.height;
68					var WINDOW_IS_LARGER_THAN_CHILD   = window_height >= child_bounding.height;
69					var WINDOW_IS_SMALLER_THAN_HOLDER = window_height < holder_bounding.height;
70					var WINDOW_IS_LARGER_THAN_HOLDER  = window_height >= holder_bounding.height;
71
72					var child_size = child_bounding.height > window_height ? 3 : (child_bounding.height > holder_bounding.height ? 2 : 1);
73					
74					// Inside multiplier calculation
75					height_calc = window_height - holder_bounding.height;
76					top_calc = (holder_bounding.top - height_calc) * -1;
77					multiplier_inside = (((top_calc / height_calc) - 0.5) * velocity) + 0.5;
78					// Outside multiplier calculation
79					height_calc = window_height + holder_bounding.height;
80					top_calc = (holder_bounding.top - window_height) * -1;
81					multiplier_outside = (((top_calc / height_calc) - 0.5) * velocity) + 0.5;
82
83					// Not reverse
84					if ($child.attr('data-parallaxator-reverse') != 'true') {
85						if (CHILD_IS_SMALLER_THAN_HOLDER && CHILD_IS_SMALLER_THAN_WINDOW) {
86							if (HOLDER_IS_SMALLER_THAN_WINDOW) {
87								DEBUG && console.log(i, x, '1.1.1, Inside down');
88								offset = (height_difference * (multiplier_inside * -1)) + height_difference;
89							} else {
90								DEBUG && console.log(i, x, '1.1.2, Outside down');
91								offset = (height_difference * (multiplier_inside * -1)) + height_difference;
92								offset = height_difference * multiplier_inside;
93							}
94						} else if (CHILD_IS_LARGER_THAN_HOLDER && CHILD_IS_SMALLER_THAN_WINDOW) {
95							DEBUG && console.log(i, x, '1.2.1, Inside down');
96							offset = (height_difference * (multiplier_inside * -1)) + height_difference;
97						} else if (CHILD_IS_LARGER_THAN_HOLDER && CHILD_IS_LARGER_THAN_WINDOW) {
98							DEBUG && console.log(i, x, '1.3.1, Outside down');
99							offset = ((child_bounding.height + holder_bounding.height) * multiplier_outside) - child_bounding.height;
100						} else if (CHILD_IS_SMALLER_THAN_HOLDER && CHILD_IS_LARGER_THAN_WINDOW) {
101							DEBUG && console.log(i, x, '1.4.1, Outside down');
102							offset = ((child_bounding.height + holder_bounding.height) * multiplier_outside) - child_bounding.height;
103						} else {
104							DEBUG && console.log(i, x, '1.uncaught');
105						}
106					// Reverse
107					} else {
108						if (CHILD_IS_SMALLER_THAN_HOLDER && CHILD_IS_SMALLER_THAN_WINDOW) {
109							if (HOLDER_IS_SMALLER_THAN_WINDOW) {
110								DEBUG && console.log(i, x, '2.1.1, Inside up');
111								offset = height_difference * multiplier_inside;
112							} else {
113								DEBUG && console.log(i, x, '2.1.2, Outside up');
114								offset = ((child_bounding.height + holder_bounding.height) * multiplier_outside) - child_bounding.height;
115							}
116						} else if (CHILD_IS_LARGER_THAN_HOLDER && CHILD_IS_SMALLER_THAN_WINDOW) {
117							DEBUG && console.log(i, x, '2.2.1, Outside up');
118							offset = height_difference * multiplier_outside;
119						} else if (CHILD_IS_LARGER_THAN_HOLDER && CHILD_IS_LARGER_THAN_WINDOW) {
120							DEBUG && console.log(i, x, '2.3.1, Outside up');
121							offset = height_difference * multiplier_outside;
122						} else if (CHILD_IS_SMALLER_THAN_HOLDER && CHILD_IS_LARGER_THAN_WINDOW) {
123							DEBUG && console.log(i, x, '2.4.1, Outside up');
124							offset = height_difference * multiplier_outside;
125						} else {
126							DEBUG && console.log(i, x, '2.uncaught');
127						}
128					}
129					$child.css('transform', 'translate3d(0, ' + offset + 'px, 0)');
130					DEBUG && console.log(i, x, multiplier_inside, multiplier_outside, offset, window_height, holder_bounding.height, child_bounding.height);
131					
132				});
133			}
134		});
135	};
136	$(window).bind('scroll resize load ready', function () {
137		refreshParallaxator();
138	});
139	$('.parallaxator').find('img').load(function () {
140		refreshParallaxator();
141	});
142});