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-10-02 00:29:08 +09:00
parent 0b4c92797a
commit 92a1a58463
4 changed files with 105 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -97,6 +97,10 @@
padding: 1rem 2rem;
background-color: #fff;
z-index: 100;
/* Webkit browsers (Chrome, Safari, etc.) */
}
#promotion .tabNavigation::-webkit-scrollbar {
display: none;
}
@media (min-width: 768px) {
#promotion .tabNavigation {
@@ -132,21 +136,11 @@
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem {
position: relative;
}
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem:after {
content: "";
display: block;
width: 100%;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
background-color: transparent;
}
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 3rem;
text-decoration: none;
color: #666;
@@ -161,18 +155,29 @@
padding: 0 1.6rem;
}
}
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink:after {
content: "";
display: block;
width: 100%;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
background-color: transparent;
}
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink:hover {
color: #05141f;
}
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem:last-child {
padding-right: 2rem;
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem:last-child .tabLink {
margin-right: 2rem;
}
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active .tabLink {
color: #05141f;
font-weight: 600;
border-bottom-color: #05141f;
}
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active:after {
#promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active .tabLink:after {
background-color: #05141f;
}
#promotion .tabContentArea {
@@ -760,11 +765,12 @@
}
}
#promotion .more-features .features-list .swiper {
padding-left: 2rem;
overflow: visible;
padding: 0 2rem;
}
@media (min-width: 768px) {
#promotion .more-features .features-list .swiper {
padding-left: 0;
padding: 0;
}
}
#promotion .more-features .features-list .swiper-slide {

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

File diff suppressed because one or more lines are too long

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

