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 23:35:20 +09:00
parent 63fcedcc4b
commit bc85caf466
4 changed files with 98 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,13 +47,10 @@ html {
transform: translateY(0);
}
}
#promotion .hederWarp_n.sticky {
position: -webkit-sticky;
position: sticky;
#promotion .hederWarp_n {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: #fff;
transition: all 0.3s ease;
@@ -111,11 +108,11 @@ html {
width: 100%;
}
#promotion .parallax-section.section1 {
height: calc(100vh - 5.6rem);
height: 100vh;
}
@media (min-width: 768px) {
#promotion .parallax-section.section1 {
height: calc(100vh - 8rem);
height: 100vh;
}
}
#promotion .parallax-section.section1 .parallax-bg {
@@ -159,6 +156,20 @@ html {
height: 5rem;
}
}
#promotion .parallax-section.section1 .logo-disney .copy {
display: block;
top: auto;
bottom: -2.4rem;
left: auto;
right: 0;
white-space: nowrap;
transform: none;
}
@media (min-width: 768px) {
#promotion .parallax-section.section1 .logo-disney .copy {
bottom: -5.4rem;
}
}
@media (min-width: 768px) {
#promotion .parallax-section.section1 .logo-disney {
right: 4rem;
@@ -406,7 +417,7 @@ html {
}
#promotion .section1 .section-content .content-item {
position: absolute;
top: 40vw;
top: 44vw;
left: 0;
width: 100%;
padding: 0 2rem;
@@ -417,7 +428,7 @@ html {
@media (min-width: 768px) {
#promotion .section1 .section-content .content-item {
position: absolute;
top: 11vw;
top: 32rem;
padding: 0;
font-size: 2.8rem;
}
@@ -455,7 +466,7 @@ 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 {
#promotion .parallax-section .section-content .content-item .copy {
position: static;
margin-top: 20rem;
transform: none;
@@ -1387,10 +1398,12 @@ html {
height: 100%;
}
#promotion .more-features .contentSection {
overflow: hidden;
padding: 7.9rem 0;
}
@media (min-width: 768px) {
#promotion .more-features .contentSection {
overflow: visible;
max-width: 120rem;
margin: 0 auto;
padding: 7rem 0 12rem;

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

File diff suppressed because one or more lines are too long

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

@@ -39,16 +39,24 @@ html {
}
#promotion {
.hederWarp_n.sticky {
position: sticky;
.hederWarp_n {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: #fff;
transition: all 0.3s ease;
}
// .hederWarp_n.sticky {
// position: sticky;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// z-index: 100;
// background-color: #fff;
// transition: all 0.3s ease;
// }
.contentWarp {
max-width: 100%;
margin-top: 0;
@@ -97,9 +105,9 @@ html {
width: 100%;
&.section1 {
height: calc(100vh - 5.6rem);
height: 100vh;
@include tablet {
height: calc(100vh - 8rem);
height: 100vh;
}
.parallax-bg {
position: relative;
@@ -135,6 +143,18 @@ html {
height: 5rem;
}
}
.copy {
display: block;
top: auto;
bottom: -2.4rem;
left: auto;
right: 0;
white-space: nowrap;
transform: none;
@include tablet {
bottom: -5.4rem;
}
}
@include tablet {
right: 4rem;
bottom: 6.6rem;
@@ -385,7 +405,7 @@ html {
}
.content-item {
position: absolute;
top: 40vw;
top: 44vw;
left: 0;
width: 100%;
padding: 0 2rem;
@@ -394,7 +414,7 @@ html {
color: #fff;
@include tablet {
position: absolute;
top: 11vw;
top: 32rem;
padding: 0;
font-size: 2.8rem;
}
@@ -440,7 +460,7 @@ html {
}
}
.section2 {
.parallax-section {
.section-content {
.content-item {
.copy {
@@ -1407,8 +1427,10 @@ html {
// More Features 탭 스타일
.more-features {
.contentSection {
overflow: hidden;
padding: 7.9rem 0;
@include tablet {
overflow: visible;
max-width: 120rem;
margin: 0 auto;
padding: 7rem 0 12rem;

158
kr/promotion/disney_promotion_new.html
View File

@@ -386,6 +386,7 @@
</div>
<div class="logo-disney">
<img src="../assets/images/kia/promotion/logo_disney_w.png" alt="Disney" />
<div class="copy">&copy; Disney</div>
</div>
</div>
<div class="section-content">
@@ -744,7 +745,7 @@
<div class="copyright">
<span>&copy; Disney</span>
</div>
<a href="../product/pdp_display_theme_disney_frozen.html" class="btn-viewAll">
<a href="https://connectstore.kia.com/kr/product/displaythemes-disney" class="btn-viewAll">
<span>보러가기</span>
<span class="arrow-icon"></span>
</a>
@@ -785,7 +786,7 @@
<div class="copyright">
<span>&copy; Disney/Pixar</span>
</div>
<a href="#" class="btn-viewAll">
<a href="https://connectstore.kia.com/kr/product/displaythemes-pixar" class="btn-viewAll">
<span>보러가기</span>
<span class="arrow-icon"></span>
</a>
@@ -819,7 +820,7 @@
<div class="copyright">
<span>&copy; 2025 Marvel</span>
</div>
<a href="../product/pdp_display_theme_marverl.html" class="btn-viewAll">
<a href="https://connectstore.kia.com/kr/product/displaythemes-marvel" class="btn-viewAll">
<span>보러가기</span>
<span class="arrow-icon"></span>
</a>
@@ -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,
// });
}
});
});