gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

전용관 수정 완료

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-11-07 00:48:06 +09:00
parent bc85caf466
commit 97ec363780
26 changed files with 3396 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
kr/assets/css/promotion.css
View File

@@ -386,7 +386,7 @@ html {
}
@media (min-width: 768px) {
#promotion .section1 .parallax-bg:after {
background: url("../images/kia/promotion/section1_board.png") no-repeat center bottom/cover;
background: url("../images/kia/promotion/section1_board.webp") no-repeat center bottom/cover;
}
}
@media (min-width: 768px) {
@@ -1371,6 +1371,7 @@ html {
@media (min-width: 768px) {
#promotion .recent-theme .contentSection .media-area .youtubeThumb img {
border-radius: 0.6rem;
aspect-ratio: 1200/675;
}
}
#promotion .recent-theme .contentSection .media-area .youtubeThumb .btn-play {

2
kr/assets/css/promotion.css.map
View File

File diff suppressed because one or more lines are too long

3
kr/assets/css/promotion.scss
View File

@@ -376,7 +376,7 @@ html {
height: 100%;
background: url("../images/kia/promotion/section1_m_board.png") no-repeat center bottom / cover;
@include tablet {
background: url("../images/kia/promotion/section1_board.png") no-repeat center bottom / cover;
background: url("../images/kia/promotion/section1_board.webp") no-repeat center bottom / cover;
}
}
@include tablet {
@@ -1393,6 +1393,7 @@ html {
border-radius: 0;
@include tablet {
border-radius: 0.6rem;
aspect-ratio: 1200 / 675;
}
}
.btn-play {

BIN
kr/assets/images/kia/promotion/Goodbye.mov Normal file
View File

Binary file not shown.

BIN
kr/assets/images/kia/promotion/Goodbye.webm Normal file
View File

Binary file not shown.

BIN
kr/assets/images/kia/promotion/Welcome.mov Normal file
View File

Binary file not shown.

BIN
kr/assets/images/kia/promotion/Welcome.webm Normal file
View File

Binary file not shown.

BIN
kr/assets/images/kia/promotion/disney_pixar_theme1_display.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

BIN
kr/assets/images/kia/promotion/disney_theme1_display.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 KiB

BIN
kr/assets/images/kia/promotion/disney_theme2_display.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 KiB

BIN
kr/assets/images/kia/promotion/kv_promotion2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 408 KiB

BIN
kr/assets/images/kia/promotion/marvel_theme1_display.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
kr/assets/images/kia/promotion/marvel_theme2_display.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
kr/assets/images/kia/promotion/ng_theme1_display.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB

BIN
kr/assets/images/kia/promotion/ng_theme2_display.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
kr/assets/images/kia/promotion/ng_theme3_display.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

BIN
kr/assets/images/kia/promotion/section1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 782 KiB

BIN
kr/assets/images/kia/promotion/section1_board.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
kr/assets/images/kia/promotion/section2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 MiB

After

Width:  |  Height:  |  Size: 540 KiB

BIN
kr/assets/images/kia/promotion/section3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 364 KiB

BIN
kr/assets/images/kia/promotion/section4.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 305 KiB

BIN
kr/assets/images/kia/promotion/section5.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 489 KiB

BIN
kr/assets/images/kia/promotion/section6.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 439 KiB

1588
kr/assets/js/disney_promotion_new2.html Normal file
View File

File diff suppressed because it is too large Load Diff

336
kr/promotion/disney_promotion_new.html
View File

@@ -382,10 +382,10 @@
<section id="overview" class="parallax-section section1" data-section="1">
<div class="parallax-bg">
<div class="logo-kia">
<img src="../assets/images/kia/promotion/logo_kia_w.png" alt="Kia" />
<img src="../assets/images/kia/promotion/logo_kia_w.png" alt="Kia" loading="eager" />
</div>
<div class="logo-disney">
<img src="../assets/images/kia/promotion/logo_disney_w.png" alt="Disney" />
<img src="../assets/images/kia/promotion/logo_disney_w.png" alt="Disney" loading="eager" />
<div class="copy">&copy; Disney</div>
</div>
</div>
@@ -471,15 +471,15 @@
<h3><em>디즈니 미키와 친구들</em></h3>
<div class="theme-display">
<div class="img-area">
<img src="../assets/images/kia/promotion/disney_theme1_display.png" alt="Disney Theme" />
<img src="../assets/images/kia/promotion/disney_theme1_display.jpg" alt="Disney Theme" loading="eager" />
</div>
<div class="img-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
@@ -491,15 +491,15 @@
<h3><em>디즈니 겨울왕국</em></h3>
<div class="theme-display">
<div class="img-area">
<img src="../assets/images/kia/promotion/disney_theme2_display.png" alt="Disney Theme" />
<img src="../assets/images/kia/promotion/disney_theme2_display.jpg" alt="Disney Theme" loading="eager" />
</div>
<div class="img-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
@@ -529,15 +529,15 @@
<h3><em>픽사 토이 스토리</em></h3>
<div class="theme-display">
<div class="img-area">
<img src="../assets/images/kia/promotion/disney_pixar_theme1_display.png" alt="Pixar Theme" />
<img src="../assets/images/kia/promotion/disney_pixar_theme1_display.jpg" alt="Pixar Theme" loading="eager" />
</div>
<div class="img-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
@@ -567,15 +567,15 @@
<h3><em>마블 어벤져스 어셈블</em></h3>
<div class="theme-display">
<div class="img-area">
<img src="../assets/images/kia/promotion/marvel_theme1_display.png" alt="Marvel Theme" />
<img src="../assets/images/kia/promotion/marvel_theme1_display.png" alt="Marvel Theme" loading="eager" />
</div>
<div class="img-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
@@ -587,15 +587,15 @@
<h3><em>마블 어벤져스 코믹스</em></h3>
<div class="theme-display">
<div class="img-area">
<img src="../assets/images/kia/promotion/marvel_theme2_display.png" alt="Marvel Theme" />
<img src="../assets/images/kia/promotion/marvel_theme2_display.png" alt="Marvel Theme" loading="eager" />
</div>
<div class="img-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
@@ -624,60 +624,60 @@
<h3><em>내셔널지오그래픽 아기 동물</em></h3>
<div class="theme-display">
<div class="img-area">
<img src="../assets/images/kia/promotion/NG_theme1_display.png" alt="National Geographic Theme" />
<img src="../assets/images/kia/promotion/ng_theme1_display.jpg" alt="National Geographic Theme" loading="eager" />
</div>
<!-- <div class="img-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
<div class="img-area">
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/promotion/Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/promotion/Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/promotion/Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/promotion/Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div> -->
</div>
</div>
</div>
<div class="theme-showcase right">
<h3><em>내셔널지오그래픽 우주의 신비</em></h3>
<div class="theme-display">
<div class="img-area">
<img src="../assets/images/kia/promotion/NG_theme2_display.png" alt="National Geographic Theme" />
<img src="../assets/images/kia/promotion/ng_theme2_display.jpg" alt="National Geographic Theme" loading="eager" />
</div>
<!-- <div class="img-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
<div class="img-area">
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/promotion/Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/promotion/Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/promotion/Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/promotion/Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div> -->
</div>
</div>
</div>
<div class="theme-showcase">
<h3><em>내셔널지오그래픽 자연의 순간</em></h3>
<div class="theme-display">
<div class="img-area">
<img src="../assets/images/kia/promotion/NG_theme3_display.png" alt="National Geographic Theme" />
<img src="../assets/images/kia/promotion/ng_theme3_display.jpg" alt="National Geographic Theme" loading="eager" />
</div>
<!-- <div class="img-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
<div class="img-area">
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/promotion/Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/promotion/Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
<source src="../assets/images/kia/promotion/Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/promotion/Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div> -->
</div>
</div>
</div>
@@ -829,22 +829,22 @@
<div class="guides-content">
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/marvel_logo1.png" class="img-pc" alt="Marvel’s Avengers Assemble" />
<img src="../assets/images/kia/promotion/marvel_logo1_m.png" class="img-m" alt="Marvel’s Avengers Assemble" />
<img src="../assets/images/kia/promotion/marvel_logo1.png" class="img-pc" alt="Marvel's Avengers Assemble" />
<img src="../assets/images/kia/promotion/marvel_logo1_m.png" class="img-m" alt="Marvel's Avengers Assemble" />
</span>
<strong>마블 어벤져스 어셈블</strong>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/marvel_logo2.png" class="img-pc" alt="Marvel’s Avengers Comics" />
<img src="../assets/images/kia/promotion/marvel_logo2_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
<img src="../assets/images/kia/promotion/marvel_logo2.png" class="img-pc" alt="Marvel's Avengers Comics" />
<img src="../assets/images/kia/promotion/marvel_logo2_m.png" class="img-m" alt="Marvel's Avengers Comics" />
</span>
<strong>마블 어벤져스 코믹스</strong>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/marvel_logo3.png" class="img-pc" alt="Marvel’s Avengers Comics" />
<img src="../assets/images/kia/promotion/marvel_logo3_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
<img src="../assets/images/kia/promotion/marvel_logo3.png" class="img-pc" alt="Marvel's Avengers Comics" />
<img src="../assets/images/kia/promotion/marvel_logo3_m.png" class="img-m" alt="Marvel's Avengers Comics" />
</span>
<strong class="soon">마블 스파이더맨 레트로</strong>
</div>
@@ -877,15 +877,15 @@
<div class="guides-content">
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/starwars_logo1.png" class="img-pc" alt="Marvel’s Avengers Assemble" />
<img src="../assets/images/kia/promotion/starwars_logo1_m.png" class="img-m" alt="Marvel’s Avengers Assemble" />
<img src="../assets/images/kia/promotion/starwars_logo1.png" class="img-pc" alt="Marvel's Avengers Assemble" />
<img src="../assets/images/kia/promotion/starwars_logo1_m.png" class="img-m" alt="Marvel's Avengers Assemble" />
</span>
<strong class="soon">스타워즈 레벨즈</strong>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/starwars_logo2.png" class="img-pc" alt="Marvel’s Avengers Comics" />
<img src="../assets/images/kia/promotion/starwars_logo2_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
<img src="../assets/images/kia/promotion/starwars_logo2.png" class="img-pc" alt="Marvel's Avengers Comics" />
<img src="../assets/images/kia/promotion/starwars_logo2_m.png" class="img-m" alt="Marvel's Avengers Comics" />
</span>
<strong class="soon">스타워즈 다크 사이드</strong>
</div>
@@ -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) })

1608
kr/promotion/disney_promotion_new2.html Normal file
View File

File diff suppressed because it is too large Load Diff