https://ik.co.kr/js/jquery.fade-in.js?ver=220620

1/**
2 *  jquery.fade-in.js
3 *  제작 : 베원 (com1.kr)
4 *
5 *  본 코드 사용시 이 주석을 유지해주시기 바랍니다.
6 *  이외에는 제약 없이 사용 가능합니다.
7 */
8
9/*
101. jquery.fade-in.js 를 head.sub.php에 넣습니다.
112. 스크롤시 fadeIn 하기를 원하는 요소 class에 fade-in 을 넣습니다.
123. (선택) fadeIn 속도를 지정합니다. (이 과정을 생략한 경우 기본 500ms로 작동합니다.)
13속도는 data-fade-in-speed 어트리뷰트를 통해 지정합니다
14(예제)
15<div class="fade-in" data-fade-in-speed="800">fade-in을 원하는 div</div>
16*/
17
18$(document).ready(function() {
19	$('.fade-in').css({"opacity":"0","position":"relative","top":"100px"});
20	triggerJqueryFadeIn()
21    $(window).scroll(triggerJqueryFadeIn);
22});
23var animateQueue = new Array();
24var ready = true;
25function triggerJqueryFadeIn() {
26	$('.fade-in').each( function(){
27		var object_top = $(this).offset().top;
28		var window_bottom = $(window).scrollTop() + $(window).height();
29		if( window_bottom > object_top ){
30			if($(this).css("opacity") == "0") animateQueue.push(this);
31		}
32	}); 
33	triggerJqueryFadeInQueue();
34}
35function triggerJqueryFadeInQueue() {
36	if(animateQueue.length != 0 && ready) {
37		ready = false;
38		$this = animateQueue.shift();
39		var speed = ($($this).attr("data-fade-in-speed") != undefined ? parseInt($($this).attr("data-fade-in-speed")) : 500);
40		$($this).animate({"opacity":"1", "top":"0px"}, speed, function() {
41			$($this).css("position","static");
42			ready = true;
43			triggerJqueryFadeInQueue();
44		});
45	}
46}