전용관, PDP 영상 수정 완료
This commit is contained in:
@@ -4269,6 +4269,10 @@
|
||||
}
|
||||
.displayThemeDesney.discover-epic-design.mickey .tab-box {
|
||||
padding-top: 0;
|
||||
display: none;
|
||||
}
|
||||
.displayThemeDesney.discover-epic-design.mickey .tab-box.box2 {
|
||||
display: block;
|
||||
}
|
||||
.displayThemeDesney.discover-epic-design.mickey .tab-box .discover-area {
|
||||
position: relative;
|
||||
@@ -4508,6 +4512,9 @@
|
||||
display: none;
|
||||
padding-top: 2.2rem;
|
||||
}
|
||||
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box.box1 {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box {
|
||||
margin-bottom: 2.4rem;
|
||||
@@ -4789,6 +4796,29 @@
|
||||
.displayThemeDesney .welcome-goodbye .image_area video {
|
||||
width: 100%;
|
||||
}
|
||||
.displayThemeDesney .welcome-goodbye .video-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 120rem;
|
||||
aspect-ratio: 1200/236;
|
||||
padding: 1.8333333333vw;
|
||||
background: url("../images/kia/promotion/video_frame.png") no-repeat center center/contain;
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
.displayThemeDesney .welcome-goodbye .video-area {
|
||||
padding: 2.2rem;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .welcome-goodbye .video-area + .video-area {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.displayThemeDesney .welcome-goodbye .video-area + .video-area {
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
}
|
||||
.displayThemeDesney .inner {
|
||||
max-width: 120rem;
|
||||
margin: 0 auto;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -4863,6 +4863,11 @@
|
||||
.tab-box {
|
||||
padding-top: 0;
|
||||
|
||||
display: none;
|
||||
&.box2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.discover-area {
|
||||
position: relative;
|
||||
padding: 4rem 0 0;
|
||||
@@ -5127,6 +5132,9 @@
|
||||
.tab-box {
|
||||
display: none;
|
||||
padding-top: 2.2rem;
|
||||
&.box1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
margin-bottom: 2.4rem;
|
||||
@@ -5457,6 +5465,27 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.video-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 120rem;
|
||||
// height: 19.667rem;
|
||||
aspect-ratio: 1200 / 236;
|
||||
padding: 1.8333333333333333vw;
|
||||
background: url("../images/kia/promotion/video_frame.png") no-repeat center center / contain;
|
||||
@media (min-width: 1000px) {
|
||||
padding: 2.2rem;
|
||||
}
|
||||
& + .video-area {
|
||||
margin-top: 1.2rem;
|
||||
@include tablet {
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
|
||||
@@ -318,15 +318,33 @@ html {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
#promotion .parallax-section .content-item .theme-showcase video {
|
||||
#promotion .parallax-section .content-item .theme-showcase .video-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-width: 100rem;
|
||||
aspect-ratio: 1000/196.67;
|
||||
padding: 1.8vw;
|
||||
background: url("../images/kia/promotion/video_frame.png") no-repeat center center/contain;
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
#promotion .parallax-section .content-item .theme-showcase .video-area {
|
||||
padding: 1.8rem;
|
||||
}
|
||||
}
|
||||
#promotion .parallax-section .content-item .theme-showcase .video-area + .video-area {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#promotion .parallax-section .content-item .theme-showcase video {
|
||||
max-width: 1000px;
|
||||
#promotion .parallax-section .content-item .theme-showcase .video-area + .video-area {
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
}
|
||||
#promotion .parallax-section .content-item .theme-showcase video {
|
||||
width: 100%;
|
||||
max-width: 100rem;
|
||||
}
|
||||
#promotion .parallax-section.text-black .section-content .theme-header h2 {
|
||||
color: #05141f;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -300,12 +300,30 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.video-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 100rem;
|
||||
// height: 19.667rem;
|
||||
aspect-ratio: 1000 / 196.67;
|
||||
padding: 1.7999999999999998vw;
|
||||
background: url("../images/kia/promotion/video_frame.png") no-repeat center center / contain;
|
||||
@media (min-width: 1000px) {
|
||||
padding: 1.8rem;
|
||||
}
|
||||
& + .video-area {
|
||||
margin-top: 1.2rem;
|
||||
@include tablet {
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@include tablet {
|
||||
max-width: 1000px;
|
||||
}
|
||||
max-width: 100rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
kr/assets/images/kia/promotion/frozen/GoodBye.mp4
Normal file
BIN
kr/assets/images/kia/promotion/frozen/GoodBye.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/frozen/Welcome.mp4
Normal file
BIN
kr/assets/images/kia/promotion/frozen/Welcome.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/marvel/Goodbye.mp4
Normal file
BIN
kr/assets/images/kia/promotion/marvel/Goodbye.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/marvel/Welcome.mp4
Normal file
BIN
kr/assets/images/kia/promotion/marvel/Welcome.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/micky/Goodbye.mp4
Normal file
BIN
kr/assets/images/kia/promotion/micky/Goodbye.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/micky/Welcome.mp4
Normal file
BIN
kr/assets/images/kia/promotion/micky/Welcome.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/natgeo/BabyAnimals/Goodbye.mp4
Normal file
BIN
kr/assets/images/kia/promotion/natgeo/BabyAnimals/Goodbye.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/natgeo/BabyAnimals/Welcome.mp4
Normal file
BIN
kr/assets/images/kia/promotion/natgeo/BabyAnimals/Welcome.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/natgeo/LandScapes/.DS_Store
vendored
Normal file
BIN
kr/assets/images/kia/promotion/natgeo/LandScapes/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/natgeo/LandScapes/Goodbye.mp4
Normal file
BIN
kr/assets/images/kia/promotion/natgeo/LandScapes/Goodbye.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/natgeo/LandScapes/Welcome.mp4
Normal file
BIN
kr/assets/images/kia/promotion/natgeo/LandScapes/Welcome.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/natgeo/SpaceWonder/.DS_Store
vendored
Normal file
BIN
kr/assets/images/kia/promotion/natgeo/SpaceWonder/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/natgeo/SpaceWonder/Goodbye.mp4
Normal file
BIN
kr/assets/images/kia/promotion/natgeo/SpaceWonder/Goodbye.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/natgeo/SpaceWonder/Welcome.mp4
Normal file
BIN
kr/assets/images/kia/promotion/natgeo/SpaceWonder/Welcome.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/pixar/.DS_Store
vendored
Normal file
BIN
kr/assets/images/kia/promotion/pixar/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/pixar/Goodbye.mp4
Normal file
BIN
kr/assets/images/kia/promotion/pixar/Goodbye.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/pixar/Welcome.mp4
Normal file
BIN
kr/assets/images/kia/promotion/pixar/Welcome.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/sample.mp4
Normal file
BIN
kr/assets/images/kia/promotion/sample.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/sample2.mp4
Normal file
BIN
kr/assets/images/kia/promotion/sample2.mp4
Normal file
Binary file not shown.
BIN
kr/assets/images/kia/promotion/video_frame.png
Normal file
BIN
kr/assets/images/kia/promotion/video_frame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
@@ -609,18 +609,18 @@
|
||||
<div class="inner">
|
||||
<div class="item welcome-goodbye aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
|
||||
<div class="image_area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="" loop="">
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
<div class="image_area">
|
||||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="" loop="">
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/micky/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/micky/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h4>Welcome & Goodbye Video</h4>
|
||||
@@ -749,18 +749,18 @@
|
||||
<div class="inner">
|
||||
<div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<div class="image_area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
<div class="image_area">
|
||||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/frozen/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/frozen/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text_area">
|
||||
|
||||
@@ -572,18 +572,18 @@
|
||||
<div class="inner">
|
||||
<div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
|
||||
<div class="image_area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="" loop="">
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
<div class="image_area">
|
||||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="" loop="">
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/pixar/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/pixar/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h4 class="color-000">Welcome & Goodbye Video</h4>
|
||||
|
||||
@@ -453,18 +453,18 @@
|
||||
<div class="inner">
|
||||
<div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<div class="image_area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
<div class="image_area">
|
||||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/marvel/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/marvel/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text_area">
|
||||
@@ -575,15 +575,13 @@
|
||||
<div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<div class="image_area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
|
||||
<source src="../assets/images/kia/promotion/marvel/Welcome.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
<div class="image_area">
|
||||
<div class="video-area">
|
||||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
|
||||
<source src="../assets/images/kia/promotion/marvel/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
|
||||
@@ -382,10 +382,10 @@
|
||||
<section id="overview" class="parallax-section section1" data-section="1">
|
||||
<div class="parallax-bg">
|
||||
<div class="logo-kia">
|
||||
<img src="../assets/images/kia/promotion/logo_kia_w.png" alt="Kia" loading="eager" />
|
||||
<img src="../assets/images/kia/promotion/logo_kia_w.png" alt="Kia" />
|
||||
</div>
|
||||
<div class="logo-disney">
|
||||
<img src="../assets/images/kia/promotion/logo_disney_w.png" alt="Disney" loading="eager" />
|
||||
<img src="../assets/images/kia/promotion/logo_disney_w.png" alt="Disney" />
|
||||
<div class="copy">© Disney</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -471,19 +471,21 @@
|
||||
<h3><em>디즈니 미키와 친구들</em></h3>
|
||||
<div class="theme-display">
|
||||
<div class="img-area">
|
||||
<img src="../assets/images/kia/promotion/disney_theme1_display.jpg" alt="Disney Theme" loading="eager" />
|
||||
<img src="../assets/images/kia/promotion/disney_theme1_display.jpg" alt="Disney Theme" />
|
||||
</div>
|
||||
<div class="img-area">
|
||||
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/micky/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/micky/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -491,19 +493,21 @@
|
||||
<h3><em>디즈니 겨울왕국</em></h3>
|
||||
<div class="theme-display">
|
||||
<div class="img-area">
|
||||
<img src="../assets/images/kia/promotion/disney_theme2_display.jpg" alt="Disney Theme" loading="eager" />
|
||||
<img src="../assets/images/kia/promotion/disney_theme2_display.jpg" alt="Disney Theme" />
|
||||
</div>
|
||||
<div class="img-area">
|
||||
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/frozen/Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/frozen/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/frozen/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -529,19 +533,21 @@
|
||||
<h3><em>픽사 토이 스토리</em></h3>
|
||||
<div class="theme-display">
|
||||
<div class="img-area">
|
||||
<img src="../assets/images/kia/promotion/disney_pixar_theme1_display.jpg" alt="Pixar Theme" loading="eager" />
|
||||
<img src="../assets/images/kia/promotion/disney_pixar_theme1_display.jpg" alt="Pixar Theme" />
|
||||
</div>
|
||||
<div class="img-area">
|
||||
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_mickey/pixar/Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/pixar/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/pixar/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -570,16 +576,18 @@
|
||||
<img src="../assets/images/kia/promotion/marvel_theme1_display.png" alt="Marvel Theme" loading="eager" />
|
||||
</div>
|
||||
<div class="img-area">
|
||||
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/marvel/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/marvel/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -587,19 +595,21 @@
|
||||
<h3><em>마블 어벤져스 코믹스</em></h3>
|
||||
<div class="theme-display">
|
||||
<div class="img-area">
|
||||
<img src="../assets/images/kia/promotion/marvel_theme2_display.png" alt="Marvel Theme" loading="eager" />
|
||||
<img src="../assets/images/kia/promotion/marvel_theme2_display.jpg" alt="Marvel Theme" />
|
||||
</div>
|
||||
<div class="img-area">
|
||||
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/marvel/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/marvel/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -624,19 +634,21 @@
|
||||
<h3><em>내셔널지오그래픽 아기 동물</em></h3>
|
||||
<div class="theme-display">
|
||||
<div class="img-area">
|
||||
<img src="../assets/images/kia/promotion/ng_theme1_display.jpg" alt="National Geographic Theme" loading="eager" />
|
||||
<img src="../assets/images/kia/promotion/ng_theme1_display.jpg" alt="National Geographic Theme" />
|
||||
</div>
|
||||
<div class="img-area">
|
||||
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/promotion/Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/promotion/Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/promotion/Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/promotion/Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/natgeo/BabyAnimals/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/natgeo/BabyAnimals/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -644,19 +656,21 @@
|
||||
<h3><em>내셔널지오그래픽 우주의 신비</em></h3>
|
||||
<div class="theme-display">
|
||||
<div class="img-area">
|
||||
<img src="../assets/images/kia/promotion/ng_theme2_display.jpg" alt="National Geographic Theme" loading="eager" />
|
||||
<img src="../assets/images/kia/promotion/ng_theme2_display.jpg" alt="National Geographic Theme" />
|
||||
</div>
|
||||
<div class="img-area">
|
||||
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/promotion/Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/promotion/Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/promotion/Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/promotion/Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/natgeo/SpaceWonder/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/natgeo/SpaceWonder/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -664,19 +678,21 @@
|
||||
<h3><em>내셔널지오그래픽 자연의 순간</em></h3>
|
||||
<div class="theme-display">
|
||||
<div class="img-area">
|
||||
<img src="../assets/images/kia/promotion/ng_theme3_display.jpg" alt="National Geographic Theme" loading="eager" />
|
||||
<img src="../assets/images/kia/promotion/ng_theme3_display.jpg" alt="National Geographic Theme" />
|
||||
</div>
|
||||
<div class="img-area">
|
||||
<video class="video-welcome" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/promotion/Welcome.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/promotion/Welcome.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<video class="video-goodbye" playsinline="playsinline" muted="muted" loop preload="none" data-autoplay>
|
||||
<source src="../assets/images/kia/promotion/Goodbye.mov" type="video/quicktime" />
|
||||
<source src="../assets/images/kia/promotion/Goodbye.webm" type="video/webm" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||||
<source src="../assets/images/kia/promotion/natgeo/LandScapes/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/natgeo/LandScapes/Goodbye.mp4" type="video/mp4" />
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -829,22 +845,22 @@
|
||||
<div class="guides-content">
|
||||
<div class="item">
|
||||
<span class="logo">
|
||||
<img src="../assets/images/kia/promotion/marvel_logo1.png" class="img-pc" alt="Marvel's Avengers Assemble" />
|
||||
<img src="../assets/images/kia/promotion/marvel_logo1_m.png" class="img-m" alt="Marvel's Avengers Assemble" />
|
||||
<img src="../assets/images/kia/promotion/marvel_logo1.png" class="img-pc" alt="Marvel’s Avengers Assemble" />
|
||||
<img src="../assets/images/kia/promotion/marvel_logo1_m.png" class="img-m" alt="Marvel’s Avengers Assemble" />
|
||||
</span>
|
||||
<strong>마블 어벤져스 어셈블</strong>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="logo">
|
||||
<img src="../assets/images/kia/promotion/marvel_logo2.png" class="img-pc" alt="Marvel's Avengers Comics" />
|
||||
<img src="../assets/images/kia/promotion/marvel_logo2_m.png" class="img-m" alt="Marvel's Avengers Comics" />
|
||||
<img src="../assets/images/kia/promotion/marvel_logo2.png" class="img-pc" alt="Marvel’s Avengers Comics" />
|
||||
<img src="../assets/images/kia/promotion/marvel_logo2_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
|
||||
</span>
|
||||
<strong>마블 어벤져스 코믹스</strong>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="logo">
|
||||
<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" />
|
||||
<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>
|
||||
</div>
|
||||
@@ -877,15 +893,15 @@
|
||||
<div class="guides-content">
|
||||
<div class="item">
|
||||
<span class="logo">
|
||||
<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" />
|
||||
<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>
|
||||
</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" />
|
||||
<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>
|
||||
</div>
|
||||
@@ -1196,11 +1212,10 @@
|
||||
};
|
||||
}
|
||||
|
||||
// 탭 스크롤 함수 (공통) - DOM 쿼리 최적화
|
||||
var $tabNavigation = $(".tabNavigation");
|
||||
var $tabList = $(".tabList");
|
||||
|
||||
// 탭 스크롤 함수 (공통)
|
||||
function scrollToTab(targetTab, $clickedTab) {
|
||||
var $tabNavigation = $(".tabNavigation");
|
||||
var $tabList = $(".tabList");
|
||||
var tabNavigationWidth = $tabNavigation.width();
|
||||
var tabListWidth = $tabList[0].scrollWidth;
|
||||
|
||||
@@ -1236,41 +1251,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 비디오 자동 재생 처리 (Intersection Observer)
|
||||
function initVideoAutoplay() {
|
||||
if ("IntersectionObserver" in window) {
|
||||
const videoObserver = new IntersectionObserver(
|
||||
function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (entry.isIntersecting && entry.target.hasAttribute("data-autoplay")) {
|
||||
entry.target.play().catch(function (err) {
|
||||
// 자동 재생 실패 시 무시 (사용자 상호작용 필요)
|
||||
});
|
||||
} else if (!entry.isIntersecting) {
|
||||
entry.target.pause();
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.5,
|
||||
}
|
||||
);
|
||||
|
||||
document.querySelectorAll("video[data-autoplay]").forEach(function (video) {
|
||||
videoObserver.observe(video);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 탭 네비게이션 기능
|
||||
$(document).ready(function () {
|
||||
// DOM 쿼리 캐싱
|
||||
var $tabNavigation = $(".tabNavigation");
|
||||
var $tabList = $(".tabList");
|
||||
var $tabItems = $(".tabItem");
|
||||
var $tabLinks = $(".tabLink");
|
||||
var $tabContents = $(".tabContent");
|
||||
|
||||
// Disney 스와이퍼 초기화
|
||||
var disneySwiper = new Swiper(".disneySwiper", {
|
||||
slidesPerView: "auto",
|
||||
@@ -1328,25 +1310,28 @@
|
||||
});
|
||||
|
||||
// 탭 클릭 이벤트
|
||||
$tabLinks.on("click", function (e) {
|
||||
$(".tabLink").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var targetTab = $(this).attr("href");
|
||||
var $targetContent = $(targetTab);
|
||||
var $clickedTab = $(this).parent();
|
||||
const $parentTabNavigation = $(".tabNavigation");
|
||||
|
||||
// 모든 탭에서 active 클래스 제거
|
||||
$tabItems.removeClass("active");
|
||||
$tabContents.removeClass("active");
|
||||
$(".tabItem").removeClass("active");
|
||||
$(".tabContent").removeClass("active");
|
||||
|
||||
// 클릭한 탭에 active 클래스 추가
|
||||
$clickedTab.addClass("active");
|
||||
$targetContent.addClass("active");
|
||||
|
||||
console.log("🚀 ~ 222 targetTab:", targetTab);
|
||||
|
||||
if (targetTab != "#themeSeries" && targetTab != "#overview") {
|
||||
$tabNavigation.addClass("is_black");
|
||||
$parentTabNavigation.addClass("is_black");
|
||||
} else {
|
||||
$tabNavigation.removeClass("is_black");
|
||||
$parentTabNavigation.removeClass("is_black");
|
||||
}
|
||||
|
||||
// 탭 가로스크롤 중앙 정렬
|
||||
@@ -1359,113 +1344,76 @@
|
||||
}
|
||||
});
|
||||
|
||||
// 이미지 로드 완료 후 스크롤 스파이 초기화
|
||||
function initScrollSpy() {
|
||||
// 스크롤 이벤트로 탭 자동 포커싱 (throttle 적용)
|
||||
var handleScroll = throttle(function () {
|
||||
var scrollTop = $(window).scrollTop();
|
||||
var $overviewBg = $("#overview .parallax-bg");
|
||||
// 스크롤 이벤트로 탭 자동 포커싱 (throttle 적용)
|
||||
var handleScroll = throttle(function () {
|
||||
var scrollTop = $(window).scrollTop();
|
||||
|
||||
if (scrollTop <= 50) {
|
||||
$overviewBg.removeClass("reveal2");
|
||||
}
|
||||
|
||||
// 각 탭 콘텐츠의 위치 확인
|
||||
$tabContents.each(function () {
|
||||
var $this = $(this);
|
||||
var contentTop = $this.offset().top;
|
||||
var contentHeight = $this.outerHeight();
|
||||
var contentBottom = contentTop + contentHeight;
|
||||
|
||||
// 현재 스크롤 위치가 탭 콘텐츠 영역에 있는지 확인
|
||||
if (scrollTop + 200 >= contentTop && scrollTop + 300 <= contentBottom) {
|
||||
var tabId = $this.attr("id");
|
||||
var $currentTab = $tabLinks.filter('[href="#' + tabId + '"]').parent();
|
||||
|
||||
// 현재 활성화된 탭과 다르면 변경
|
||||
if (!$currentTab.hasClass("active")) {
|
||||
$tabItems.removeClass("active");
|
||||
$tabContents.removeClass("active");
|
||||
$currentTab.addClass("active");
|
||||
$this.addClass("active");
|
||||
|
||||
if (tabId === "ThemeSelectGuide" || tabId === "recentTheme" || tabId === "availableCars" || tabId === "moreFeatures" || tabId === "information") {
|
||||
$tabNavigation.addClass("is_black");
|
||||
} else {
|
||||
$tabNavigation.removeClass("is_black");
|
||||
}
|
||||
|
||||
// 탭 가로스크롤 중앙 정렬
|
||||
scrollToTab("#" + tabId, $currentTab);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
$(window).on("scroll", handleScroll);
|
||||
|
||||
// 초기 스크롤 위치에서도 한 번 실행
|
||||
handleScroll();
|
||||
|
||||
// URL 해시에 따른 탭 활성화 (이미지 로드 후 실행)
|
||||
if (window.location.hash) {
|
||||
var hashTab = window.location.hash;
|
||||
if ($(hashTab).length) {
|
||||
$tabItems.removeClass("active");
|
||||
$tabContents.removeClass("active");
|
||||
$tabLinks
|
||||
.filter('[href="' + hashTab + '"]')
|
||||
.parent()
|
||||
.addClass("active");
|
||||
$(hashTab).addClass("active");
|
||||
const $parentTabNavigation = $(".tabNavigation");
|
||||
|
||||
// 해시로 접근한 경우에도 해당 탭으로 스크롤 이동
|
||||
setTimeout(function () {
|
||||
var $targetContent = $(hashTab);
|
||||
if ($targetContent.length) {
|
||||
var scrollTop = $targetContent.offset().top;
|
||||
window.scrollTo(0, scrollTop);
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
if (scrollTop <= 50) {
|
||||
$("#overview .parallax-bg").removeClass("reveal2");
|
||||
}
|
||||
}
|
||||
|
||||
// 모든 이미지 로드 완료 대기
|
||||
var images = document.querySelectorAll('img[loading="eager"]');
|
||||
var imagesToLoad = images.length;
|
||||
var imagesLoaded = 0;
|
||||
// 각 탭 콘텐츠의 위치 확인
|
||||
$(".tabContent").each(function () {
|
||||
var $this = $(this);
|
||||
var contentTop = $this.offset().top;
|
||||
var contentHeight = $this.outerHeight();
|
||||
var contentBottom = contentTop + contentHeight;
|
||||
|
||||
if (imagesToLoad === 0) {
|
||||
// eager 이미지가 없으면 즉시 초기화
|
||||
initScrollSpy();
|
||||
} else {
|
||||
images.forEach(function (img) {
|
||||
if (img.complete) {
|
||||
imagesLoaded++;
|
||||
if (imagesLoaded === imagesToLoad) {
|
||||
initScrollSpy();
|
||||
// 현재 스크롤 위치가 탭 콘텐츠 영역에 있는지 확인
|
||||
if (scrollTop + 200 >= contentTop && scrollTop + 300 <= contentBottom) {
|
||||
var tabId = $this.attr("id");
|
||||
var $currentTab = $('.tabLink[href="#' + tabId + '"]').parent();
|
||||
var $parentTabNavigation = $('.tabLink[href="#' + tabId + '"]')
|
||||
.parent()
|
||||
.parent()
|
||||
.parent()
|
||||
.parent();
|
||||
|
||||
// 현재 활성화된 탭과 다르면 변경
|
||||
if (!$currentTab.hasClass("active")) {
|
||||
$(".tabItem").removeClass("active");
|
||||
$(".tabContent").removeClass("active");
|
||||
$currentTab.addClass("active");
|
||||
$this.addClass("active");
|
||||
|
||||
if (tabId === "ThemeSelectGuide" || tabId === "recentTheme" || tabId === "availableCars" || tabId === "moreFeatures" || tabId === "information" || tabId === "moreFeatures") {
|
||||
$parentTabNavigation.addClass("is_black");
|
||||
} else {
|
||||
// console.log("🚀 ~ 111 tabId은 블랙 아냐:", tabId);
|
||||
$parentTabNavigation.removeClass("is_black");
|
||||
}
|
||||
|
||||
// 탭 가로스크롤 중앙 정렬
|
||||
scrollToTab("#" + tabId, $currentTab);
|
||||
}
|
||||
} else {
|
||||
img.addEventListener("load", function () {
|
||||
imagesLoaded++;
|
||||
if (imagesLoaded === imagesToLoad) {
|
||||
initScrollSpy();
|
||||
}
|
||||
});
|
||||
img.addEventListener("error", function () {
|
||||
imagesLoaded++;
|
||||
if (imagesLoaded === imagesToLoad) {
|
||||
initScrollSpy();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// 비디오 자동 재생 초기화
|
||||
initVideoAutoplay();
|
||||
$(window).on("scroll", handleScroll);
|
||||
|
||||
// URL 해시에 따른 탭 활성화
|
||||
if (window.location.hash) {
|
||||
var hashTab = window.location.hash;
|
||||
if ($(hashTab).length) {
|
||||
$(".tabItem").removeClass("active");
|
||||
$(".tabContent").removeClass("active");
|
||||
$('.tabLink[href="' + hashTab + '"]')
|
||||
.parent()
|
||||
.addClass("active");
|
||||
$(hashTab).addClass("active");
|
||||
const $parentTabNavigation = $(".tabNavigation");
|
||||
|
||||
// 해시로 접근한 경우에도 해당 탭으로 스크롤 이동
|
||||
setTimeout(function () {
|
||||
var $targetContent = $(hashTab);
|
||||
if ($targetContent.length) {
|
||||
var scrollTop = $targetContent.offset().top;
|
||||
window.scrollTo(0, scrollTop);
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ScrollMagic 섹션 이동 애니메이션
|
||||
@@ -1630,6 +1578,20 @@
|
||||
TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, ease: "power2.out" });
|
||||
}
|
||||
})
|
||||
.on("leave", function () {
|
||||
// console.log("🚀 ~ LEAVE 11111", section.id);
|
||||
})
|
||||
// .on("start", function (event) {
|
||||
// console.log("🚀 ~ START", section.id, "scrollTop:", event.scrollPos);
|
||||
// })
|
||||
// .on("end", function (event) {
|
||||
// console.log("🚀 ~ END", section.id, "scrollTop:", event.scrollPos);
|
||||
// })
|
||||
.on("progress", function (event) {
|
||||
if (event.progress === 1) {
|
||||
// console.log("🚀 ~ PROGRESS 100%", section.id, "scrollTop:", event.scrollPos);
|
||||
}
|
||||
})
|
||||
|
||||
.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) })
|
||||
|
||||
Reference in New Issue
Block a user