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

Enhance promotion section: Add new parallax background for section 7, update recent theme padding, and modify display settings for YouTube areas. Remove unused PNG images and update HTML structure for Star Wars theme display.

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-12-10 22:34:51 +09:00
parent 9b97d1426c
commit 6426b87fd0
20 changed files with 112 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -492,6 +492,9 @@ html {
#promotion .parallax-bg-wrap .parallax-bg.bg5 {
background: url("../images/kia/promotion/section6.jpg") no-repeat center top/cover;
}
#promotion .parallax-bg-wrap .parallax-bg.bg7 {
background: url("../images/kia/promotion/section7.jpg") no-repeat center top/cover;
}
#promotion .parallax-section .section-content .content-item .copy {
position: static;
margin-top: 20rem;
@@ -1356,6 +1359,9 @@ html {
#promotion .theme-select-guide .guides-wrap .guides-section.national-geographic-theme .guides-header {
background: url("../images/kia/promotion/bg_national_pattern.png") no-repeat center top/100% auto;
}
#promotion .recent-theme {
padding-bottom: 8rem;
}
#promotion .recent-theme .contentSection {
max-width: 120rem;
margin: 0 auto;
@@ -1412,7 +1418,7 @@ html {
cursor: pointer;
}
#promotion .recent-theme .contentSection .media-area .youtubeArea {
display: none;
display: block;
overflow: hidden;
position: absolute;
top: 0;

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

File diff suppressed because one or more lines are too long

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

