@@ -1196,10 +1196,11 @@
};
}
- // 탭 스크롤 함수 (공통)
+ // 탭 스크롤 함수 (공통) - DOM 쿼리 최적화
+ var $tabNavigation = $(".tabNavigation");
+ var $tabList = $(".tabList");
+
function scrollToTab(targetTab, $clickedTab) {
- var $tabNavigation = $(".tabNavigation");
- var $tabList = $(".tabList");
var tabNavigationWidth = $tabNavigation.width();
var tabListWidth = $tabList[0].scrollWidth;
@@ -1235,8 +1236,41 @@
}
}
+ // 비디오 자동 재생 처리 (Intersection Observer)
+ function initVideoAutoplay() {
+ if ("IntersectionObserver" in window) {
+ const videoObserver = new IntersectionObserver(
+ function (entries) {
+ entries.forEach(function (entry) {
+ if (entry.isIntersecting && entry.target.hasAttribute("data-autoplay")) {
+ entry.target.play().catch(function (err) {
+ // 자동 재생 실패 시 무시 (사용자 상호작용 필요)
+ });
+ } else if (!entry.isIntersecting) {
+ entry.target.pause();
+ }
+ });
+ },
+ {
+ threshold: 0.5,
+ }
+ );
+
+ document.querySelectorAll("video[data-autoplay]").forEach(function (video) {
+ videoObserver.observe(video);
+ });
+ }
+ }
+
// 탭 네비게이션 기능
$(document).ready(function () {
+ // DOM 쿼리 캐싱
+ var $tabNavigation = $(".tabNavigation");
+ var $tabList = $(".tabList");
+ var $tabItems = $(".tabItem");
+ var $tabLinks = $(".tabLink");
+ var $tabContents = $(".tabContent");
+
// Disney 스와이퍼 초기화
var disneySwiper = new Swiper(".disneySwiper", {
slidesPerView: "auto",
@@ -1294,28 +1328,25 @@
});
// 탭 클릭 이벤트
- $(".tabLink").on("click", function (e) {
+ $tabLinks.on("click", function (e) {
e.preventDefault();
var targetTab = $(this).attr("href");
var $targetContent = $(targetTab);
var $clickedTab = $(this).parent();
- const $parentTabNavigation = $(".tabNavigation");
// 모든 탭에서 active 클래스 제거
- $(".tabItem").removeClass("active");
- $(".tabContent").removeClass("active");
+ $tabItems.removeClass("active");
+ $tabContents.removeClass("active");
// 클릭한 탭에 active 클래스 추가
$clickedTab.addClass("active");
$targetContent.addClass("active");
- console.log("🚀 ~ 222 targetTab:", targetTab);
-
if (targetTab != "#themeSeries" && targetTab != "#overview") {
- $parentTabNavigation.addClass("is_black");
+ $tabNavigation.addClass("is_black");
} else {
- $parentTabNavigation.removeClass("is_black");
+ $tabNavigation.removeClass("is_black");
}
// 탭 가로스크롤 중앙 정렬
@@ -1328,76 +1359,113 @@
}
});
- // 스크롤 이벤트로 탭 자동 포커싱 (throttle 적용)
- var handleScroll = throttle(function () {
- var scrollTop = $(window).scrollTop();
+ // 이미지 로드 완료 후 스크롤 스파이 초기화
+ function initScrollSpy() {
+ // 스크롤 이벤트로 탭 자동 포커싱 (throttle 적용)
+ var handleScroll = throttle(function () {
+ var scrollTop = $(window).scrollTop();
+ var $overviewBg = $("#overview .parallax-bg");
- if (scrollTop <= 50) {
- $("#overview .parallax-bg").removeClass("reveal2");
- }
-
- // 각 탭 콘텐츠의 위치 확인
- $(".tabContent").each(function () {
- var $this = $(this);
- var contentTop = $this.offset().top;
- var contentHeight = $this.outerHeight();
- var contentBottom = contentTop + contentHeight;
-
- // 현재 스크롤 위치가 탭 콘텐츠 영역에 있는지 확인
- if (scrollTop + 200 >= contentTop && scrollTop + 300 <= contentBottom) {
- var tabId = $this.attr("id");
- var $currentTab = $('.tabLink[href="#' + tabId + '"]').parent();
- var $parentTabNavigation = $('.tabLink[href="#' + tabId + '"]')
- .parent()
- .parent()
- .parent()
- .parent();
-
- // 현재 활성화된 탭과 다르면 변경
- if (!$currentTab.hasClass("active")) {
- $(".tabItem").removeClass("active");
- $(".tabContent").removeClass("active");
- $currentTab.addClass("active");
- $this.addClass("active");
-
- if (tabId === "ThemeSelectGuide" || tabId === "recentTheme" || tabId === "availableCars" || tabId === "moreFeatures" || tabId === "information" || tabId === "moreFeatures") {
- $parentTabNavigation.addClass("is_black");
- } else {
- // console.log("🚀 ~ 111 tabId은 블랙 아냐:", tabId);
- $parentTabNavigation.removeClass("is_black");
- }
-
- // 탭 가로스크롤 중앙 정렬
- scrollToTab("#" + tabId, $currentTab);
- }
+ if (scrollTop <= 50) {
+ $overviewBg.removeClass("reveal2");
}
- });
- }, 100);
- $(window).on("scroll", handleScroll);
+ // 각 탭 콘텐츠의 위치 확인
+ $tabContents.each(function () {
+ var $this = $(this);
+ var contentTop = $this.offset().top;
+ var contentHeight = $this.outerHeight();
+ var contentBottom = contentTop + contentHeight;
- // URL 해시에 따른 탭 활성화
- if (window.location.hash) {
- var hashTab = window.location.hash;
- if ($(hashTab).length) {
- $(".tabItem").removeClass("active");
- $(".tabContent").removeClass("active");
- $('.tabLink[href="' + hashTab + '"]')
- .parent()
- .addClass("active");
- $(hashTab).addClass("active");
- const $parentTabNavigation = $(".tabNavigation");
+ // 현재 스크롤 위치가 탭 콘텐츠 영역에 있는지 확인
+ if (scrollTop + 200 >= contentTop && scrollTop + 300 <= contentBottom) {
+ var tabId = $this.attr("id");
+ var $currentTab = $tabLinks.filter('[href="#' + tabId + '"]').parent();
- // 해시로 접근한 경우에도 해당 탭으로 스크롤 이동
- setTimeout(function () {
- var $targetContent = $(hashTab);
- if ($targetContent.length) {
- var scrollTop = $targetContent.offset().top;
- window.scrollTo(0, scrollTop);
+ // 현재 활성화된 탭과 다르면 변경
+ if (!$currentTab.hasClass("active")) {
+ $tabItems.removeClass("active");
+ $tabContents.removeClass("active");
+ $currentTab.addClass("active");
+ $this.addClass("active");
+
+ if (tabId === "ThemeSelectGuide" || tabId === "recentTheme" || tabId === "availableCars" || tabId === "moreFeatures" || tabId === "information") {
+ $tabNavigation.addClass("is_black");
+ } else {
+ $tabNavigation.removeClass("is_black");
+ }
+
+ // 탭 가로스크롤 중앙 정렬
+ scrollToTab("#" + tabId, $currentTab);
+ }
}
- }, 10);
+ });
+ }, 100);
+
+ $(window).on("scroll", handleScroll);
+
+ // 초기 스크롤 위치에서도 한 번 실행
+ handleScroll();
+
+ // URL 해시에 따른 탭 활성화 (이미지 로드 후 실행)
+ if (window.location.hash) {
+ var hashTab = window.location.hash;
+ if ($(hashTab).length) {
+ $tabItems.removeClass("active");
+ $tabContents.removeClass("active");
+ $tabLinks
+ .filter('[href="' + hashTab + '"]')
+ .parent()
+ .addClass("active");
+ $(hashTab).addClass("active");
+ const $parentTabNavigation = $(".tabNavigation");
+
+ // 해시로 접근한 경우에도 해당 탭으로 스크롤 이동
+ setTimeout(function () {
+ var $targetContent = $(hashTab);
+ if ($targetContent.length) {
+ var scrollTop = $targetContent.offset().top;
+ window.scrollTo(0, scrollTop);
+ }
+ }, 10);
+ }
}
}
+
+ // 모든 이미지 로드 완료 대기
+ var images = document.querySelectorAll('img[loading="eager"]');
+ var imagesToLoad = images.length;
+ var imagesLoaded = 0;
+
+ if (imagesToLoad === 0) {
+ // eager 이미지가 없으면 즉시 초기화
+ initScrollSpy();
+ } else {
+ images.forEach(function (img) {
+ if (img.complete) {
+ imagesLoaded++;
+ if (imagesLoaded === imagesToLoad) {
+ initScrollSpy();
+ }
+ } else {
+ img.addEventListener("load", function () {
+ imagesLoaded++;
+ if (imagesLoaded === imagesToLoad) {
+ initScrollSpy();
+ }
+ });
+ img.addEventListener("error", function () {
+ imagesLoaded++;
+ if (imagesLoaded === imagesToLoad) {
+ initScrollSpy();
+ }
+ });
+ }
+ });
+ }
+
+ // 비디오 자동 재생 초기화
+ initVideoAutoplay();
});
// ScrollMagic 섹션 이동 애니메이션
@@ -1562,20 +1630,6 @@
TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, ease: "power2.out" });
}
})
- .on("leave", function () {
- // console.log("🚀 ~ LEAVE 11111", section.id);
- })
- // .on("start", function (event) {
- // console.log("🚀 ~ START", section.id, "scrollTop:", event.scrollPos);
- // })
- // .on("end", function (event) {
- // console.log("🚀 ~ END", section.id, "scrollTop:", event.scrollPos);
- // })
- .on("progress", function (event) {
- if (event.progress === 1) {
- // console.log("🚀 ~ PROGRESS 100%", section.id, "scrollTop:", event.scrollPos);
- }
- })
.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) })
diff --git a/kr/promotion/disney_promotion_new2.html b/kr/promotion/disney_promotion_new2.html
new file mode 100644
index 0000000..17be6e4
--- /dev/null
+++ b/kr/promotion/disney_promotion_new2.html
@@ -0,0 +1,1608 @@
+
+
+
+
제품상세명 > 제품리스트 > 회사명
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
© Disney
+
+
+
+
Inspired Together
+
+ 기아와 디즈니가 전하는
+
+
+
+ 다채로운 주행 경험의 시작.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
디즈니 미키와 친구들
+
+
+
+
+
+
+
+
+
+
+
+
+
+
디즈니 겨울왕국
+
+
+
+
+
+
+
+
+
+
+
+
+
ⓒ Disney
+
+
+
+
+
+
+
+
+
+
+
+
픽사 토이 스토리
+
+
+
+
+
+
+
+
+
+
+
+
+
ⓒ Disney/Pixar
+
+
+
+
+
+
+
+
+
+
+
+
마블 어벤져스 어셈블
+
+
+
+
+
+
+
+
+
+
+
+
+
+
마블 어벤져스 코믹스
+
+
+
+
+
+
+
+
+
+
+
+
+
ⓒ 2025 Marvel
+
+
+
+
+
+
+
+
+
+
+
+
내셔널지오그래픽 아기 동물
+
+
+
+
+
+
+
+
+
내셔널지오그래픽 우주의 신비
+
+
+
+
+
+
+
+
+
내셔널지오그래픽 자연의 순간
+
+
+
+
+
+
+
+
+
+ ⓒ National Geographic Partners LLC. All rights reserved.
+
ⓒ National Geographic Partners LLC.
+
+
+
+
+
+
+
+
+ 앞으로 출시될 더 많은 테마를
+
+
+
+
+
+
+
+
+
+
더 깊이 있는 차량 경험의 시작.
+
나만의 테마를 골라보세요.
+
+ 꾸준히 사랑받는 클래식부터, 영웅들의 신나는 모험까지.
+
+
+
+
+
디즈니 디스플레이 테마
+
+
+
+
+
+
+
디즈니 미키와 친구들
+
+
+
+
+
디즈니 겨울왕국
+
+
+
+
+
+
+
+
+
디즈니 픽사 디스플레이 테마
+
+
+
+
+
+
+
픽사 토이 스토리
+
+
+
+
+
+
+
+
+
마블 디스플레이 테마
+
+
+
+
+
+
+
마블 어벤져스 어셈블
+
+
+
+
+
마블 어벤져스 코믹스
+
+
+
+
+
마블 스파이더맨 레트로
+
+
+
+
+
+
+
+
+
스타워즈 디스플레이 테마
+
+
+
+
+
+
+
스타워즈 레벨즈
+
+
+
+
+
스타워즈 다크 사이드
+
+
+
+
+
+
+
+
+
내셔널지오그래픽 디스플레이 테마
+
+
+
+
+
+
+
내셔널지오그래픽 아기 동물
+
+
+
+
+
내셔널지오그래픽 우주의 신비
+
+
+
+
+
내셔널지오그래픽 자연의 순간
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
적용 가능 차량
+
디스플레이 테마는 아래 차량에서 구매 후 적용할 수 있습니다.
+
+
+
+
+
+
+
+
+
+
+
안내사항
+
+ OTA 업데이트 후 가능한 차량 : 쏘렌토, 카니발
+ 향후 업데이트를 통해 더 많은 차량으로 확대될 예정입니다.
+ 2026년식 더 뉴 쏘렌토는 OTA 업데이트 여부와 상관없이 구매가능합니다.
+ 기아 커넥트 서비스 이용자에 한하여 구매할 수 있습니다.
+ 기아 ccNC 인포테인먼트 플랫폼 중 12.3인치 클러스터가 적용된 차량에 한하여 이용 가능합니다. (4인치 클러스터 탑재 차량의 경우 적용이 불가합니다.)
+ 구매 가능 여부는 각 상품 상세 페이지에서 확인하실 수 있습니다.
+
+
+
+
+
+
+
+
+
+
추천 디지털 사양
+
구매 가능한 더 많은 디지털 사양을 확인하세요.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 디즈니
+ 
+ 
+ 디즈니 픽사
+ 
+ 마블
+ 
+ 
+ 내셔널지오그래픽 디스플레이 테마
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
