디즈니 전용관 스크롤매직 적용 본
This commit is contained in:
@@ -4,10 +4,29 @@
|
||||
|
||||
$KiaBlack: #05141f;
|
||||
|
||||
// 부드러운 스크롤 애니메이션을 위한 기본 설정
|
||||
// html {
|
||||
// scroll-behavior: smooth;
|
||||
// }
|
||||
// ScrollMagic 애니메이션을 위한 기본 설정
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
// ScrollMagic 애니메이션 초기 상태
|
||||
.parallax-section .content-item {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||||
}
|
||||
|
||||
// section1의 data-reveal="2" 요소는 처음에 숨김
|
||||
.section1 .content-item[data-reveal="2"] {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
|
||||
.parallax-section .parallax-bg {
|
||||
transform: translateY(0);
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
// jQuery easing 함수를 위한 CSS 애니메이션
|
||||
@keyframes easeInOutQuart {
|
||||
@@ -20,13 +39,464 @@ $KiaBlack: #05141f;
|
||||
}
|
||||
|
||||
#promotion {
|
||||
.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;
|
||||
}
|
||||
.promotionWrap {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@include tablet {
|
||||
max-width: 192rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 4rem;
|
||||
transform: translate(-50%, 0);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: #777;
|
||||
text-align: center;
|
||||
@include tablet {
|
||||
bottom: 10rem;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
&.web {
|
||||
display: none;
|
||||
@include tablet {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.mobile {
|
||||
display: block;
|
||||
@include tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Parallax 섹션 스타일
|
||||
.parallax-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&.section1 {
|
||||
height: calc(100vh - 5.6rem);
|
||||
@include tablet {
|
||||
height: calc(100vh - 8rem);
|
||||
}
|
||||
.parallax-bg {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
.logo-kia {
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
bottom: 4rem;
|
||||
z-index: 1;
|
||||
img {
|
||||
display: block;
|
||||
height: 3.6rem;
|
||||
@include tablet {
|
||||
height: 6.4rem;
|
||||
}
|
||||
}
|
||||
@include tablet {
|
||||
left: 4rem;
|
||||
bottom: 6.6rem;
|
||||
}
|
||||
}
|
||||
.logo-disney {
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
bottom: 4rem;
|
||||
z-index: 1;
|
||||
img {
|
||||
display: block;
|
||||
height: 2.8rem;
|
||||
@include tablet {
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
@include tablet {
|
||||
right: 4rem;
|
||||
bottom: 6.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parallax-bg {
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
max-width: 120rem;
|
||||
padding: 12rem 2rem 0;
|
||||
text-align: center;
|
||||
@include tablet {
|
||||
padding: 20rem 0 0;
|
||||
}
|
||||
.theme-header {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 8rem;
|
||||
text-align: left;
|
||||
@include tablet {
|
||||
padding-bottom: 12rem;
|
||||
text-align: center;
|
||||
}
|
||||
.theme-logo {
|
||||
display: block;
|
||||
height: 2.8rem;
|
||||
margin-bottom: 1.6rem;
|
||||
@include tablet {
|
||||
height: 4.8rem;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
@include tablet {
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.section1 {
|
||||
.section-content {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.tabContentArea {
|
||||
.section-content {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.content-item {
|
||||
width: 100%;
|
||||
|
||||
.theme-showcase {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
&.right {
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
& + .theme-showcase {
|
||||
margin-top: 8rem;
|
||||
@include tablet {
|
||||
margin-top: 12rem;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 2rem;
|
||||
text-align: left;
|
||||
@include tablet {
|
||||
margin-bottom: 6rem;
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 2rem;
|
||||
height: 0.2rem;
|
||||
background-color: #fff;
|
||||
margin-bottom: 1.2rem;
|
||||
@include tablet {
|
||||
width: 4rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
h3 {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.img-area {
|
||||
& + .img-area {
|
||||
margin-top: 1.2rem;
|
||||
@include tablet {
|
||||
margin-top: 4.8rem;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
@include tablet {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@include tablet {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.text-black {
|
||||
.section-content {
|
||||
.theme-header {
|
||||
h2 {
|
||||
color: $KiaBlack;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-item {
|
||||
.theme-showcase {
|
||||
h3 {
|
||||
color: $KiaBlack;
|
||||
&:before {
|
||||
background-color: $KiaBlack;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 3.2rem;
|
||||
font-weight: 600;
|
||||
@include tablet {
|
||||
font-size: 6.4rem;
|
||||
}
|
||||
}
|
||||
.sub-title {
|
||||
margin-top: 0.8rem;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
@include tablet {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
.main-description {
|
||||
text-align: left;
|
||||
}
|
||||
.coming-title {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
@include tablet {
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 섹션별 배경 이미지
|
||||
.section1 {
|
||||
.parallax-bg {
|
||||
height: 100vh;
|
||||
background: url("../images/kia/promotion/section1_m.jpg") 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;
|
||||
}
|
||||
}
|
||||
.section-content {
|
||||
padding-top: 22.1rem;
|
||||
@include tablet {
|
||||
padding-top: 12.5vw;
|
||||
}
|
||||
.content-item {
|
||||
position: absolute;
|
||||
top: 40vw;
|
||||
padding: 0 2rem;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
@include tablet {
|
||||
position: static;
|
||||
padding: 0;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parallax-bg-wrap {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
.parallax-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
.parallax-bg.bg1 {
|
||||
// height: 317.4rem;
|
||||
background: url("../images/kia/promotion/section2.jpg") no-repeat center top / cover;
|
||||
}
|
||||
.parallax-bg.bg2 {
|
||||
// height: 191.4rem;
|
||||
background: url("../images/kia/promotion/section3.jpg") no-repeat center top / cover;
|
||||
}
|
||||
.parallax-bg.bg3 {
|
||||
// height: 317.7rem;
|
||||
background: url("../images/kia/promotion/section4.jpg") no-repeat center top / cover;
|
||||
}
|
||||
.parallax-bg.bg4 {
|
||||
// height: 443.6rem;
|
||||
background: url("../images/kia/promotion/section5.jpg") no-repeat center top / cover;
|
||||
}
|
||||
.parallax-bg.bg5 {
|
||||
// height: 108rem;
|
||||
background: url("../images/kia/promotion/section6.jpg") no-repeat center top / cover;
|
||||
}
|
||||
}
|
||||
|
||||
.section2 {
|
||||
}
|
||||
|
||||
.section3 {
|
||||
.section-content {
|
||||
}
|
||||
}
|
||||
|
||||
.section4 {
|
||||
}
|
||||
|
||||
.section5 {
|
||||
}
|
||||
|
||||
.section6 {
|
||||
.section-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
height: 100vh;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20rem;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0.2rem;
|
||||
background: linear-gradient(180deg, #fff 0%, #7a7e85 100%);
|
||||
position: absolute;
|
||||
top: 12.7rem;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.timeline-icon {
|
||||
width: 7.7rem;
|
||||
height: 9.9rem;
|
||||
margin-bottom: 2.3rem;
|
||||
background: url("../images/kia/promotion/ico_coming.png") no-repeat center bottom / auto 6.9rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 2rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 0.5rem;
|
||||
background: #7c8087;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.timeline-icon {
|
||||
background: url("../images/kia/promotion/ico_open.png") no-repeat center bottom / auto 100%;
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
&::before {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.promotionHeader {
|
||||
width: 100%;
|
||||
// height: 55rem;
|
||||
@@ -78,10 +548,16 @@ $KiaBlack: #05141f;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
padding: 1rem 2rem;
|
||||
background-color: #fff;
|
||||
height: 4.8rem;
|
||||
padding: 0 2rem;
|
||||
margin-bottom: -5.4rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 100;
|
||||
@include tablet {
|
||||
height: 4rem;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
/* Webkit browsers (Chrome, Safari, etc.) */
|
||||
&::-webkit-scrollbar {
|
||||
@@ -90,16 +566,16 @@ $KiaBlack: #05141f;
|
||||
@include tablet {
|
||||
height: 5.4rem;
|
||||
padding: 0;
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #e7e9ec;
|
||||
}
|
||||
// &:after {
|
||||
// content: "";
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// height: 2px;
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// background-color: #e7e9ec;
|
||||
// }
|
||||
}
|
||||
.tabNavigationInner {
|
||||
max-width: 120rem;
|
||||
@@ -120,13 +596,14 @@ $KiaBlack: #05141f;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
height: 3rem;
|
||||
height: 4.8rem;
|
||||
text-decoration: none;
|
||||
color: #9ba2a9;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transition: color 0.2s ease;
|
||||
@include tablet {
|
||||
height: 5.4rem;
|
||||
padding: 0 1.6rem;
|
||||
@@ -143,7 +620,7 @@ $KiaBlack: #05141f;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover {
|
||||
color: $KiaBlack;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@@ -153,11 +630,31 @@ $KiaBlack: #05141f;
|
||||
}
|
||||
&.active {
|
||||
.tabLink {
|
||||
color: $KiaBlack;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
border-bottom-color: $KiaBlack;
|
||||
border-bottom-color: #fff;
|
||||
&:after {
|
||||
background-color: $KiaBlack;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is_black {
|
||||
.tabNavigationInner {
|
||||
.tabList {
|
||||
.tabItem {
|
||||
.tabLink {
|
||||
color: rgba(5, 20, 31, 0.5);
|
||||
}
|
||||
&.active {
|
||||
.tabLink {
|
||||
color: $KiaBlack;
|
||||
&::after {
|
||||
background-color: $KiaBlack;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -169,7 +666,7 @@ $KiaBlack: #05141f;
|
||||
// 탭 콘텐츠 영역 스타일
|
||||
.tabContentArea {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
// background: #d8c0c0;
|
||||
min-height: 60rem;
|
||||
position: relative;
|
||||
.tabContentInner {
|
||||
@@ -402,6 +899,8 @@ $KiaBlack: #05141f;
|
||||
|
||||
// Select Guide
|
||||
.theme-select-guide {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #e8eaeb 60%);
|
||||
@include tablet {
|
||||
background: #fff;
|
||||
@@ -411,12 +910,12 @@ $KiaBlack: #05141f;
|
||||
@include tablet {
|
||||
max-width: 120rem;
|
||||
margin: 0 auto;
|
||||
padding: 16.8rem 2rem;
|
||||
padding: 16.8rem 2rem 20rem;
|
||||
}
|
||||
.title-area {
|
||||
margin-bottom: 6.4rem;
|
||||
margin-bottom: 4.8rem;
|
||||
@include tablet {
|
||||
margin-bottom: 5.2rem;
|
||||
margin-bottom: 5.6rem;
|
||||
}
|
||||
h2 {
|
||||
@include tablet {
|
||||
@@ -597,6 +1096,23 @@ $KiaBlack: #05141f;
|
||||
padding: 1.6rem;
|
||||
line-height: 2.6rem;
|
||||
}
|
||||
|
||||
&.soon {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
&:before {
|
||||
content: "COMMING SOON";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
padding: 0.35rem 0.5rem 0;
|
||||
margin-bottom: 0.3rem;
|
||||
font-size: 1rem;
|
||||
border: 1px solid $KiaBlack;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.stay-tuned-item {
|
||||
@@ -781,6 +1297,71 @@ $KiaBlack: #05141f;
|
||||
}
|
||||
}
|
||||
|
||||
.recent-theme {
|
||||
.contentSection {
|
||||
max-width: 120rem;
|
||||
margin: 0 auto;
|
||||
padding: 8rem 0;
|
||||
@include tablet {
|
||||
padding: 0;
|
||||
}
|
||||
.title-area {
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
font-weight: 600;
|
||||
color: $KiaBlack;
|
||||
margin-bottom: 2.4rem;
|
||||
padding: 0 2rem;
|
||||
@include tablet {
|
||||
font-size: 3.2rem;
|
||||
margin-bottom: 3.2rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.media-area {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 9;
|
||||
.youtubeThumb {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
img {
|
||||
border-radius: 0;
|
||||
@include tablet {
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
}
|
||||
.btn-play {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 6.4rem;
|
||||
height: 6.4rem;
|
||||
background: url("../images/kia/promotion/btn_play.png") no-repeat center / contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.youtubeArea {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.6rem;
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// More Features 탭 스타일
|
||||
.more-features {
|
||||
.contentSection {
|
||||
@@ -788,7 +1369,7 @@ $KiaBlack: #05141f;
|
||||
@include tablet {
|
||||
max-width: 120rem;
|
||||
margin: 0 auto;
|
||||
padding: 7rem 2rem 12rem;
|
||||
padding: 7rem 0 12rem;
|
||||
}
|
||||
.title-area {
|
||||
padding: 0 2rem;
|
||||
@@ -818,6 +1399,9 @@ $KiaBlack: #05141f;
|
||||
@include tablet {
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-wrapper {
|
||||
// gap: 1.6rem;
|
||||
}
|
||||
}
|
||||
.swiper-slide {
|
||||
width: 14.6rem !important;
|
||||
|
||||
Reference in New Issue
Block a user