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-04 00:02:52 +09:00
parent e53dac1da6
commit 63fcedcc4b
14 changed files with 136 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -127,7 +127,7 @@ html {
position: absolute;
left: 2rem;
bottom: 4rem;
z-index: 1;
z-index: 10;
}
#promotion .parallax-section.section1 .logo-kia img {
display: block;
@@ -148,7 +148,7 @@ html {
position: absolute;
right: 2rem;
bottom: 4rem;
z-index: 1;
z-index: 10;
}
#promotion .parallax-section.section1 .logo-disney img {
display: block;
@@ -362,6 +362,22 @@ html {
height: 100vh;
background: url("../images/kia/promotion/section1_m.jpg") no-repeat center bottom/cover;
}
#promotion .section1 .parallax-bg:after {
content: "";
display: block;
position: absolute;
top: 1px;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
background: url("../images/kia/promotion/section1_m_board.png") no-repeat center bottom/cover;
}
@media (min-width: 768px) {
#promotion .section1 .parallax-bg:after {
background: url("../images/kia/promotion/section1_board.png") no-repeat center bottom/cover;
}
}
@media (min-width: 768px) {
#promotion .section1 .parallax-bg {
height: 108rem;
@@ -369,6 +385,17 @@ html {
background: url("../images/kia/promotion/section1.jpg") no-repeat center top/cover;
}
}
#promotion .section1 .parallax-bg.reveal2:before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: url("../images/kia/promotion/section1_dim.png") no-repeat center/cover;
}
#promotion .section1 .section-content {
padding-top: 22.1rem;
}
@@ -380,6 +407,8 @@ html {
#promotion .section1 .section-content .content-item {
position: absolute;
top: 40vw;
left: 0;
width: 100%;
padding: 0 2rem;
font-size: 1.8rem;
font-weight: 400;
@@ -387,7 +416,8 @@ html {
}
@media (min-width: 768px) {
#promotion .section1 .section-content .content-item {
position: static;
position: absolute;
top: 11vw;
padding: 0;
font-size: 2.8rem;
}
@@ -425,6 +455,12 @@ html {
#promotion .parallax-bg-wrap .parallax-bg.bg5 {
background: url("../images/kia/promotion/section6.jpg") no-repeat center top/cover;
}
#promotion .section2 .section-content .content-item .copy {
position: static;
margin-top: 20rem;
transform: none;
text-align: center;
}
#promotion .section6 .section-content {
display: flex;
align-items: center;
@@ -1185,6 +1221,7 @@ html {
#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned strong {
padding: 0;
font-size: 1.6rem;
font-weight: normal;
}
}
#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned-same {

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

File diff suppressed because one or more lines are too long

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

