// 2024-03-08 스크립트 수정 // 2024-03-12 스크립트 수정 var _thisScroll = 0; var _isScrollTop; if ($(window).scrollTop() > $(".intro .con2").offset().top) { $("#subBody").removeClass("wide"); } $(window).on("scroll", function () { _isScrollTop = $(window).scrollTop(); if (_isScrollTop > _thisScroll) { // down if (_isScrollTop > 0) { if ($(window).scrollTop() > $(".intro .con2").offset().top) { $(".intro .con1").addClass("scroll"); } } } if (_isScrollTop < _thisScroll) { // up if ($(window).scrollTop() < $(".intro .con2").offset().top) { $(".intro .con1").removeClass("scroll"); $("#subBody").addClass("wide"); $("#subBody h2 p").css("opacity" , "0").css("transform" , "translate(0px, -500px)"); } } _thisScroll = _isScrollTop; }); $(window).scroll(); gsap.fromTo("#subBody h2 p",{ transform: 'translate(0, 100px)', opacity: 0, ease: Power3.easeOut }, { duration: 0.8, 'transform': 'translate(0, 0)', opacity: 1, ease: Power3.easeOut}); gsap.fromTo("#subBody h2 p", { duration: 0.8, transform: 'translate(0, 0)', opacity: 1, ease: Power3.easeOut }, { scrollTrigger: { trigger: ".intro .con1", start: "top top", end: "+=95%", scrub: 1, }, y: -500, opacity: 0, } ); ScrollTrigger.matchMedia({ "(min-width: 1025px)": function() { gsap.to(".intro .con1 .bg", { scrollTrigger: { trigger: ".intro .con1", start: "top top", end: "+=150%", // markers: true, scrub : 1, }, y : -500, // width: "100%", height: "1200rem" }); gsap.to(".intro .con2 .deco", { scrollTrigger: { trigger: ".intro .con1", start: "215% bottom", end: "215% bottom", // markers: true, scrub : 1, }, 'transform': 'skew(0, 0deg)' }); }, "(max-width: 1024px)": function() { gsap.to(".intro .con1 .bg", { scrollTrigger: { trigger: ".intro .con1", start: "top top", end: "+=70%", // markers: true, scrub : 1, }, y : -200, // width: "100%", height: "100vh" }); gsap.to(".intro .con2 .deco", { scrollTrigger: { trigger: ".intro .con1", start: "235% bottom", end: "235% bottom", // markers: true, scrub : 1, }, 'transform': 'skew(0, 0deg)' }); }, }); gsap.to(".intro .con1 .inner", { scrollTrigger: { trigger: ".intro .con1", start: "top top", end: "+=150%", // markers: true, scrub : 1, }, y : -700, opacity: 0, });