https://webukatu.com/assets/js/plugins/fadeInAnimatePlugin.js?1598162752

1/*
2 Version: 1.0
3  Author: Kazuki Saito
4 Website: http://webukatu.com
5 Website: http://crazy-wp.com
6    Docs: 
7    Repo: 
8  Issues: 
9 License: MIT
10 */
11(function($) {
12  // プラグイン定義
13  $.fn.animateFadeIn = function(options){
14    // DOM変数として再定義
15    var $this = this;
16
17    // オプションとデフォルト値を設定する
18    var defaults = {
19      movement : 40, //移動量（px）
20      duration : 500, //アニメーション時間
21      direction : 'none', //アニメーション方向（L：左へ、T：上へ、R：右へ、B：下へ、none：移動させない）
22      
23    };
24    // オプションを変数へ格納
25    var setting = $.extend(defaults, options);
26    // メイン処理の関数
27    var doAnimate = function($target, movement, durationTime, direction){
28      // 複数DOM対応のためのループ処理
29      for(var i = 0; i < $target.length; i++){
30          var delay = 0;
31          delay = $target.eq(i).data('delay');
32        // DOMの座標取得
33        var posY = $target.eq(i).offset().top;
34        // スクロール量＋ウィンドウの高さ分の座標がDOM座標を上回る場合
35        if(posY <= (scrollY + $(window).height())){
36          // アニメーション方向別にアニメーション
37          if(direction === 'T'){
38            $target.eq(i).delay(delay).velocity({
39              opacity: 1,
40              translateY: '-'+movement+'px',
41            },{
42              duration: durationTime,
43            });
44          }else if(direction === 'R'){
45            $target.eq(i).delay(delay).velocity({
46              opacity: 1,
47              translateX: movement+'px',
48            },{
49              duration: durationTime,
50            });
51          }else if(direction === 'L'){
52            $target.eq(i).delay(delay).velocity({
53              opacity: 1,
54              translateX: '-'+movement+'px',
55            },{
56              duration: durationTime,
57            });
58          }else if(direction === 'B'){
59            $target.eq(i).delay(delay).velocity({
60              opacity: 1,
61              translateY: movement+'px',
62            },{
63              duration: durationTime,
64            });
65          }else if(direction === 'none'){
66            $target.eq(i).delay(delay).velocity({
67              opacity: 1,
68            },{
69              duration: durationTime,
70            });
71          }
72        }
73      }
74    };
75    
76    //初期処理関数
77    var init = function(){
78	    $this.css('opacity',0);
79      //アニメーション方向別にDOMのスタイルを調整
80      if(setting.direction === 'T'){
81        $this.css({'position':'relative', 'top': setting.movement+'px', 'opacity':'0'});
82      }else if(setting.direction === 'R'){

83        $this.css({'position':'relative', 'left': '-'+setting.movement+'px', 'opacity':'0'});
84      }else if(setting.direction === 'L'){
85        $this.css({'position':'relative', 'left': setting.movement+'px', 'opacity':'0'});
86      }else if(setting.direction === 'B'){
87        $this.css({'position':'relative', 'top': '-'+setting.movement+'px', 'opacity':'0'});
88      }else if(setting.direction === 'none'){
89        $this.css({'opacity':'0'});
90      }
91    };
92    
93    init();
94    
95    $(window).on('scroll', function(){
96      doAnimate($this, setting.movement, setting.duration, setting.direction);
97    });
98
99    //メソッドチェーン対応(thisを返す)
100    return(this);
101  };
102})(jQuery);