gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

인트로 사운드 버튼, 아케이드게임 레이아웃 수정 중

Browse Source
This commit is contained in:
hyeonggil
2024-07-30 16:55:25 +09:00
parent 1d6468b0e5
commit d54256da93
9 changed files with 262 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
assets/css/pdp_detail.css
View File

@@ -2315,6 +2315,12 @@
height: 80rem;
}
}
.inCarGame .comp_top.title-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.inCarGame .visualBg {
position: absolute;
width: 100%;
@@ -2337,6 +2343,16 @@
height: auto;
}
}
.inCarGame .visualBg.swiper {
position: static;
}
.inCarGame .visualBg.swiper .image_area {
height: 70rem;
}
.inCarGame .visualBg.swiper .image_area img {
-o-object-fit: cover;
object-fit: cover;
}
.inCarGame.comp_wide .comp_body.layer_up .text_area {
margin-top: 7rem;
}
@@ -2983,7 +2999,7 @@
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 125rem;
max-width: 120rem;
padding-top: 43.5%;
}
.editorWarp .video_wrap .video-area .video {
@@ -2993,7 +3009,6 @@
transform: translate(-50%, -50%);
width: 100%;
background: #000;
aspect-ratio: 16/9;
}
.editorWarp .video_wrap .video-area .video video {
display: block;
@@ -3001,16 +3016,21 @@
height: 100%;
visibility: visible;
}
.editorWarp .video_wrap .video-area .video video video[poster] {
.editorWarp .video_wrap .video-area .video video[poster] {
height: 100%;
width: 100%;
}
.editorWarp .video_wrap .video-area .video .btn-play {
display: none;
.editorWarp .video_wrap .video-area .video .video-ctrl {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
gap: 4rem;
}
.editorWarp .video_wrap .video-area .video .btn-play {
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_play.png) no-repeat center/100% auto;
@@ -3024,8 +3044,31 @@
.editorWarp .video_wrap .video-area .video .btn-play.play {
display: block;
}
.editorWarp .video_wrap .video-area .video:hover .btn-play.pause {
display: block;
@media (max-width: 501px) {
.editorWarp .video_wrap .video-area .video .btn-play {
width: 4rem;
height: 4rem;
}
}
.editorWarp .video_wrap .video-area .video .btn-sound {
display: none;
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center/100% auto;
text-indent: -9999em;
cursor: pointer;
}
.editorWarp .video_wrap .video-area .video .btn-sound.off {
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center/100% auto;
}
.editorWarp .video_wrap .video-area .video .btn-sound.on {
background: url(../images/kia/contents/ico_sound_on.png) no-repeat center/100% auto;
}
@media (max-width: 501px) {
.editorWarp .video_wrap .video-area .video .btn-sound {
width: 4rem;
height: 4rem;
}
}
@media (max-width: 768px) {
.editorWarp .video_wrap .video-area {
@@ -3091,6 +3134,24 @@
.editorWarp .video_wrap .btn-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.editorWarp .video_wrap.played:hover .video-ctrl {
display: flex;
}
.editorWarp .video_wrap.played:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.played: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 {
display: flex;
}
.editorWarp .video_wrap.paused:hover .video-ctrl .btn-play,
.editorWarp .video_wrap.paused:hover .video-ctrl .btn-sound {
display: block;
}
@media (max-width: 768px) {
.editorWarp .video_wrap {
height: 56rem;
@@ -3098,7 +3159,7 @@
}
@media (max-width: 501px) {
.editorWarp .video_wrap {
height: 36rem;
height: 40rem;
}
}
.editorWarp .close-today {
@@ -3151,7 +3212,7 @@
}
@media (max-width: 501px) {
.editorWarp .close-today {
bottom: 4rem;
bottom: 3.5rem;
font-size: 1.2rem;
}
}
@@ -3202,4 +3263,12 @@
filter: blur(0);
}
}
.editorWarp .srsPlus .close-today {
bottom: 13rem;
}
@media (max-width: 1920px) {
.editorWarp .srsPlus .close-today {
bottom: 2vw;
}
}
/*# 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

118
assets/css/pdp_detail.scss
View File

@@ -2609,6 +2609,13 @@
}
}
.comp_top.title-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.visualBg {
position: absolute;
width: 100%;
@@ -2635,6 +2642,18 @@
}
&.swiper {
position: static;
.image_area {
height: 70rem;
img {
object-fit: cover;
}
}
}
// &:after {
// content:"";
// display: block;
@@ -3330,6 +3349,7 @@
}
}
.comp_wide {
&.title-only {
&+.comp_wide {
@@ -3395,7 +3415,7 @@
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 125rem;
max-width: 120rem;
padding-top: 43.5%;
.video {
@@ -3405,25 +3425,32 @@
transform: translate(-50%, -50%);
width: 100%;
background: #000;
aspect-ratio: 16/9;
// aspect-ratio: 16/9;
video {
display: block;
width: 100%;
height: 100%;
visibility: visible;
video[poster]{
height:100%;
width:100%;
&[poster] {
height: 100%;
width: 100%;
}
}
.btn-play {
display: none;
.video-ctrl {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
gap: 4rem;
}
.btn-play {
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_play.png) no-repeat center / 100% auto;
@@ -3439,12 +3466,34 @@
display: block;
}
@include maxmobile {
width: 4rem;
height: 4rem;
}
}
&:hover {
.btn-play.pause {
display: block;
.btn-sound {
display: none;
width: 8rem;
height: 8rem;
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center / 100% auto;
text-indent: -9999em;
cursor: pointer;
&.off {
background: url(../images/kia/contents/ico_sound_off.png) no-repeat center / 100% auto;
}
&.on {
background: url(../images/kia/contents/ico_sound_on.png) no-repeat center / 100% auto;
}
@include maxmobile {
width: 4rem;
height: 4rem;
}
}
}
@@ -3519,6 +3568,39 @@
transform: translate(-50%, -50%) rotate(-45deg);
}
&.played {
&:hover {
.video-ctrl {
display: flex;
.btn-play,
.btn-sound {
display: block;
}
}
}
}
&.paused {
.btn-play,
.btn-sound {
display: block !important;
}
&:hover {
.video-ctrl {
display: flex;
.btn-play,
.btn-sound {
display: block;
}
}
}
}
// .btn-close {
// position: absolute;
// top: 2rem;
@@ -3541,7 +3623,7 @@
}
@include maxmobile {
height: 36rem;
height: 40rem;
}
}
@@ -3597,7 +3679,7 @@
}
@include maxmobile {
bottom: 4rem;
bottom: 3.5rem;
font-size: 1.2rem;
}
}
@@ -3660,4 +3742,16 @@
}
}
.srsPlus {
.close-today {
bottom: 13rem;
}
@media(max-width: 1920px) {
.close-today {
bottom: 2vw;
}
}
}
}

BIN
assets/images/kia/contents/ico_sound_off.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
assets/images/kia/contents/ico_sound_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

31
assets/js/common.js
View File

@@ -301,7 +301,7 @@ $(document).ready(function () {
$(".floating_menu").fadeOut();
}
//디스플레이테마 스크롤 시 스와이퍼 실행
if ($(this).scrollTop() > 400) {
if ($(this).scrollTop() > 10) {
if (flagScroll) {
// console.log("스크롤 실행")
pdpIntro();
@@ -463,6 +463,8 @@ function pdpDisplayThemeSwiperDtl() {
flagScroll = false;
}
function pdpInCarGameSwiper() {
if ($(".pdpInCarGameSwiper").length > 0) {
}
if ($(".pdpInCarGameSwiper").length > 0) {
var swiperTheme = new Swiper(".pdpInCarGameSwiper", {
slidesPerView: "auto",
@@ -702,19 +704,30 @@ function pdpIntro() {
switch (true) {
case $(".displayTheme").length > 0:
cookieVal = "displayThemeIntro";
$(".video_wrap video").attr("poster","../assets/images/kia/pdp/display_theme/intro_poster.png")
$(".video_wrap video").attr(
"poster",
"../assets/images/kia/pdp/display_theme/intro_poster.png"
);
break;
case $(".inCarGame").length > 0:
cookieVal = "inCarGameIntro";
$(".video_wrap video").attr("poster","../assets/images/kia/pdp/in_car_game/intro_poster.png")
$(".video_wrap video").attr(
"poster",
"../assets/images/kia/pdp/in_car_game/intro_poster.png"
);
break;
case $(".srsPlus").length > 0:
cookieVal = "srsPlusIntro";
$(".video_wrap video").attr("poster","../assets/images/kia/pdp/srs_plus/intro_poster.png")
$(".video_wrap video").attr(
"poster",
"../assets/images/kia/pdp/srs_plus/intro_poster.png"
);
break;
}
$(".close-today").html(
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
);
if (getCookie(cookieVal)) {
$(".editorWarp").removeClass("playing");
@@ -832,6 +845,14 @@ $(document).on("click", ".video_wrap .btn-play.pause", function () {
videoElements[0].pause();
}
});
$(document).on("click", ".video_wrap .btn-sound", function () {
const videoElements = document.querySelectorAll(".video_wrap video");
if (videoElements) {
videoElements[0].muted = !videoElements[0].muted;
$(this).toggleClass("on");
}
});
//마이페이지 lnb 스와이프
var ww = $(window).width();

9
product/pdp_display_theme_0429.html
View File

@@ -31,10 +31,10 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1145"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v111452"></script>
<!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v55" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v1552" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">
@@ -593,7 +593,10 @@
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<div class="btn-close">닫기</div>
<div class="btn-play play">Play</div>
<div class="video-ctrl">
<div class="btn-sound on">sound</div>
<div class="btn-play play">Play</div>
</div>
</div>
</div>
<div class="close-today">

41
product/pdp_in_car_game.html
View File

@@ -31,10 +31,10 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v43"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v24442"></script>
<!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v8" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v24442" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">
@@ -336,11 +336,35 @@
<div class="comp_wide comp_1x_w_v_o_b inCarGame">
<div class="image_area visualBg">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen.jpg" class="web" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
<div class="image_area visualBg swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen.jpg" class="web" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen.jpg" class="web" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
</div>
</div>
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen.jpg" class="web" alt="디스플레이 테마 이미지">
<img src="../assets/images/kia/pdp/in_car_game/theme1_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
</div>
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<div class="comp_top">
<div class="comp_top title-area">
<div class="comp_body layer_up">
<div class="text_area">
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
@@ -412,7 +436,10 @@
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<div class="btn-close">닫기</div>
<div class="btn-play play">Play</div>
<div class="video-ctrl">
<div class="btn-sound on">sound</div>
<div class="btn-play play">Play</div>
</div>
</div>
</div>
<div class="close-today">

20
product/pdp_srs_plus.html
View File

@@ -31,10 +31,10 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v55"></script>
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1252532"></script>
<!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v55" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v1522552" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">
@@ -338,24 +338,26 @@
</div>
</div>
</div>
<div class="btn-intro" style="color:#fff;">
Intro영상 다시보기
</div>
</div>
<div class="comp_md layer_up"></div>
<div class="btn-intro" style="color:#fff;">
Intro영상 다시보기
</div>
<div class="comp_md layer_up video_wrap">
<div class="video-area">
<div class="video">
<video playsinline="playsinline">
<source src="../assets/images/kia/pdp/srs_plus/intro2.mp4" type="video/mp4">
<source src="../assets/images/kia/pdp/srs_plus/intro.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<div class="btn-close">닫기</div>
<div class="btn-play play">Play</div>
<div class="video-ctrl">
<div class="btn-sound on">sound</div>
<div class="btn-play play">Play</div>
</div>
</div>
</div>
<div class="close-today">