Line 4: | Line 4: | ||
var windowHeight = window.innerHeight; | var windowHeight = window.innerHeight; | ||
for (var i = 0; i < timesections.length; i++) { | for (var i = 0; i < timesections.length; i++) { | ||
− | timesections[i].style.marginTop = 80 * i + | + | timesections[i].style.marginTop = 80 * i + 10 + 'vh'; |
if (i % 2) timesections[i].classList.add('section-right'); | if (i % 2) timesections[i].classList.add('section-right'); | ||
else timesections[i].classList.add('section-left'); | else timesections[i].classList.add('section-left'); | ||
var newRounds = document.createElement('div'); | var newRounds = document.createElement('div'); | ||
newRounds.className = 'round'; | newRounds.className = 'round'; | ||
− | newRounds.style.marginTop = 'calc(' + ( | + | newRounds.style.marginTop = 'calc(' + (30 + 80 * i- timesections[i].scrollHeight/windowHeight/2) + 'vh - 3px)'; |
mainWrapper.appendChild(newRounds); | mainWrapper.appendChild(newRounds); | ||
} | } |
Revision as of 17:03, 19 October 2016
var mainWrapper = document.getElementById('wrapper'); var timesections = document.getElementsByTagName("section"); var length = timesections.length; var windowHeight = window.innerHeight; for (var i = 0; i < timesections.length; i++) {
timesections[i].style.marginTop = 80 * i + 10 + 'vh'; if (i % 2) timesections[i].classList.add('section-right'); else timesections[i].classList.add('section-left'); var newRounds = document.createElement('div'); newRounds.className = 'round'; newRounds.style.marginTop = 'calc(' + (30 + 80 * i- timesections[i].scrollHeight/windowHeight/2) + 'vh - 3px)'; mainWrapper.appendChild(newRounds);
}
var rounds = document.querySelectorAll("div.round"); var scrollPosition = window.pageYOffset; var ticking = false; var hasShown = new Array(length); for (var i = 0; i < length; i++) {
hasShown[i] = false;
} window.addEventListener('scroll', function(e) {
scrollPosition = window.pageYOffset; if (!ticking) { window.requestAnimationFrame(function() { for (var i = 0; i < length; i++) { if (!hasShown[i]) { if (scrollPosition > (timesections[i].offsetTop - timesections[i].scrollHeight / 2)) { timesections[i].classList.add("bounce-in"); rounds[i].classList.add("bounce"); hasShown[i] = true; } } ticking = false; } }); } ticking = true;
});