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
2024-07-30 22:21:44 +09:00
parent d54256da93
commit 6ba8b6f6a0
9 changed files with 186 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
assets/css/pdp_detail.css
View File

@@ -2312,7 +2312,6 @@
@media (max-width: 768px) {
.inCarGame.comp_1x_w_v_o_b .image_area {
overflow: hidden;
height: 80rem;
}
}
.inCarGame .comp_top.title-area {
@@ -2344,10 +2343,20 @@
}
}
.inCarGame .visualBg.swiper {
position: static;
position: relative;
}
.inCarGame .visualBg.swiper .image_area {
height: 70rem;
.inCarGame .visualBg.swiper .swiper-pagination {
bottom: 3rem;
}
.inCarGame .visualBg.swiper .swiper-pagination .swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
height: 0.4rem;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
}
.inCarGame .visualBg.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: rgb(255, 255, 255);
}
.inCarGame .visualBg.swiper .image_area img {
-o-object-fit: cover;
@@ -2385,7 +2394,8 @@
position: relative;
z-index: 2;
padding: 4rem 0;
background-color: rgba(0, 0, 0, 0.8);
margin-top: 8rem;
background-color: rgb(0, 0, 0);
}
@media (max-width: 1025px) {
.inCarGame.comp_wide .comp_bottom {
@@ -2395,6 +2405,7 @@
@media (max-width: 768px) {
.inCarGame.comp_wide .comp_bottom {
padding: 0;
margin-top: 4rem;
}
}
.inCarGame.comp_wide .comp_bottom .com_bottm_inner {
@@ -2488,13 +2499,6 @@
}
.inCarGame .comp_top {
z-index: 2;
height: 340px;
max-height: 529px;
}
@media (max-width: 768px) {
.inCarGame .comp_top {
height: 43.9rem;
}
}
.inCarGame .comp_top .comp_body .text_area h3 {
margin-bottom: 2rem;
@@ -2568,7 +2572,7 @@
.inCarGame + .comp_1x_b_v_s_b {
position: relative;
z-index: 2;
margin-top: 8rem;
margin-top: 2rem;
}
@media (max-width: 768px) {
.inCarGame + .comp_1x_b_v_s_b {
@@ -2591,7 +2595,7 @@
}
@media (max-width: 768px) {
.inCarGame + .comp_1x_b_v_s_b {
margin-top: 4rem;
margin-top: 3rem;
}
}
.inCarGame + .comp_1x_b_v_s_b .dtlImgs .text_area {
@@ -2637,6 +2641,17 @@
.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme12 .text_theme12 {
display: block;
}
.inCarGame.comp_2x_b_h_s_e2 .comp_body .item .text_area {
margin-top: 0;
}
.inCarGame.comp_wide.comp_2x_b_h_s_e2 {
margin-top: 20rem;
}
@media (max-width: 768px) {
.inCarGame.comp_wide.comp_2x_b_h_s_e2 {
margin-top: 10rem;
}
}
.inCarGame .comp_body .swiper-slide .text_area h5 {
font-size: 3rem;
}
@@ -2665,6 +2680,7 @@
@media (max-width: 768px) {
.inCarGame .inCarGameDtlThumb .swiper-slide {
height: 4.5rem;
border-radius: 0.4rem;
}
}
.inCarGame .inCarGameDtlThumb .swiper-slide.video-slideThumb:before {
@@ -2692,7 +2708,6 @@
.inCarGame .inCarGameDtlThumb .swiper-slide img {
display: block;
max-width: 100%;
border-radius: 0.8rem;
overflow: hidden;
}
.inCarGame .inCarGameDtlThumb .swiper-slide video {
@@ -2989,7 +3004,7 @@
width: 100%;
padding-top: 56.25%;
z-index: 4;
background: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.8);
opacity: 1;
transition: all 0.3s ease;
}
@@ -3081,7 +3096,7 @@
}
.editorWarp .video_wrap .btn-close {
position: absolute;
top: -6rem;
top: -4rem;
right: -16rem;
width: 14rem;
height: 14rem;
@@ -3134,22 +3149,22 @@
.editorWarp .video_wrap .btn-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.editorWarp .video_wrap.played:hover .video-ctrl {
.editorWarp .video_wrap.played .video:hover .video-ctrl {
display: flex;
}
.editorWarp .video_wrap.played:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.played:hover .video-ctrl .btn-sound {
.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-sound {
display: block;
}
.editorWarp .video_wrap.paused .btn-play,
.editorWarp .video_wrap.paused .btn-sound {
display: block !important;
}
.editorWarp .video_wrap.paused:hover .video-ctrl {
.editorWarp .video_wrap.paused .video:hover .video-ctrl {
display: flex;
}
.editorWarp .video_wrap.paused:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.paused:hover .video-ctrl .btn-sound {
.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-sound {
display: block;
}
@media (max-width: 768px) {
@@ -3254,8 +3269,7 @@
.editorWarp.playing .srsPlus .visualBg {
filter: blur(2px);
}
.editorWarp.playing .displayThemeDtl,
.editorWarp.playing .inCarGameDtl {
.editorWarp.playing .displayThemeDtl {
opacity: 0;
}
@media (max-width: 1700px) {
@@ -3271,4 +3285,34 @@
bottom: 2vw;
}
}
.editorWarp .visualBg .swiper-navigation {
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 100%;
max-width: 140rem;
height: 0;
transform: translate(-50%, -50%);
}
@media (max-width: 501px) {
.editorWarp .visualBg .swiper-navigation {
max-width: 92%;
}
}
.editorWarp .visualBg .swiper-button-next, .editorWarp .visualBg .swiper-button-prev {
position: static;
width: 1.8rem;
height: 3.6rem;
margin: 0;
background: url(../images/common/ico_arrow_r.png) no-repeat center/contain;
}
.editorWarp .visualBg .swiper-button-next:after, .editorWarp .visualBg .swiper-button-prev:after {
display: none;
}
.editorWarp .visualBg .swiper-button-prev {
background: url(../images/common/ico_arrow_l.png) no-repeat center/contain;
}
/*# sourceMappingURL=pdp_detail.css.map */

2
assets/css/pdp_detail.css.map
View File

File diff suppressed because one or more lines are too long

94
assets/css/pdp_detail.scss
View File

@@ -2604,7 +2604,7 @@
.image_area {
@include maxtablet {
overflow: hidden;
height: 80rem;
// height: 80rem;
}
}
}
@@ -2643,10 +2643,23 @@
}
&.swiper {
position: static;
position: relative;
.swiper-pagination {
bottom:3rem;
.swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
height: .4rem;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
&.swiper-pagination-bullet-active {
background-color: rgba(255, 255, 255, 1);
}
}
}
.image_area {
height: 70rem;
img {
object-fit: cover;
@@ -2713,7 +2726,8 @@
z-index: 2;
// max-height: 26rem;
padding: 4rem 0;
background-color: rgba(0, 0, 0, .8);
margin-top: 8rem;
background-color: rgba(0, 0, 0, 1);
@include maxdesktop {
// max-height: 22rem;
@@ -2723,6 +2737,7 @@
@include maxtablet {
// max-height: 22rem;
padding: 0;
margin-top: 4rem;
}
.com_bottm_inner {
@@ -2828,12 +2843,12 @@
.comp_top {
z-index: 2;
// height: 46rem;
height: 340px;
max-height: 529px;
// height: 340px;
// max-height: 529px;
@include maxtablet {
height: 43.9rem;
}
// @include maxtablet {
// height: 43.9rem;
// }
.comp_body {
.text_area {
@@ -2931,7 +2946,7 @@
&+.comp_1x_b_v_s_b {
position: relative;
z-index: 2;
margin-top: 8rem;
margin-top: 2rem;
@include maxtablet {
margin-top: 7.5rem;
@@ -2955,7 +2970,7 @@
}
@include maxtablet {
margin-top: 4rem;
margin-top: 3rem;
}
.dtlImgs {
@@ -2974,6 +2989,18 @@
}
}
&.comp_2x_b_h_s_e2 .comp_body .item .text_area {
margin-top: 0;
}
&.comp_wide.comp_2x_b_h_s_e2 {
margin-top:20rem;
@include maxtablet {
margin-top: 10rem;
}
}
.comp_body .swiper-slide .text_area h5 {
font-size: 3rem;
@@ -3002,6 +3029,7 @@
@include maxtablet {
height: 4.5rem;
border-radius: 0.4rem;
}
cursor: pointer;
@@ -3036,7 +3064,6 @@
img {
display: block;
max-width: 100%;
border-radius: 0.8rem;
overflow: hidden;
}
@@ -3405,7 +3432,7 @@
// transform: translateY(-36rem);
padding-top: 56.25%;
z-index: 4;
background: rgba(0, 0, 0, .5);
background: rgba(0, 0, 0, .8);
opacity: 1;
transition: all 0.3s ease;
@@ -3510,7 +3537,7 @@
.btn-close {
position: absolute;
top: -6rem;
top: -4rem;
right: -16rem;
width: 14rem;
height: 14rem;
@@ -3569,7 +3596,7 @@
}
&.played {
.video {
&:hover {
.video-ctrl {
display: flex;
@@ -3581,6 +3608,7 @@
}
}
}
}
&.paused {
@@ -3588,7 +3616,7 @@
.btn-sound {
display: block !important;
}
.video {
&:hover {
.video-ctrl {
display: flex;
@@ -3600,6 +3628,7 @@
}
}
}
}
// .btn-close {
// position: absolute;
@@ -3729,8 +3758,7 @@
filter: blur(2px);
}
.displayThemeDtl,
.inCarGameDtl {
.displayThemeDtl {
opacity: 0;
}
@@ -3754,4 +3782,34 @@
}
}
}
.visualBg {
.swiper-navigation {
display: flex;
justify-content: space-between;
position: absolute;
top:50%;
left: 50%;
z-index: 10;
width: 100%;
max-width: 140rem;
height: 0;
transform: translate(-50%, -50%);
@include maxmobile {
max-width: 92%;
}
}
.swiper-button-next, .swiper-button-prev {
position: static;
width:1.8rem;
height: 3.6rem;
margin: 0;
background: url(../images/common/ico_arrow_r.png) no-repeat center / contain;
&:after {display: none;}
}
.swiper-button-prev {
background: url(../images/common/ico_arrow_l.png) no-repeat center / contain;
}
}
}

BIN
assets/images/common/ico_arrow_l.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 B

BIN
assets/images/common/ico_arrow_r.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 B

BIN
assets/images/kia/pdp/in_car_game/theme1_screen.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 MiB

After

Width:  |  Height:  |  Size: 768 KiB

BIN
assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 250 KiB

After

Width:  |  Height:  |  Size: 588 KiB

25
assets/js/common.js
View File

@@ -463,8 +463,25 @@ function pdpDisplayThemeSwiperDtl() {
flagScroll = false;
}
function pdpInCarGameSwiper() {
if ($(".pdpInCarGameSwiper").length > 0) {
if ($(".inCarGame .visualBg").length > 0) {
}
var swiperTheme = new Swiper(".visualBg", {
slidesPerView: 1,
loop: true,
freeMode: false,
navigation: {
nextEl: ".inCarGame .visualBg .swiper-button-next",
prevEl: ".inCarGame .visualBg .swiper-button-prev",
},
pagination: {
el: ".inCarGame .visualBg .swiper-pagination",
},
on: {
init: function () {
// console.log('pdpInCarGameSwiper 실행한다')
},
},
});
if ($(".pdpInCarGameSwiper").length > 0) {
var swiperTheme = new Swiper(".pdpInCarGameSwiper", {
slidesPerView: "auto",
@@ -603,7 +620,7 @@ $(document).on("click", ".inCarGame .dtthumb", function (e) {
`;
$(this).addClass(`${dtlImgPath}`);
console.log("videoEle===", videoEle);
// console.log("videoEle===", videoEle);
beforeDtlImgPath = dtlImgPath;
$(this).html(videoEle);
@@ -824,7 +841,7 @@ function pdpIntro() {
}
$(document).on("click", ".video_wrap .btn-play.play", function () {
console.log("intro 플레이");
// console.log("intro 플레이");
const btnPlay = $(".video_wrap .btn-play");
const videoElements = document.querySelectorAll(".video_wrap video");
@@ -835,7 +852,7 @@ $(document).on("click", ".video_wrap .btn-play.play", function () {
}
});
$(document).on("click", ".video_wrap .btn-play.pause", function () {
console.log("intro 정지");
// console.log("intro 정지");
const btnPlay = $(".video_wrap .btn-play");
const videoElements = document.querySelectorAll(".video_wrap video");

7
product/pdp_in_car_game.html
View File

@@ -358,9 +358,12 @@
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
@@ -380,7 +383,7 @@
</div>
</div>
<div class="comp_md layer_up"></div>
<div class="comp_bottom">
<div class="comp_bottom comp_body">
<div class="com_bottm_inner">
<div class="swiper pdpInCarGameSwiper">