https://www.niken.jp/assets/js/animate-sgn-1.3.js

1/*!
2 * animate-sgn-1.3.js
3 * http://www.sangonana.jp/
4 *
5 * Copyright 2017, 357 CO.,LTD.
6 * 株式会社357
7 *
8 */
9
10function animateSgn(option){
11  /*
12  selector : アニメーション要素のセレクタ
13  baseLine : 発火ライン
14              1.0 : ウィンドウ枠内最下部(表示域に入った瞬間)
15              0.5 : ウィンドウ枠内中央
16                0 : ウィンドウ枠内最上部
17  pcAllow  : PC表示時の作動許可(true)
18  spAllow  : スマホ表示時の作動許可(true)
19  tabAllow : タブレット表示時の作動許可(true)
20  recheck  : スクロール毎にoffset値を更新
21  */
22  if( option === undefined ) option = [];
23  if( option.selector === undefined ) option.selector = '.item';
24  if( option.baseline === undefined ) option.baseline = 1.0;
25  if( option.pcAllow  === undefined ) option.pcAllow = true;
26  if( option.spAllow  === undefined ) option.spAllow = true;
27  if( option.tabAllow === undefined ) option.tabAllow = true;
28  if( option.recheck  === undefined ) option.recheck = false;
29
30  //端末オプション
31  //var device = callScreenType();
32  var device = deviceCheck;
33  if( ( !option.spAllow && device === 'sp' ) || ( !option.tabAllow && device === 'tab' ) || ( !option.pcAllow && device === 'pc' ) ){
34    return false;
35  }
36
37  var $item = $(option.selector);
38  var initWidth = window.innerWidth;
39  var itemOffsetTop      = [],
40      itemParamDuration  = [],
41      itemParamDelay     = [],
42      itemParamOffset    = [],
43      itemParamIteration = [],
44      itemActionFlag     = [];
45
46  //要素を隠す
47  $item.wrap('<div class="hidden"/>');
48
49  //ロード時設定
50  $(window).on('load', function(){
51
52    $item.each(function(i){
53      var $thisItem = $(this);
54      //制御フラグを初期化
55      itemActionFlag[i] = true;
56      //各要素のoffset値を取得
57      itemOffsetTop[i] = parseInt($thisItem.offset().top);
58      /*
59      各要素のパラメータ取得
60      data-duration  : アニメーション速度(秒単位) 例: 1s, 0.5s, 0.75s
61      data-delay     : 発火遅延時間(同上)
62      data-offset    : 発火Y座標(px単位) 例: 10, 100, 250
63      data-iteration : 繰り返し回数 例: 2, 10, infinite
64      */
65      var dataDuration  = $thisItem.attr('data-duration'),
66          dataDelay     = $thisItem.attr('data-delay'),
67          dataOffset    = $thisItem.attr('data-offset'),
68          dataIteration = $thisItem.attr('data-iteration');
69      if( dataDuration  ) itemParamDuration[i] = dataDuration;
70      if( dataDelay     ) itemParamDelay[i] = dataDelay;
71      if( dataIteration ) itemParamIteration[i] = dataIteration;
72      if( dataOffset ){
73        itemParamOffset[i] = parseInt(dataOffset);
74        itemOffsetTop[i] += itemParamOffset[i];
75      }else{
76        itemParamOffset[i] = 0;
77      }
78      //console.log('[load:'+i+'] offset:'+itemOffsetTop[i]);
79      //console.log('[load:'+i+'] Duration:'+dataDuration+' / Delay:'+dataDelay+' / Iteration:'+dataIteration+' / Offset:'+dataOffset);
80    });
81    //発火チェック
82    actionPointWatch();
83
84  });
85
86  //ウィンドウリサイズ時に再取得
87  $(window).on('resize', function() {
88    var currentWidth = window.innerWidth;
89    //横幅の変更がなければ無視
90    if (initWidth !== currentWidth){
91      // 横幅を更新
92      initWidth = currentWidth;
93      //offset値を更新
94      $item.each(function(i){
95        itemOffsetTop[i] = parseInt($(this).offset().top) + itemParamOffset[i];
96        //console.log('[resize:'+i+'] itemOffsetTop:'+itemOffsetTop[i]+' itemParamOffset:'+ itemParamOffset[i]);
97      });
98      //発火チェック
99      actionPointWatch();
100    }
101  });
102
103  //スクロール毎に発火チェック
104  $(window).on('scroll', function(){
105    if(!option.recheck){
106      actionPointWatch();
107    }else{
108      //recheck:同時にオフセット値を更新
109      $item.each(function(i){
110        itemOffsetTop[i] = parseInt($(this).offset().top) + itemParamOffset[i];
111        //console.log('[recheck:'+i+'] itemOffsetTop:'+itemOffsetTop[i]+' itemParamOffset:'+ itemParamOffset[i]);
112      });
113      actionPointWatch();
114    }
115  });
116
117  //発火チェック本体
118  function actionPointWatch(){
119
120    var scroll = $(window).scrollTop() + $(window).height()*option.baseline;
121    $item.each(function(i){
122      var $thisItem = $(this);
123      if( (itemOffsetTop[i] <= scroll) && itemActionFlag[i] ){
124        //複数回起動防止
125        itemActionFlag[i] = false;
126        //各パラメータ反映
127        if(itemParamDuration[i]){
128          $thisItem.css({
129            //'-webkit-animation-duration':itemParamDuration[i],
130            'animation-duration':itemParamDuration[i]
131          });
132        }
133        if(itemParamDelay[i]){
134          $thisItem.css({
135            //'-webkit-animation-delay':itemParamDelay[i],
136            'animation-delay':itemParamDelay[i]
137          });
138        }
139        if(itemParamIteration[i]){
140          $thisItem.css({
141            //'-webkit-animation-iteration-count':itemParamIteration[i],
142            'animation-iteration-count':itemParamIteration[i]
143          });
144        }
145        //アニメーション実行
146        $thisItem.unwrap('.hidden').addClass('animated');
147        //console.log('[action:'+i+'] '+itemOffsetTop[i]);
148      }
149    });

150
151  }
152
153}
154
155//デバイス判別
156var deviceCheck = (function(){
157  var ua = navigator.userAgent;
158  if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
159    return 'sp';
160  } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
161    return 'tab';
162  } else {
163    return 'pc';
164  }
165})();