https://amamuseum.org.tw/public/assets/js/timeline.js

1(function(){
2    // Vertical Timeline - by CodyHouse.co
3	function VerticalTimeline( element ) {
4		this.element = element;
5		this.blocks = this.element.getElementsByClassName("js-cd-block");
6		this.images = this.element.getElementsByClassName("js-cd-img");
7		this.contents = this.element.getElementsByClassName("js-cd-content");
8		this.offset = 0.8;
9		this.hideBlocks();
10	};
11
12	VerticalTimeline.prototype.hideBlocks = function() {
13		//hide timeline blocks which are outside the viewport
14		if ( !"classList" in document.documentElement ) {
15			return;
16		}
17		var self = this;
18		for( var i = 0; i < this.blocks.length; i++) {
19			(function(i){
20				if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
21					self.images[i].classList.add("cd-is-hidden"); 
22					self.contents[i].classList.add("cd-is-hidden"); 
23				}
24			})(i);
25		}
26	};
27
28	VerticalTimeline.prototype.showBlocks = function() {
29		if ( ! "classList" in document.documentElement ) {
30			return;
31		}
32		var self = this;
33		for( var i = 0; i < this.blocks.length; i++) {
34			(function(i){
35				if( self.contents[i].classList.contains("cd-is-hidden") && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
36					// add bounce-in animation
37					self.images[i].classList.add("cd-timeline__img--bounce-in");
38					self.contents[i].classList.add("cd-timeline__content--bounce-in");
39					self.images[i].classList.remove("cd-is-hidden");
40					self.contents[i].classList.remove("cd-is-hidden");
41				}
42			})(i);
43		}
44	};
45
46	var verticalTimelines = document.getElementsByClassName("js-cd-timeline"),
47		verticalTimelinesArray = [],
48		scrolling = false;
49	if( verticalTimelines.length > 0 ) {
50		for( var i = 0; i < verticalTimelines.length; i++) {
51			(function(i){
52				verticalTimelinesArray.push(new VerticalTimeline(verticalTimelines[i]));
53			})(i);
54		}
55
56		//show timeline blocks on scrolling
57		window.addEventListener("scroll", function(event) {
58			if( !scrolling ) {
59				scrolling = true;
60				(!window.requestAnimationFrame) ? setTimeout(checkTimelineScroll, 250) : window.requestAnimationFrame(checkTimelineScroll);
61			}
62		});
63	}
64
65	function checkTimelineScroll() {
66		verticalTimelinesArray.forEach(function(timeline){
67			timeline.showBlocks();
68		});
69		scrolling = false;
70	};
71})();