https://stmarysoxted.uk/Images/Content/2414/Templates/56328/animations.js

1/* (C)2019 Endis Ltd.
2No permission is given to use this code, except on an Endis/ChurchInsight website. */
3
4// Animation JS for ChurchInsight Templates
5
6// This code provides a polling scroll position checker, so classes can be added/removed at particular scroll positions.
7// There is also a window resize trigger, that resets any scroll positions that might have changed with different sized windows.
8// WATCH OUT for race-conditions!
9
10$(document).ready(function () 
11{ 'use strict';
12
13var iMobileWidth = 768; // This is one above max mobile screen width.
14
15var BodyTag = $('body');
16var bRunPoller = false;
17
18var AnimationElementA = BodyTag.find('section.FadingCards');
19
20var AnimationElementB=[];
21var DIVs = AnimationElementA.find('div.image_blocks li a');
22//console.log(DIVs.length);
23AnimationElementB[1] = DIVs.eq(0);
24AnimationElementB[2] = DIVs.eq(1);
25AnimationElementB[3] = DIVs.eq(2);
26//AnimationElementB[4] = DIVs.eq(3);
27
28var iY_Down_A, iY_Up_A, bPastiYA = false, bExistsA = false;
29var iY_Down_B=[],iY_Up_B=[],bPastiYB=[],bExistsB=[];
30iY_Down_B[1]=0; iY_Up_B[1]=0; bPastiYB[1]=false; bExistsB[1]=false;
31iY_Down_B[2]=0; iY_Up_B[2]=0; bPastiYB[2]=false; bExistsB[2]=false;
32iY_Down_B[3]=0; iY_Up_B[3]=0; bPastiYB[3]=false; bExistsB[3]=false;
33//iY_Down_B[4]=0; iY_Up_B[4]=0; bPastiYB[4]=false; bExistsB[4]=false;
34
35var iCards = 3;
36
37function AdjustScrollPositions() {
38	var iY,iWH = window.innerHeight;
39	var iSW = window.innerWidth;
40	
41	bExistsA = (iSW >= iMobileWidth && AnimationElementA.length === 1); // activate this.
42	if(bExistsA){
43		iY = AnimationElementA.offset().top;
44		iY_Down_A = iY - iWH + iWH/4; // top quater of the slice is visible on screen.
45		iY_Up_A = iY - iWH - 20; // 20px buffer.
46		bExistsA = (iY_Down_A > iY_Up_A); // sanity check.
47	}
48	
49	var i;for (i = 1; i <= iCards; i++) { 
50		bExistsB[i] = (iSW < iMobileWidth && AnimationElementB[i].length === 1); // activate this.
51		if(bExistsB[i]){
52			iY = AnimationElementB[i].offset().top;
53			iY_Down_B[i] = iY - iWH + iWH/4; // top quater of the slice is visible on screen.
54			iY_Up_B[i] = iY - iWH - 20; // 20px buffer.
55			bExistsB[i] = (iY_Down_B[i] > iY_Up_B[i]); // sanity check.
56		}
57	}
58}
59
60function PollScrollDownChanges() { // This routine must be very streamlined. Called several times a second.
61	if(!bRunPoller){return;} // exit if not meant to be running. 
62	var iY = window.pageYOffset;
63	var iSW = window.innerWidth;
64	
65	if(bExistsA && iSW >= iMobileWidth){
66		if(!bPastiYA && iY > iY_Down_A){
67			AnimationElementA.addClass('RunAnimation');
68			bPastiYA = true;
69		}
70		if(bPastiYA && iY <= iY_Up_A){ /* Remove only if user scrolls a certain way up */
71			AnimationElementA.removeClass('RunAnimation');
72			bPastiYA = false;
73		}
74	}
75	
76	if(iSW < iMobileWidth){
77		var i;for (i = 1; i <= iCards; i++) { 
78			if(bExistsB[i]){
79				if(!bPastiYB[i] && iY > iY_Down_B[i]){
80					AnimationElementB[i].addClass('RunAnimation');
81					bPastiYB[i] = true;
82				}
83				if(bPastiYB[i] && iY <= iY_Up_B[i]){ /* Remove only if user scrolls a certain way up */
84					AnimationElementB[i].removeClass('RunAnimation');
85					bPastiYB[i] = false;
86				}
87			}
88		}
89	}
90}
91
92// Deal with screen resizes. This is NOT a polling routine, but a trigger routine.
93var iLastSW = window.innerWidth;
94function RunOnScreenResize(){
95	
96	var iSW = window.innerWidth;
97	if(iSW !== iLastSW){
98		iLastSW = iSW;
99		
100		bRunPoller = false; // stop race conditions.
101		
102		// Stop all the animations
103		AnimationElementA.removeClass('RunAnimation');
104		bPastiYA = false;
105		var i;for (i = 1; i <= iCards; i++) { 
106			AnimationElementB[i].removeClass('RunAnimation');
107			bPastiYB[i] = false;
108		}
109		
110		AdjustScrollPositions(); // change scroll positions.
111		
112		bRunPoller = true; // fine to start up again.
113	}
114}
115	
116// Set iLastSW to 0, to avoid a race-condition, and ensure the code inside RunOnScreenResize actually runs.
117setTimeout(function(){iLastSW=0;RunOnScreenResize();}, 1000); // run after a second, to get more accurate values.
118window.addEventListener("resize", function(){RunOnScreenResize();}, false);
119
120window.setInterval(function(){PollScrollDownChanges();}, 100); // poll to see if user has scrolled down.
121
122});