DHTML 안먹히는 소스요~ 채택완료

</p>

<p><!-- CONTENTS :: HISTORY -->

<script>

    var front = {

        _scrollTop:null, // 현재 스크롤탑

        _winW:null, // 윈도우 너비

        _winH:null, // 윈도우 높이

        controller1:null, // 스크롤매직 컨트롤러1

        controller2:null, // 스크롤매직 컨트롤러2</p>

<p>        init:function () {

            this.yearNumberAnim();

            this.activeYearAnim(); // 배경 패럴랙스 효과

        },</p>

<p>        // 년대 고정

        yearNumberAnim:function () {

            ScrollTrigger.matchMedia({

                // PC 화면일 때

                "(min-width:1099px)":function () {

                    var items = gsap.utils.toArray('.txt-year'); // .txt-year 요소 배열로 선택</p>

<p>                    items.forEach(function (item) {

                        var $this = $(item);

                        var parents = $this.parents(".item-history"); // 부모 요소의 높이를 지정하고

                        var itemH = function () {

                            return parents.height() - $(item).innerHeight();

                        }; // 부모 요소의 높이 값 함수

                        var pcYearTl = gsap.timeline({

                            scrollTrigger:{

                                trigger:item,

                                start:"top 50%",

                                // end:"+=" + itemH(), // 끝 지점을 함수로 지정할 시, update될 때 마다(리사이즈 될 때마다) 재위치 시켜줌

                                end:(function () { return "+=" + (parents.height() - $(item).innerHeight()) }), // ES5 대응하려면 함수 형태로 "+=" + "string 또는 number" 형태로 return 해야 함

                                // 또는

                                // end:(function () { return "+=" + itemH() }),

                                pin:true, // 스크롤에 따라 고정

                                toggleActions:"play none none reverse", // onEnter일 때 play, onLeaveBack일 때 reverse

                            }

                        });

                        pcYearTl.set(item, { opacity:0 }); // 초기상태를 설정하는 방식도 있음

                        pcYearTl.to(item, { opacity:1, duration:0.55, ease:'power1.ease' });

                    });

                },</p>

<p>                // 모바일일 때

                "(max-width:1098px)":function () {

                    var items = gsap.utils.toArray('.txt-year'); // .txt-year 요소 gsap 배열로 선택</p>

<p>                    items.forEach(function (item) {

                        var $this = $(item);

                        var parents = $this.parents(".item-history"); // 부모 요소의 높이를 지정하고

                        var itemH = function () {

                            return parents.height() - $(item).innerHeight();

                        }

                        var mobileYearTl = gsap.timeline({

                            scrollTrigger:{

                                trigger:item,

                                start:"top 90%",

                                end:"+=" + itemH(),

                                toggleActions:"play none none reverse",

                            }

                        });

                        mobileYearTl.set(item, { y:15, opacity:0 }) // 초기상태를 설정하는 방식도 있음

                        mobileYearTl.to(item, { y:0, opacity:1, duration:0.45, ease:'power1.ease' })

                    });

                }

            });</p>

<p>        },</p>

<p>        // 해당 연도 active + line처리

        activeYearAnim:function () {

            var items = gsap.utils.toArray('.txt-yearly'); // .txt-year 요소 배열로 선택</p>

<p>            items.forEach(function (item) {

                var txtYearly = gsap.timeline({

                    scrollTrigger:{

                        trigger:item,

                        start:"top 50%",

                        toggleClass:"active" // 토글 클래스 방식

                    }

                });

            });

        },</p>

<p>        // line 가운데 고정처리 (pc)

        lineFixAnim:function () {

            var _scrollTop = $(window).scrollTop(); // 스크롤 탑값

            var $line = $('.item-history:first-child .txt-yearly .line');

            var lineScrollTop = $line.offset().top; // cocoa active 높이

            var lineCssHeight = (_scrollTop + (front._winH / 2)) - lineScrollTop;

            var lastInfoHeight = $('.item-history:last-child .info-wrap:last-child').innerHeight();

            var historyWrapHeight = $('.history-list-wrap').innerHeight() - lastInfoHeight * 1.5;</p>

<p>            if ((_scrollTop < lineScrollTop - (front._winH / 2))) {

                $line.css('opacity', 0)

            } else if ((_scrollTop > lineScrollTop - (front._winH / 2)) && lineCssHeight < historyWrapHeight) {

                $line.css({ 'height':lineCssHeight, 'opacity':1 });

            }

        }

    };</p>

<p>    $(document).ready(function () {

        front.init();</p>

<p>        $(document).resize(function () {

            front._winW = $(window).innerWidth();

            front._winH = $(window).innerHeight();

            front.lineFixAnim();

        }).trigger('resize');</p>

<p>        $(document).scroll(function () {

            front._scrollTop = $(window).scrollTop();

            front._winW = $(window).innerWidth();

            front._winH = $(window).innerHeight();

            front.lineFixAnim();

        }).trigger('scroll');

    });

</script></p>

<p>