https://tengaramon-movie.com/js/fade.js

1// JavaScript Document
2
3var scrollAnimationClass = 'sa';
4var scrollAnimationShowClass = 'show';
5var triggerMarginDefault = 300;
6 
7var scrollAnimationElm = document.querySelectorAll('.' + scrollAnimationClass);
8var scrollAnimationFunc = function() {
9  var dataMargin = scrollAnimationClass + '_margin';
10  var dataTrigger = scrollAnimationClass + '_trigger';
11  var dataDelay = scrollAnimationClass + '_delay';
12  for(var i = 0; i < scrollAnimationElm.length; i++) {
13    var triggerMargin = triggerMarginDefault;
14    var elm = scrollAnimationElm[i];
15    var showPos = 0;
16    if(elm.dataset[dataMargin] != null) {
17      triggerMargin = parseInt(elm.dataset[dataMargin]);
18    }
19    if(elm.dataset[dataTrigger]) {
20      showPos = document.querySelector(elm.dataset[dataTrigger]).getBoundingClientRect().top + triggerMargin;
21    } else {
22      showPos = elm.getBoundingClientRect().top + triggerMargin;
23    }
24    if (window.innerHeight > showPos) {
25      var delay = (elm.dataset[dataDelay])? elm.dataset[dataDelay] : 0;
26      setTimeout(function(index) {
27        scrollAnimationElm[index].classList.add('show');
28      }.bind(null, i), delay);
29    }
30  }
31}
32window.addEventListener('load', scrollAnimationFunc);
33window.addEventListener('scroll', scrollAnimationFunc);