LEO Javascript

Javascript für die Slideshow

Die Slideshow selbst wird nur durch CSS animiert. Das Javascript ist nur für das Pausieren zuständig, denn auf Touchscreens gibt es kein :hover, sondern das Event touchstart und touchend mittels Javascript.

(function () {
   var slides = document.querySelectorAll("#onframe figure");
   for (var i=0; i<slides.length; i++) {
      slides[i].ontouchstart =
      slides[i].onmouseover = function () {
         this.classList.add("toggle");
         document.querySelector("#slider").classList.add("toggle");
         for (var j=0; j<slides.length; j++) {
         slides[j].style.animationPlayState = "paused";
      }
   }
   slides[i].ontouchend =
   slides[i].onmouseout = function () {
      this.classList.remove("toggle");
      document.querySelector("#slider").classList.remove("toggle");
      for (var j=0; j<slides.length; j++) {
         slides[j].style.animationPlayState = "running";
      }
   }
}
})();

Smooth Scroll

Ein Klick auf das Maussymbol am Ende der Seite scrollt die Seite nach oben. Das Maussymbol ist fest im Fuß der Seite und erscheint beim Scrollen nicht permanent. Es macht keinen Sinn, den Benutzer nach oben zu holen, bevor er das Ende der Seite erreicht hat.

/** Smooth scroll to top https://gist.github.com/andjosh/6764939 **/
(function () {
var mousebutton = document.querySelector(".mousebutton");

mousebutton.onclick = function () {
   scrollTo(document.body, 0, 850);   
}
    
function scrollTo(element, to, duration) {
   var start = element.scrollTop,
    change = to - start,
   currentTime = 0,
   increment = 20;
        
   var animateScroll = function(){        
      currentTime += increment;
      var val = Math.easeInOutQuad(currentTime, start, change, duration);
      element.scrollTop = val;
      if(currentTime < duration) {
         setTimeout(animateScroll, increment);
      }
   };
   animateScroll();
}

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
   t /= d/2;
   if (t < 1) return c/2*t*t + b;
   t--;
   return -c/2 * (t*(t-2) - 1) + b;
};

})();

Breakpoints und Monitorbreite anzeigen

Das Breakpoint-Script ist für die Zeit der Entwicklung gedacht und wird gelöscht, wenn die Seiten online gehen.