@@ -110,7 +110,7 @@ html {
position: absolute;
left: 2rem;
bottom: 4rem;
z-index: 1;
z-index: 10;
img {
display: block;
height: 3.6rem;
@@ -127,7 +127,7 @@ html {
position: absolute;
right: 2rem;
bottom: 4rem;
z-index: 1;
z-index: 10;
img {
display: block;
height: 2.8rem;
@@ -344,11 +344,39 @@ html {
.parallax-bg {
height: 100vh;
background: url("../images/kia/promotion/section1_m.jpg") no-repeat center bottom / cover;
&:after {
content: "";
display: block;
position: absolute;
top: 1px;
left: 0;
z-index: 3;
width: 100%;
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;
}
}
@include tablet {
height: 108rem;
aspect-ratio: 1920 / 1080;
background: url("../images/kia/promotion/section1.jpg") no-repeat center top / cover;
}
&.reveal2 {
&:before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: url("../images/kia/promotion/section1_dim.png") no-repeat center / cover;
}
}
}
.section-content {
padding-top: 22.1rem;
@@ -358,12 +386,15 @@ html {
.content-item {
position: absolute;
top: 40vw;
left: 0;
width: 100%;
padding: 0 2rem;
font-size: 1.8rem;
font-weight: 400;
color: #fff;
@include tablet {
position: static;
position: absolute;
top: 11vw;
padding: 0;
font-size: 2.8rem;
}
@@ -410,6 +441,16 @@ html {
}
.section2 {
.section-content {
.content-item {
.copy {
position: static;
margin-top: 20rem;
transform: none;
text-align: center;
}
}
}
}
.section3 {
@@ -1185,6 +1226,7 @@ html {
strong {
padding: 0;
font-size: 1.6rem;
font-weight: normal;
}
}
}

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 971 KiB

After

Width:  |  Height:  |  Size: 859 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 102 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 133 KiB

After

Width:  |  Height:  |  Size: 131 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 657 KiB

After

Width:  |  Height:  |  Size: 630 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 662 KiB

After

Width:  |  Height:  |  Size: 927 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 235 KiB

After

Width:  |  Height:  |  Size: 2.8 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 364 KiB

After

Width:  |  Height:  |  Size: 978 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 386 KiB

64
kr/promotion/disney_promotion_new.html
View File

@@ -425,6 +425,9 @@
<li class="tabItem">
<a href="#moreFeatures" class="tabLink">추천 디지털 사양</a>
</li>
<li class="tabItem">
<a href="#information" class="tabLink">정보고시</a>
</li>
</ul>
</div>
</div>
@@ -434,20 +437,20 @@
<div class="parallax-bg-wrap">
<div class="parallax-bg bg5" data-rellax-speed="-1"></div>
<div class="parallax-bg bg4" data-rellax-speed="-1">
<div class="copy web">
<!-- <div class="copy web">
ⓒ National Geographic Partners LLC. All rights reserved.<br />
NATIONAL GEOGRAPHIC and Yellow Border Design are trademarks of National Geographic Society, used under license.
</div>
<div class="copy mobile">ⓒ National Geographic Partners LLC.</div>
</div> -->
<!-- <div class="copy mobile">ⓒ National Geographic Partners LLC.</div> -->
</div>
<div class="parallax-bg bg3" data-rellax-speed="-1">
<div class="copy">ⓒ 2025 Marvel</div>
<!-- <div class="copy">ⓒ 2025 Marvel</div> -->
</div>
<div class="parallax-bg bg2" data-rellax-speed="-1">
<div class="copy">ⓒ Disney/Pixar</div>
<!-- <div class="copy">ⓒ Disney/Pixar</div> -->
</div>
<div class="parallax-bg bg1" data-rellax-speed="-1">
<div class="copy">ⓒ Disney</div>
<!-- <div class="copy">ⓒ Disney</div> -->
</div>
</div>
<!-- Section 2: Disney Display Theme -->
@@ -503,6 +506,7 @@
</div>
</div>
</div>
<div class="copy">ⓒ Disney</div>
</div>
</div>
</section>
@@ -540,6 +544,7 @@
</div>
</div>
</div>
<div class="copy">ⓒ Disney/Pixar</div>
</div>
</div>
</section>
@@ -597,6 +602,7 @@
</div>
</div>
</div>
<div class="copy">ⓒ 2025 Marvel</div>
</div>
</div>
</section>
@@ -673,6 +679,12 @@
</div> -->
</div>
</div>
<div class="copy web">
ⓒ National Geographic Partners LLC. All rights reserved.<br />
NATIONAL GEOGRAPHIC and Yellow Border Design are trademarks of National Geographic Society, used under license.
</div>
<div class="copy mobile">ⓒ National Geographic Partners LLC.</div>
</div>
</div>
</section>
@@ -833,7 +845,7 @@
<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>
<strong class="soon">마블 스파이더맨 레트로</strong>
</div>
<!-- <div class="item stay-tuned-item">
@@ -896,10 +908,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">
@@ -1401,7 +1413,7 @@
// ScrollMagic 컨트롤러 초기화
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 0.75,
triggerHook: 50,
reverse: true,
},
});
@@ -1523,14 +1535,38 @@
// 모든 씬에 인디케이터 추가
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" });
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%",
offset: 0,
})
.setTween(gsap.fromTo(section.class + " .content-item[data-reveal='1']", { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, ease: "power2.out" }))
.setTween(
TweenMax.fromTo(
section.class + " .content-item[data-reveal='1']",
{ y: 50, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 0.8,
ease: "power2.out",
}
)
)
// .addIndicators({ name: "Section1 - Title" })
.addTo(controller);
@@ -1559,7 +1595,7 @@
// 다른 섹션들의 씬에 인디케이터 추가
var scene = new ScrollMagic.Scene({
triggerElement: section.id,
duration: "200%",
duration: "100%",
offset: 0,
})
.on("enter", function () {
@@ -1608,7 +1644,7 @@
})
.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({