+
© Disney
-
+
보러가기
@@ -785,7 +786,7 @@
© Disney/Pixar
-
+
보러가기
@@ -819,7 +820,7 @@
© 2025 Marvel
-
+
보러가기
@@ -1231,11 +1232,6 @@
100,
"easeInOutQuart"
);
-
- // 대안 방법: scrollTo 사용
- // setTimeout(function () {
- // $tabNavigation[0].scrollTo();
- // }, 50);
}
}
@@ -1336,6 +1332,10 @@
var handleScroll = throttle(function () {
var scrollTop = $(window).scrollTop();
+ if (scrollTop <= 50) {
+ $("#overview .parallax-bg").removeClass("reveal2");
+ }
+
// 각 탭 콘텐츠의 위치 확인
$(".tabContent").each(function () {
var $this = $(this);
@@ -1391,10 +1391,8 @@
// 해시로 접근한 경우에도 해당 탭으로 스크롤 이동
setTimeout(function () {
var $targetContent = $(hashTab);
- console.log("🚀 ~ 88888 $targetContent:", $targetContent);
if ($targetContent.length) {
var scrollTop = $targetContent.offset().top;
- console.log("🚀 ~ 99999999878787878 scrollTop:", scrollTop);
window.scrollTo(0, scrollTop);
}
}, 10);
@@ -1413,7 +1411,7 @@
// ScrollMagic 컨트롤러 초기화
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
- triggerHook: 50,
+ triggerHook: 0.4, // 화면 중간에서 트리거 (0 = 상단, 0.5 = 중간, 1 = 하단)
reverse: true,
},
});
@@ -1431,24 +1429,6 @@
// { id: "#information", class: ".section9" },
];
- // 섹션 배경 패럴랙스 효과 (section1 제외)
- // sections.forEach(function (section, index) {
- // if (section.id !== "#overview") {
- // var tween2 = gsap.to(section.class + " .parallax-bg", {
- // y: "-50%",
- // duration: 1,
- // ease: "none",
- // });
- // var parallaxScene = new ScrollMagic.Scene({
- // triggerElement: section.id,
- // duration: "200%",
- // offset: -200,
- // })
- // .setTween(tween2)
- // .addTo(controller);
- // }
- // });
-
// 네비게이션 탭 클릭 시 즉시 스크롤 이동
$(".tabLink").on("click", function (e) {
e.preventDefault();
@@ -1478,21 +1458,9 @@
.on("enter", function () {
$(".tabLink").removeClass("active");
$('.tabLink[href="' + section.id + '"]').addClass("active");
-
- // 현재 섹션에 따른 네비게이션 색상 변경
- // var $tabNav = $(".tabNavigation");
- // if (index >= 1) {
- // $tabNav.addClass("is_black");
- // } else {
- // $tabNav.removeClass("is_black");
- // }
})
.on("leave", function () {
// console.log("🚀 ~ NAV LEAVE", section.id);
-
- if (section.id == "#DisneyTheme") {
- // $(".hederWarp_n").addClass("sticky");
- }
})
.on("end", function (event) {
// console.log("🚀 ~ NAV END", section.id, "scrollTop:", $(window).scrollTop());
@@ -1502,57 +1470,22 @@
navScenes.push(navScene);
});
- // 섹션 간 전환 시 페이드 효과
- // sections.forEach(function (section, index) {
- // // var fadeTween = gsap.fromTo(section.class, { opacity: 0.8, scale: 0.95 }, { opacity: 1, scale: 1, duration: 0.6, ease: "power2.out" });
-
- // console.log("🚀 ~ 333 section", section);
-
- // var fadeScene = new ScrollMagic.Scene({
- // triggerElement: section.id,
- // duration: "80%",
- // offset: -50,
- // })
- // // .setTween(fadeTween)
- // .addTo(controller);
- // });
-
// 디버그 모드 - 트리거 인디케이터 표시
controller.addScene(navScenes);
var startpin = new ScrollMagic.Scene({
- duration: 700,
+ duration: 100,
})
.setPin("section#overview")
- .on("enter", function () {
- $(".hederWarp_n").addClass("sticky");
- })
- .on("leave", function () {
- $(".hederWarp_n").removeClass("sticky");
- })
.addTo(controller);
// 모든 씬에 인디케이터 추가
sections.forEach(function (section, index) {
if (section.id === "#overview") {
- var abracadabra = TweenMax.fromTo(
- section.class + " .content-item[data-reveal='2']",
- 1,
- { y: 30, opacity: 0 },
- {
- y: 0,
- opacity: 1,
- duration: 0.8,
- ease: "power2.out",
- onStart: function () {
- $("#overview .parallax-bg").addClass("reveal2");
- },
- }
- );
// section1의 씬들에 인디케이터 추가
var scene1 = new ScrollMagic.Scene({
triggerElement: section.id,
- duration: "50%",
+ duration: "10%",
offset: 0,
})
.setTween(
@@ -1579,17 +1512,31 @@
var scene2 = new ScrollMagic.Scene({
triggerElement: section.id,
- duration: "100%",
+ duration: "0",
offset: 0,
})
// .addIndicators({ name: "Section1 - Description" })
.addTo(controller);
new ScrollMagic.Scene({
- offset: 20,
- duration: 180,
+ offset: 0,
+ duration: 0.2,
})
- .setTween(abracadabra)
+ .setTween(
+ TweenMax.fromTo(
+ section.class + " .content-item[data-reveal='2']",
+ { y: 30, opacity: 0 },
+ {
+ y: 0,
+ opacity: 1,
+ duration: 0.2,
+ ease: "power2.out",
+ onStart: function () {
+ $("#overview .parallax-bg").addClass("reveal2");
+ },
+ }
+ )
+ )
.addTo(controller);
} else {
// 다른 섹션들의 씬에 인디케이터 추가
@@ -1599,33 +1546,20 @@
offset: 0,
})
.on("enter", function () {
- $(".hederWarp_n").removeClass("sticky");
+ var bgMap = {
+ "#DisneyTheme": "bg1",
+ "#DisneyPixarTheme": "bg2",
+ "#MarvelTheme": "bg3",
+ "#NationalGeographicTheme": "bg4",
+ "#ComingSoon": "bg5",
+ };
- switch (section.id) {
- case "#DisneyTheme":
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg1", { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
- break;
- case "#DisneyPixarTheme":
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg2", { opacity: 1 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
- break;
- case "#MarvelTheme":
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg3", { opacity: 1 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
- break;
- case "#NationalGeographicTheme":
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg4", { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
- break;
- case "#ComingSoon":
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
- TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg5", { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
- break;
- default:
- // 해당하지 않는 경우 모든 parallax-bg의 opacity를 0으로 설정
- TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, ease: "power2.out" });
- break;
+ var targetBg = bgMap[section.id];
+ if (targetBg) {
+ TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, duration: 0.2, ease: "power2.out", zIndex: 0 });
+ TweenMax.to(".parallax-bg-wrap .parallax-bg." + targetBg, { opacity: 1, duration: 0.2, ease: "power2.out" });
+ } else {
+ TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, ease: "power2.out" });
}
})
.on("leave", function () {
@@ -1644,14 +1578,8 @@
})
.setTween(gsap.fromTo(section.class + " .content-item", { y: 50, opacity: 1 }, { y: 0, opacity: 1, duration: 0.2, ease: "power2.out" }))
- .addIndicators({ name: "Section" + section.id + (index + 1) })
+ // .addIndicators({ name: "Section" + section.id + (index + 1) })
.addTo(controller);
-
- // var scene = new ScrollMagic.Scene({
- // triggerElement: "#ComingSoon",
- // duration: "0",
- // offset: 0,
- // });
}
});
});