//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" // 2024-04-11 수정
});
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,
});
ScrollTrigger.matchMedia({
"(min-width: 1025px)": function () {
var compIntro = gsap.timeline();
compIntro.fromTo({}, {}, {duration: 0.0001})
.fromTo(".group .con3 .for-pin .txt.step1 div", {opacity: 0, top: "30%"}, {opacity: 1, top: "50%"}, .001)
.fromTo(".group .con3 .for-pin .img.step1 img ", {scale: 1.2}, {scale: 1}, .001)
.fromTo(".group .con3 .for-pin .step2.left", {top: "100vh"}, {top: "0"}, .9)
.fromTo(".group .con3 .for-pin .step2.right", {top: "-100vh"}, {top: "0"}, .9)
.fromTo(".group .con3 .for-pin .txt.step2 div", {opacity: 0, top: "30%"}, {opacity: 1, top: "50%"}, 1.1)
.fromTo(".group .con3 .for-pin .img.step2 img ", {scale: 1.2}, {scale: 1}, 1.1)
.fromTo(".group .con3 .for-pin .step3.right", {top: "100vh"}, {top: "0"}, 1.9)
.fromTo(".group .con3 .for-pin .step3.left", {top: "-100vh"}, {top: "0"}, 1.9)
.fromTo(".group .con3 .for-pin .txt.step3 div", {opacity: 0, top: "30%"}, {opacity: 1, top: "50%"}, 2.1)
.fromTo(".group .con3 .for-pin .img.step3 img ", {scale: 1.2}, {scale: 1}, 2.1)
.fromTo({}, {}, {duration: 0.5})
var compIntroAni = ScrollTrigger.create({
animation: compIntro,
trigger: ".group .con3 .for-pin",
start: "0 top",
end: "650% bottom",
scrub: 1,
pin: true,
// markers: true,
});
},
"(max-width: 1024px)": function () {
var compIntro = gsap.timeline();
compIntro.fromTo({}, {}, {duration: 0.2})
.fromTo(".group .con3 .for-pin .img.step1 img", {scale: 1.2}, {scale: 1}, .1)
.fromTo(".group .con3 .for-pin .step1.left", {top: "100vh"}, {top: "0"}, .7)
.fromTo(".group .con3 .for-pin .step2.img", {top: "100vh"}, {top: "0"}, 1.4)
.fromTo(".group .con3 .for-pin .img.step2 img", {scale: 1.2}, {scale: 1}, 1.6)
.fromTo(".group .con3 .for-pin .step2.txt", {top: "100vh"}, {top: "0"}, 2.2)
.fromTo(".group .con3 .for-pin .step3.img", {top: "100vh"}, {top: "0"}, 2.8)
.fromTo(".group .con3 .for-pin .img.step3 img ", {scale: 1.2}, {scale: 1}, 3)
.fromTo(".group .con3 .for-pin .step3.txt", {top: "100vh"}, {top: "0"}, 3.6)
.fromTo({}, {}, {duration: 0.5})
var compIntroAni = ScrollTrigger.create({
animation: compIntro,
trigger: ".group .con3 .for-pin",
start: "0 top",
end: "500% bottom",
scrub: 1,
pin: true,
// markers: true,
});
},
})