@@ -482,6 +482,10 @@ html {
// height: 108rem;
background: url("../images/kia/promotion/section6.jpg") no-repeat center top / cover;
}
.parallax-bg.bg7 {
// height: 108rem;
background: url("../images/kia/promotion/section7.jpg") no-repeat center top / cover;
}
}
.parallax-section {
@@ -1384,6 +1388,7 @@ html {
}
.recent-theme {
padding-bottom: 8rem;
.contentSection {
max-width: 120rem;
margin: 0 auto;
@@ -1432,7 +1437,7 @@ html {
}
}
.youtubeArea {
display: none;
display: block;
overflow: hidden;
position: absolute;
top: 0;

BIN
kr/assets/images/kia/promotion/NG_theme1_display.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 859 KiB

BIN
kr/assets/images/kia/promotion/logo_starwars_w.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 177 KiB

After

Width:  |  Height:  |  Size: 650 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 533 KiB

BIN
kr/assets/images/kia/promotion/ng_theme2_display.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 630 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 196 KiB

After

Width:  |  Height:  |  Size: 347 KiB

BIN
kr/assets/images/kia/promotion/ng_theme3_display.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 927 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 798 KiB

BIN
kr/assets/images/kia/promotion/starwars/darkside/Goodbye.mp4 Normal file
View File

Binary file not shown.

BIN
kr/assets/images/kia/promotion/starwars/darkside/Welcome.mp4 Normal file
View File

Binary file not shown.

BIN
kr/assets/images/kia/promotion/starwars/rebels/Goodbye.mp4 Normal file
View File

Binary file not shown.

BIN
kr/assets/images/kia/promotion/starwars/rebels/Welcome.mp4 Normal file
View File

Binary file not shown.

BIN
kr/assets/images/kia/promotion/starwars_logo1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 29 KiB

BIN
kr/assets/images/kia/promotion/starwars_logo2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 47 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 KiB

111
kr/promotion/disney_promotion_new.html
View File

@@ -461,6 +461,7 @@
<div class="tabContentArea">
<div id="themeSeries" class="tabContent theme-series">
<div class="parallax-bg-wrap">
<div class="parallax-bg bg7" data-rellax-speed="-1"></div>
<div class="parallax-bg bg5" data-rellax-speed="-1"></div>
<div class="parallax-bg bg4" data-rellax-speed="-1">
<!-- <div class="copy web">
@@ -653,6 +654,73 @@
</div>
</section>
<!-- Section 5: STAR WARS Display Theme -->
<section id="starWarsTheme" class="parallax-section section7" data-section="7">
<div class="section-content">
<div class="content-item" data-reveal="1">
<div class="theme-header">
<h2>
<img src="../assets/images/kia/promotion/logo_starwars_w.png" alt="Marvel" class="theme-logo" />
스타워즈 디스플레이 테마
</h2>
</div>
</div>
<div class="content-item" data-reveal="2">
<div class="theme-showcase">
<h3><em>스타워즈 레벨즈</em></h3>
<div class="theme-display">
<div class="img-area">
<img src="../assets/images/kia/promotion/starwars_theme1_display.jpg" alt="스타워즈 레벨즈 Theme" />
</div>
<div class="img-area">
<!-- 20251113 수정 -->
<div class="video-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/promotion/starwars/rebels/Welcome.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="video-area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/promotion/starwars/rebels/Goodbye.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<!--// 20251113 수정 -->
</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/starwars_theme2_display.jpg" alt="스타워즈 다크 사이드 Theme" />
</div>
<div class="img-area">
<!-- 20251113 수정 -->
<div class="video-area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/promotion/starwars/darkside/Welcome.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="video-area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/promotion/starwars/darkside/Goodbye.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<!--// 20251113 수정 -->
</div>
</div>
</div>
<div class="copy web">ⓒ & ™ 2025 Lucasfilm Ltd.</div>
<div class="copy mobile">ⓒ & ™ 2025 Lucasfilm Ltd.</div>
</div>
</div>
</section>
<!-- Section 5: National Geographic Display Theme -->
<section id="NationalGeographicTheme" class="parallax-section section5" data-section="5">
<div class="section-content">
@@ -817,6 +885,7 @@
<img src="../assets/images/kia/promotion/disney_mickey.png" class="img-pc" alt="Disney Mickey & Friends" />
<img src="../assets/images/kia/promotion/disney_mickey_m.png" class="img-m" alt="Disney Mickey & Friends" />
</span>
<!-- coming soon 노출: class="soon" -->
<strong>디즈니 미키와 친구들</strong>
</div>
<div class="item">
@@ -928,10 +997,10 @@
<div class="copyright">
<span>ⓒ & ™ 2025 Lucasfilm Ltd.</span>
</div>
<!-- <a href="#" class="btn-viewAll">
<span>보러가기</span>
<span class="arrow-icon"></span>
</a> -->
<a href="#" class="btn-viewAll">
<span>보러가기</span>
<span class="arrow-icon"></span>
</a>
</div>
<div class="guides-content">
@@ -940,14 +1009,16 @@
<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>
<strong>스타워즈 레벨즈</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" />
</span>
<strong class="soon">스타워즈 다크 사이드</strong>
<strong>스타워즈 다크 사이드</strong>
</div>
<div class="item stay-tuned-item">
@@ -969,10 +1040,10 @@
<div class="copyright">
<span>&copy; National Geographic Partners LLC.</span>
</div>
<!-- <a href="#" class="btn-viewAll">
<a href="#" class="btn-viewAll">
<span>보러가기</span>
<span class="arrow-icon"></span>
</a> -->
</a>
</div>
<div class="guides-content">
@@ -981,21 +1052,30 @@
<img src="../assets/images/kia/promotion/national_logo1.png" class="img-pc" alt="National Geographic Baby Animals" />
<img src="../assets/images/kia/promotion/national_logo1_m.png" class="img-m" alt="National Geographic Baby Animals" />
</span>
<strong class="soon">내셔널지오그래픽 아기 동물</strong>
<strong
>내셔널지오그래픽<br class="br-pc" />
아기 동물</strong
>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/national_logo2.png" class="img-pc" alt="National Geographic Space Wonder" />
<img src="../assets/images/kia/promotion/national_logo2_m.png" class="img-m" alt="National Geographic Space Wonder" />
</span>
<strong class="soon">내셔널지오그래픽 우주의 신비</strong>
<strong
>내셔널지오그래픽<br class="br-pc" />
우주의 신비</strong
>
</div>
<div class="item">
<span class="logo">
<img src="../assets/images/kia/promotion/national_logo3.png" class="img-pc" alt="National Geographic Landscapes" />
<img src="../assets/images/kia/promotion/national_logo3_m.png" class="img-m" alt="National Geographic Landscapes" />
</span>
<strong class="soon">내셔널지오그래픽 자연의 순간</strong>
<strong
>내셔널지오그래픽<br class="br-pc" />
자연의 순간</strong
>
</div>
<!-- <div class="item stay-tuned-item">
@@ -1017,11 +1097,13 @@
<div class="title-area">
<h2>최신 테마 소식</h2>
<div class="media-area">
<div class="youtubeThumb">
<!-- <div class="youtubeThumb">
<img src="../assets/images/kia/promotion/recentTheme_thumbnail.png" alt="최신 테마 소식" />
<button class="btn-play" onclick="playYoutube('lNuSUuf7hYU')"></button>
</div> -->
<div class="youtubeArea youtubeArea_pdp" value="co-5YoWIR0I">
<iframe src="https://www.youtube.com/embed/co-5YoWIR0I?controls=1&amp;rel=0&amp;showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
<div class="youtubeArea youtubeArea_pdp" value="lNuSUuf7hYU"></div>
</div>
</div>
</div>
@@ -1514,6 +1596,7 @@
{ id: "#DisneyTheme", class: ".section2" },
{ id: "#DisneyPixarTheme", class: ".section3" },
{ id: "#MarvelTheme", class: ".section4" },
{ id: "#starWarsTheme", class: ".section7" },
{ id: "#NationalGeographicTheme", class: ".section5" },
{ id: "#ComingSoon", class: ".section6" },
// { id: "#ThemeSelectGuide", class: ".section7" },
@@ -1642,11 +1725,13 @@
"#DisneyTheme": "bg1",
"#DisneyPixarTheme": "bg2",
"#MarvelTheme": "bg3",
"#starWarsTheme": "bg7",
"#NationalGeographicTheme": "bg4",
"#ComingSoon": "bg5",
};
var targetBg = bgMap[section.id];
console.log("🚀 ~ targetBg:", targetBg);
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" });