blob: df0ef5856378efe155665c6e87e0832cbc60cf72 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
(function(){
// Vertical Timeline - by CodyHouse.co (modified)
function VerticalTimeline( element ) {
this.element = element;
this.blocks = this.element.getElementsByClassName("timeline-item");
this.images = this.element.getElementsByClassName("timeline-icon");
this.contents = this.element.getElementsByClassName("timeline-content");
this.dates = this.element.getElementsByClassName("timeline-date");
this.offset = 0.8;
this.hideBlocks();
};
VerticalTimeline.prototype.hideBlocks = function() {
if ( !"classList" in document.documentElement ) {
return; // no animation on older browsers
}
//hide timeline blocks which are outside the viewport
var self = this;
for( var i = 0; i < this.blocks.length; i++) {
(function(i){
if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
self.images[i].classList.add("timeline-icon--hidden");
self.contents[i].classList.add("timeline-content--hidden");
self.dates[i].classList.add("timeline-date--hidden");
}
})(i);
}
};
VerticalTimeline.prototype.showBlocks = function() {
if ( ! "classList" in document.documentElement ) {
return;
}
var self = this;
for( var i = 0; i < this.blocks.length; i++) {
(function(i){
if((self.contents[i].classList.contains("timeline-content--hidden") || self.contents[i].classList.contains("timeline-content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
// add bounce-in animation
self.images[i].classList.add("timeline-icon--bounce-in");
self.contents[i].classList.add("timeline-content--bounce-in");
self.dates[i].classList.add("timeline-date--bounce-in");
self.images[i].classList.remove("timeline-icon--hidden");
self.contents[i].classList.remove("timeline-content--hidden");
self.dates[i].classList.remove("timeline-date--hidden");
self.images[i].classList.remove("timeline-icon--bounce-out");
self.contents[i].classList.remove("timeline-content--bounce-out");
self.dates[i].classList.remove("timeline-date--bounce-out");
}
})(i);
}
};
VerticalTimeline.prototype.hideBlocksScroll = function () {
if ( ! "classList" in document.documentElement ) {
return;
}
var self = this;
for( var i = 0; i < this.blocks.length; i++) {
(function(i){
if(self.contents[i].classList.contains("timeline-content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
self.images[i].classList.remove("timeline-icon--bounce-in");
self.contents[i].classList.remove("timeline-content--bounce-in");
self.dates[i].classList.remove("timeline-date--bounce-in");
self.images[i].classList.add("timeline-icon--bounce-out");
self.contents[i].classList.add("timeline-content--bounce-out");
self.dates[i].classList.add("timeline-date--bounce-out");
}
})(i);
}
}
var verticalTimelines = document.getElementsByClassName("timeline"),
verticalTimelinesArray = [],
scrolling = false;
if( verticalTimelines.length > 0 ) {
for( var i = 0; i < verticalTimelines.length; i++) {
(function(i){
verticalTimelinesArray.push(new VerticalTimeline(verticalTimelines[i]));
})(i);
}
//show timeline blocks on scrolling
window.addEventListener("scroll", function(event) {
if( !scrolling ) {
scrolling = true;
(!window.requestAnimationFrame) ? setTimeout(checkTimelineScroll, 250) : window.requestAnimationFrame(checkTimelineScroll);
}
});
function animationEnd(event) {
if (event.target.classList.contains("timeline-icon--bounce-out")) {
event.target.classList.add("timeline-icon--hidden");
event.target.classList.remove("timeline-icon--bounce-out");
} else if (event.target.classList.contains("timeline-content--bounce-out")) {
event.target.classList.add("timeline-content--hidden");
event.target.classList.remove("timeline-content--bounce-out");
} else if (event.target.classList.contains("timeline-date--bounce-out")) {
event.target.classList.add("timeline-date--hidden");
event.target.classList.remove("timeline-date--bounce-out");
}
}
window.addEventListener("animationend", animationEnd);
window.addEventListener("webkitAnimationEnd", animationEnd);
}
function checkTimelineScroll() {
verticalTimelinesArray.forEach(function(timeline){
timeline.showBlocks();
timeline.hideBlocksScroll();
});
scrolling = false;
};
})();
|
