Difference between revisions of "Template:USTC-Software/js/timeline"

Line 9: Line 9:
 
     var newRounds = document.createElement('div');
 
     var newRounds = document.createElement('div');
 
     newRounds.className = 'round';
 
     newRounds.className = 'round';
−
     newRounds.style.marginTop = 'calc(' + (10 + 80 * i + ((timesections[i].scrollHeight)/windowHeight)/2)+ 'vh - 3px)';
+
     newRounds.style.marginTop = 'calc(' + (10 + 80 * i + ((timesections[i].scrollHeight)/windowHeight))+ 'vh - 3px)';
 
     mainWrapper.appendChild(newRounds);
 
     mainWrapper.appendChild(newRounds);
 
}
 
}

Revision as of 22:51, 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(' + (10 + 80 * i + ((timesections[i].scrollHeight)/windowHeight))+ '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;

});