https://www.stjohnschelsea.org/Images/Content/2414/Templates/47287/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 = 468; // 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.article_cards > div');
22AnimationElementB[1] = DIVs.eq(0);
23AnimationElementB[2] = DIVs.eq(1);
24AnimationElementB[3] = DIVs.eq(2);
25//AnimationElementB[4] = DIVs.eq(3);
26
27var iY_Down_A, iY_Up_A, bPastiYA = false, bExistsA = false;
28var iY_Down_B=[],iY_Up_B=[],bPastiYB=[],bExistsB=[];
29iY_Down_B[1]=0; iY_Up_B[1]=0; bPastiYB[1]=false; bExistsB[1]=false;
30iY_Down_B[2]=0; iY_Up_B[2]=0; bPastiYB[2]=false; bExistsB[2]=false;
31iY_Down_B[3]=0; iY_Up_B[3]=0; bPastiYB[3]=false; bExistsB[3]=false;
32//iY_Down_B[4]=0; iY_Up_B[4]=0; bPastiYB[4]=false; bExistsB[4]=false;
33
34var iCards = 3;
35
36function AdjustScrollPositions() {
37	var iY,iWH = window.innerHeight;
38	var iSW = window.innerWidth;
39	
40	bExistsA = (iSW >= iMobileWidth && AnimationElementA.length === 1); // activate this.
41	if(bExistsA){
42		iY = AnimationElementA.offset().top;
43		iY_Down_A = iY - iWH + iWH/4; // top quater of the slice is visible on screen.
44		iY_Up_A = iY - iWH - 20; // 20px buffer.
45		bExistsA = (iY_Down_A > iY_Up_A); // sanity check.
46	}
47	
48	var i;for (i = 1; i <= iCards; i++) { 
49		bExistsB[i] = (iSW < iMobileWidth && AnimationElementB[i].length === 1); // activate this.
50		if(bExistsB[i]){
51			iY = AnimationElementB[i].offset().top;
52			iY_Down_B[i] = iY - iWH + iWH/4; // top quater of the slice is visible on screen.
53			iY_Up_B[i] = iY - iWH - 20; // 20px buffer.
54			bExistsB[i] = (iY_Down_B[i] > iY_Up_B[i]); // sanity check.
55		}
56	}
57}
58
59function PollScrollDownChanges() { // This routine must be very streamlined. Called several times a second.
60	if(!bRunPoller){return;} // exit if not meant to be running. 
61	var iY = window.pageYOffset;
62	var iSW = window.innerWidth;
63	
64	if(bExistsA && iSW >= iMobileWidth){
65		if(!bPastiYA && iY > iY_Down_A){
66			AnimationElementA.addClass('RunAnimation');
67			bPastiYA = true;
68		}
69		if(bPastiYA && iY <= iY_Up_A){ /* Remove only if user scrolls a certain way up */
70			AnimationElementA.removeClass('RunAnimation');
71			bPastiYA = false;
72		}
73	}
74	
75	if(iSW < iMobileWidth){
76		var i;for (i = 1; i <= iCards; i++) { 
77			if(bExistsB[i]){
78				if(!bPastiYB[i] && iY > iY_Down_B[i]){
79					AnimationElementB[i].addClass('RunAnimation');
80					bPastiYB[i] = true;
81				}
82				if(bPastiYB[i] && iY <= iY_Up_B[i]){ /* Remove only if user scrolls a certain way up */
83					AnimationElementB[i].removeClass('RunAnimation');
84					bPastiYB[i] = false;
85				}
86			}
87		}
88	}
89}
90
91// Deal with screen resizes. This is NOT a polling routine, but a trigger routine.
92var iLastSW = window.innerWidth;
93function RunOnScreenResize(){
94	
95	var iSW = window.innerWidth;
96	if(iSW !== iLastSW){
97		iLastSW = iSW;
98		
99		bRunPoller = false; // stop race conditions.
100		
101		// Stop all the animations
102		AnimationElementA.removeClass('RunAnimation');
103		bPastiYA = false;
104		var i;for (i = 1; i <= iCards; i++) { 
105			AnimationElementB[i].removeClass('RunAnimation');
106			bPastiYB[i] = false;
107		}
108		
109		AdjustScrollPositions(); // change scroll positions.
110		
111		bRunPoller = true; // fine to start up again.
112	}
113}
114	
115// Set iLastSW to 0, to avoid a race-condition, and ensure the code inside RunOnScreenResize actually runs.
116setTimeout(function(){iLastSW=0;RunOnScreenResize();}, 1000); // run after a second, to get more accurate values.
117window.addEventListener("resize", function(){RunOnScreenResize();}, false);
118
119window.setInterval(function(){PollScrollDownChanges();}, 100); // poll to see if user has scrolled down.
120
121});