https://kade1.dothome.co.kr
지금 9:1은 재생이 되는데 비율을 10:0으로 바꾸면 영상 자체가 안나오게 되어있어서 아무리 바꿔도 안되요...
Copy
<?php
include_once('./_common.php');
$is_main = true;
if (defined('_GNUBOARD_')) { include_once(G5_THEME_PATH . '/head.php'); }
?>
<link rel="stylesheet" href="<?php echo G5_THEME_URL; ?>/css/layout.css">
<style>
@media (max-width: 768px) {
#hd, #header, .hd_wrapper, #tnb { display: none !important; }
body { padding-top: 0 !important; margin: 0; }
}
#fullscreen_split_wrap {
position: relative; width: 100%; height: 100vh;
background: #000; overflow: hidden; display: flex;
}
/* [기능 추가] 중앙 로고 -> 왼쪽 상단 이동 애니메이션 */
.main_logo_ani {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%); /* 초기 중앙 배치 */
z-index: 100;
text-align: center;
pointer-events: none;
transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
/* 영상에 마우스가 올라가 active 클래스가 붙으면 이동 */
#fullscreen_split_wrap.active .main_logo_ani {
top: 40px; left: 40px;
transform: translate(0, 0);
text-align: left;
}
.main_logo_ani h1 { font-size: 32px; font-weight: 900; color: #fff; margin: 0; letter-spacing: -1px; }
.main_logo_ani h1 span { color: #eb0029; }
.main_logo_ani p {
color: rgba(255,255,255,0.4); font-size: 11px; letter-spacing: 5px; margin-top: 5px;
opacity: 0; transition: opacity 0.5s 0.3s;
}
#fullscreen_split_wrap.active .main_logo_ani p { opacity: 1; }
/* 9:1 비율 설정 */
.full_pane {
position: relative; flex: 1; height: 100%;
transition: flex 0.8s cubic-bezier(0.86, 0, 0.07, 1);
overflow: hidden; cursor: pointer; background: #111;
}
.full_pane:hover { flex: 9; }
.full_pane:not(:hover) { flex: 1; }
.video_bg {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 100vw; height: 100vh; object-fit: cover;
filter: brightness(0.3); transition: filter 0.6s ease;
}
.full_pane:hover .video_bg { filter: brightness(1); }
/* 볼륨 조절 UI */
.volume_control {
position: absolute; top: 40px; right: 40px; z-index: 200;
display: flex; align-items: center; gap: 10px; opacity: 0;
transition: opacity 0.5s; background: rgba(0,0,0,0.5);
padding: 8px 15px; border-radius: 30px;
}
.full_pane:hover .volume_control { opacity: 1; }
.volume_control span { color: #fff; font-size: 11px; font-weight: bold; }
.volume_slider { -webkit-appearance: none; width: 70px; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; outline: none; }
.volume_slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #eb0029; border-radius: 50%; cursor: pointer; }
/* 콘텐츠 정보 박스 */
.pane_info {
position: absolute; bottom: 10%; left: 60px; color: #fff; z-index: 10;
opacity: 0; transform: translateY(30px); transition: all 0.6s 0.2s ease;
width: 780px; /* 버튼 5개 한 줄을 위한 너비 확보 */
pointer-events: none;
}
.full_pane:hover .pane_info { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pane_info h2 { font-size: 50px; font-weight: 900; line-height: 1.1; margin-bottom: 30px; }
/* [기능 복구] 버튼 그룹: 한 줄 유지 */
.btn_group { display: flex; gap: 6px; flex-wrap: nowrap; }
.btn_nav {
display: inline-block; padding: 12px 18px;
background: #eb0029 !important; color: #ffffff !important;
font-size: 14px; font-weight: 600; border-radius: 2px;
transition: all 0.3s; white-space: nowrap; text-align: center;
}
.btn_nav:hover { background: #ffffff !important; color: #eb0029 !important; }
/* 오른쪽 패널 정렬 */
.full_pane:last-child .pane_info { left: auto; right: 60px; text-align: right; }
.full_pane:last-child .btn_group { justify-content: flex-end; }
/* 모바일 최적화 */
@media (max-width: 768px) {
#fullscreen_split_wrap { flex-direction: column; }
.full_pane:hover { flex: 5; }
.pane_info { left: 20px; bottom: 5%; width: calc(100% - 40px); }
.pane_info h2 { font-size: 26px; }
.btn_group { flex-wrap: wrap; gap: 8px; }
.btn_nav { flex: 1 1 calc(33.33% - 8px); font-size: 12px; padding: 10px 5px; }
.main_logo_ani { transform: translate(-50%, -50%) scale(0.8); }
}
</style>
<section id="fullscreen_split_wrap">
<div class="main_logo_ani">
<h1>TEAM <span>KOREA</span></h1>
<p>THE SPIRIT OF NATIONAL CHAMPIONS</p>
</div>
<div class="full_pane">
<div class="volume_control">
<span>VOL</span>
<input type="range" class="volume_slider" min="0" max="1" step="0.1" value="0">
</div>
<video class="video_bg" loop muted playsinline preload="auto">
<source src="<?php echo G5_THEME_URL; ?>/video/The Games of Olympiad.mp4" type="video/mp4">
</video>
<div class="pane_info">
<span style="color: #eb0029; font-weight: 800; font-size: 14px; letter-spacing: 2px; display: block; margin-bottom: 10px;">COLLECTION</span>
<h2>밀라노 코르티나<br>동계올림픽</h2>
<div class="btn_group">
<a href="https://kade1.dothome.co.kr/bbs/board.php?bo_table=Olympic" class="btn_nav">국가대표선수</a>
<a href="#" class="btn_nav">종목안내</a>
<a href="#" class="btn_nav">경기일정</a>
<a href="#" class="btn_nav">응원하기</a>
<a href="#" class="btn_nav">실시간영상</a>
</div>
</div>
</div>
<div class="full_pane">
<div class="volume_control">
<span>VOL</span>
<input type="range" class="volume_slider" min="0" max="1" step="0.1" value="0">
</div>
<video class="video_bg" loop muted playsinline preload="auto">
<source src="<?php echo G5_THEME_URL; ?>/video/The Paralympic Games.mp4" type="video/mp4">
</video>
<div class="pane_info">
<span style="color: #eb0029; font-weight: 800; font-size: 14px; letter-spacing: 2px; display: block; margin-bottom: 10px;">MANAGEMENT</span>
<h2>밀라노 코르티나 담페초<br>동계패럴림픽</h2>
<div class="btn_group">
<a href="https://kade1.dothome.co.kr/bbs/board.php?bo_table=Paralympic" class="btn_nav">국가대표선수</a>
<a href="#" class="btn_nav">종목안내</a>
<a href="#" class="btn_nav">경기일정</a>
<a href="#" class="btn_nav">응원하기</a>
<a href="#" class="btn_nav">실시간영상</a>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.classList.add('main-page');
const wrap = document.getElementById('fullscreen_split_wrap');
const panes = document.querySelectorAll('.full_pane');
panes.forEach((pane) => {
const video = pane.querySelector('video');
const slider = pane.querySelector('.volume_slider');
// 초기 볼륨 0 설정
video.volume = 0;
slider.addEventListener('input', (e) => {
const val = e.target.value;
video.volume = val;
video.muted = (val == 0);
});
pane.addEventListener('mouseenter', () => {
// [기능 추가] 마우스가 올라가면 로고 이동 클래스 추가
wrap.classList.add('active');
video.muted = (slider.value == 0);
video.play().catch(() => {
video.muted = true;
video.play();
});
});
pane.addEventListener('mouseleave', () => {
video.pause();
});
});
});
</script>
<?php if (defined('_GNUBOARD_')) { include_once(G5_THEME_PATH . '/tail.php'); } ?>
Copy
@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
/* 기본: 서브 페이지용 (Bright) */
body {
background: #ffffff !important;
font-family: 'Pretendard', sans-serif;
margin: 0; padding: 0;
color: #333333 !important;
}
/* 메인 전용: index.php 로드 시 (Dark) */
body.main-page {
background: #000000 !important;
color: #ffffff !important;
}
img { max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }답변 1개 / 댓글 1개
채택된 답변
+20 포인트
SmartWeb
4일 전
Copy
이렇게 한번 바꿔 보세요
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.classList.add('main-page');
const wrap = document.getElementById('fullscreen_split_wrap');
const panes = document.querySelectorAll('.full_pane');
// 초기 강제 설정 (초기화면 깨짐 방지)
panes.forEach(p => { p.style.flex = '1'; });
panes.forEach((pane) => {
const video = pane.querySelector('video');
const slider = pane.querySelector('.volume_slider');
// 초기 볼륨 0 설정
if (video) {
video.volume = 0;
video.muted = true;
}
if (slider) {
slider.addEventListener('input', (e) => {
const val = e.target.value;
if (video) {
video.volume = val;
video.muted = (val == 0);
}
});
}
pane.addEventListener('mouseenter', () => {
// 로고 이동 클래스 추가
wrap.classList.add('active');
// 모든 패널을 축소시키고, 현재 패널만 확장
panes.forEach(p => {
if (p === pane) {
p.style.flex = '10'; // 확장된 패널
} else {
p.style.flex = '0.01'; // 거의 0 이지만 완전히 0은 아님 -> 비디오 렌더링 보장
}
});
// 비디오 재생 시도
if (video) {
video.muted = (pane.querySelector('.volume_slider')?.value == 0);
video.play().catch(() => {
// 자동재생 제한으로 실패하면 강제로 음소거 후 재시도
video.muted = true;
video.play().catch(() => {});
});
}
});
pane.addEventListener('mouseleave', () => {
// 로고 원상복구
wrap.classList.remove('active');
// 모든 패널을 기본 균등 분할로 복구
panes.forEach(p => p.style.flex = '1');
// 현재 비디오 일시정지
if (video) video.pause();
});
// 모바일 터치용(선택): 터치 시작 시에도 같은 동작을 할 수 있게 함
pane.addEventListener('touchstart', () => {
// 같은 동작(마우스 엔터와 동일)
wrap.classList.add('active');
panes.forEach(p => {
if (p === pane) p.style.flex = '10';
else p.style.flex = '0.01';
});
if (video) {
video.muted = (pane.querySelector('.volume_slider')?.value == 0);
video.play().catch(() => { video.muted = true; video.play().catch(()=>{}); });
}
});
// touchend 시 원복
pane.addEventListener('touchend', () => {
wrap.classList.remove('active');
panes.forEach(p => p.style.flex = '1');
if (video) video.pause();
});
});
});
</script>답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.