https://ariran-yakiniku-shinjuku.com/lib/fade.js

1$(window).on('load',function(){
2    // fade-in
3    // $('.fade-in').css("opacity","1");
4    $(window).scroll(function (){
5        $('.fade-in').each(function(){
6            var imgPos = $(this).offset().top;
7            var scroll = $(window).scrollTop();
8            var windowHeight = $(window).height();
9
10            if (scroll > imgPos - windowHeight + windowHeight/5){
11                $(this).css("opacity","1" );
12            } else {
13                $(this).css("opacity","0" );
14            }
15        });
16    });
17
18
19    // fade-up
20    // $('.fade-up').css({
21    //         'opacity':'1'
22    // });
23    $(window).scroll(function (){
24        $('.fade-up').each(function(){
25            var imgPos = $(this).offset().top;
26            var scroll = $(window).scrollTop();
27            var windowHeight = $(window).height();
28
29            if (scroll > imgPos - windowHeight){
30                $(this).css({
31                        '-webkit-transition': 'opacity 1s;',
32                        '-moz-transition': 'opacity 1s;',
33                        '-ms-transition': 'opacity 1s;',
34                        '-o-transition': 'opacity 1s;',
35                        'transition': 'opacity 1s;',
36                        'opacity':'1',
37                        'transform':'translateY(0)',
38                        '-webkit-transform':'translateY(0)',
39                        '-moz-transform':'translateY(0)',
40                        '-ms-transform':'translateY(0)'
41                });
42            } else {
43                $(this).css({
44                        'opacity':'0',
45                        'transform':'translateY(200px)',
46                        '-webkit-transform':'translateY(200px)',
47                        '-moz-transform':'translateY(200px)',
48                        '-ms-transform':'translateY(200px)'
49                });
50            }
51        });
52    });
53});