@@ -82,6 +82,11 @@ $KiaBlack: #05141f;
padding: 1rem 2rem;
background-color: #fff;
z-index: 100;
/* Webkit browsers (Chrome, Safari, etc.) */
&::-webkit-scrollbar {
display: none;
}
@include tablet {
height: 5.4rem;
padding: 0;
@@ -110,21 +115,11 @@ $KiaBlack: #05141f;
gap: 1.4rem;
.tabItem {
position: relative;
&:after {
content: "";
display: block;
width: 100%;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
background-color: transparent;
}
.tabLink {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 3rem;
text-decoration: none;
color: #666;
@@ -136,21 +131,34 @@ $KiaBlack: #05141f;
height: 5.4rem;
padding: 0 1.6rem;
}
&:after {
content: "";
display: block;
width: 100%;
height: 2px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
background-color: transparent;
}
&:hover {
color: $KiaBlack;
}
}
&:last-child {
padding-right: 2rem;
.tabLink {
margin-right: 2rem;
}
}
&.active {
.tabLink {
color: $KiaBlack;
font-weight: 600;
border-bottom-color: $KiaBlack;
}
&:after {
background-color: $KiaBlack;
&:after {
background-color: $KiaBlack;
}
}
}
}
@@ -731,9 +739,10 @@ $KiaBlack: #05141f;
margin-bottom: 8rem;
}
.swiper {
padding-left: 2rem;
overflow: visible;
padding: 0 2rem;
@include tablet {
padding-left: 0;
padding: 0;
}
}
.swiper-slide {

107
kr/promotion/disney_promotion.html
View File

@@ -1022,6 +1022,53 @@
};
}
// 탭 스크롤 함수 (공통)
function scrollToTab(targetTab, $clickedTab) {
var $tabNavigation = $(".tabNavigation");
var $tabList = $(".tabList");
var tabNavigationWidth = $tabNavigation.width();
var tabListWidth = $tabList[0].scrollWidth;
if (tabListWidth > tabNavigationWidth) {
var scrollLeft;
// #information 또는 #moreFeatures 탭인 경우 맨 끝으로 스크롤
if (targetTab === "#information" || targetTab === "#moreFeatures") {
scrollLeft = tabListWidth - tabNavigationWidth;
} else {
// 탭의 절대 위치 계산 (부모 컨테이너 기준)
var tabOffsetLeft = $clickedTab.offset().left;
var tabNavigationOffsetLeft = $tabNavigation.offset().left;
var relativeTabOffset = tabOffsetLeft - tabNavigationOffsetLeft;
var tabWidth = $clickedTab.outerWidth();
var tabCenter = relativeTabOffset + tabWidth / 2;
var navigationCenter = tabNavigationWidth / 2;
scrollLeft = tabCenter - navigationCenter;
// 스크롤 범위 제한
var maxScrollLeft = tabListWidth - tabNavigationWidth;
scrollLeft = Math.max(0, Math.min(scrollLeft, maxScrollLeft));
}
// 부드러운 스크롤 애니메이션
$tabNavigation.animate(
{
scrollLeft: scrollLeft,
},
300,
"easeInOutQuart"
);
// 대안 방법: scrollTo 사용
setTimeout(function () {
$tabNavigation[0].scrollTo({
left: scrollLeft,
behavior: "smooth",
});
}, 50);
}
}
// 탭 네비게이션 기능
$(document).ready(function () {
// Disney 스와이퍼 초기화
@@ -1060,11 +1107,11 @@
var disneyFeaturesSwiper = new Swiper(".features-list-swiper", {
slidesPerView: "auto",
spaceBetween: 16,
loop: true,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
// loop: true,
// autoplay: {
// delay: 1500,
// disableOnInteraction: false,
// },
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
@@ -1101,52 +1148,7 @@
$targetContent.addClass("active");
// 탭 가로스크롤 중앙 정렬
var $tabNavigation = $(".tabNavigation");
var $tabList = $(".tabList");
var tabNavigationWidth = $tabNavigation.width();
// 탭 리스트의 실제 너비 계산 (여러 방법 시도)
var tabListWidth = $tabList[0].scrollWidth; // 스크롤 가능한 전체 너비
var tabListOffsetWidth = $tabList[0].offsetWidth; // 현재 보이는 너비
var tabListOuterWidth = $tabList.outerWidth(); // jQuery outerWidth
console.log("탭 네비게이션 너비:", tabNavigationWidth);
console.log("탭 리스트 scrollWidth:", tabListWidth);
console.log("탭 리스트 offsetWidth:", tabListOffsetWidth);
console.log("탭 리스트 outerWidth:", tabListOuterWidth);
// 탭 리스트가 네비게이션보다 넓을 때만 스크롤 조정
if (tabListWidth > tabNavigationWidth) {
// 탭의 절대 위치 계산 (부모 컨테이너 기준)
var tabOffsetLeft = $clickedTab.offset().left;
var tabNavigationOffsetLeft = $tabNavigation.offset().left;
var relativeTabOffset = tabOffsetLeft - tabNavigationOffsetLeft;
var tabWidth = $clickedTab.outerWidth();
var tabCenter = relativeTabOffset + tabWidth / 2;
var navigationCenter = tabNavigationWidth / 2;
var scrollLeft = tabCenter - navigationCenter;
// 스크롤 범위 제한
var maxScrollLeft = tabListWidth - tabNavigationWidth;
scrollLeft = Math.max(0, Math.min(scrollLeft, maxScrollLeft));
// 부드러운 스크롤 애니메이션
$tabNavigation.animate(
{
scrollLeft: scrollLeft,
},
300,
"easeInOutQuart"
);
// 대안 방법: scrollTo 사용
setTimeout(function () {
$tabNavigation[0].scrollTo({
left: scrollLeft,
behavior: "smooth",
});
}, 50);
}
scrollToTab(targetTab, $clickedTab);
// 해당 탭 콘텐츠로 스크롤 이동
if ($targetContent.length) {
@@ -1183,6 +1185,9 @@
$(".tabContent").removeClass("active");
$correspondingTab.addClass("active");
$this.addClass("active");
// 탭 가로스크롤 중앙 정렬
scrollToTab("#" + tabId, $correspondingTab);
}
}
});