반응형 풀스크린 영상
2022. 1. 12. 10:23ㆍStudy/jQuery
반응형 사이트에서 많이 볼 수 있는 풀스크린 영상 띄우기
CSS의 position과 transform, Javascript의 window width, height 를 이용해 표현할 수 있다.
풀스크린~태블릿 사이즈 까지는 영상을 띄우고, 그 이하 디바이스에서는 배경이미지로 교체하여 용량을 최적화한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0; padding:0}
a{color: #333; text-decoration: none}
ul{list-style: none}
#wrap{overflow: hidden;}
.videoBox{position:absolute; width:100%; height:100%; overflow:hidden;}
#videoBG {
position:fixed; /*고정=>fixed/ 스크롤처리=>absolute */
left:50%;
top:50%; /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
width:auto;
min-width:100%; /*동영상 너비를 꽉차게*/
height:auto;
min-height:100%; /*동영상 높이를 꽉차게*/
transform:translateX(-50%) translateY(-50%);
z-index:-100; /*다른요소보다 아래에 위치*/
}
#imgBG{
position:fixed; /*고정=>fixed/ 스크롤처리=>absolute */
left:50%;
top:50%; /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
width:auto;
min-width:100%; /*동영상 너비를 꽉차게*/
height:auto;
min-height:100%; /*동영상 높이를 꽉차게*/
transform:translateX(-50%) translateY(-50%);
z-index:-100;
display:none
}
@keyframes ani {
0% { transform:scale(1); opacity:1; color:#fff;}
100% { transform:scale(1.2); opacity:0.8; color:#888;}
}
.down{position: absolute; left:50%; bottom: 20%; display: block; font-size: 20px; margin-left: -90px;
animation:ani 1s infinite alternate;}
#headerArea{position:fixed; left:0; top: 0; width: 100%; height: 80px; background: rgba(0,0,0,.8); z-index: 30;}
#headerArea .headerInner{width: 90%; margin: 0 5%; overflow: hidden;}
#headerArea h1{ float: left; margin-top: 15px}
#headerArea h1 a{color: #fff;}
#headerArea #gnb{float: right;margin-top: 25px}
#headerArea #gnb ul{overflow: hidden}
#headerArea #gnb ul li{float: left; margin-right: 15px;}
#headerArea #gnb ul li a{color: #fff;}
#content{ width:90%; margin:0 5%; height:3000px; background:#F00; }
</style>
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function() {
var screenSize, screenHeight;
var current=false;
function screen_size(){
screenSize = $(window).width(); //스크린의 너비
screenHeight = $(window).height(); //스크린의 높이
$("#content").css('margin-top',screenHeight);
if( screenSize > 768 && current==false){
$("#videoBG").show();
$("#videoBG").attr('src','aaa.mp4');
$("#imgBG").hide();
current=true;
}
if(screenSize <= 768){
$("#videoBG").hide();
$("#videoBG").attr('src','');
$("#imgBG").show();
current=false;
}
}
screen_size(); //최초 실행시 호출
$(window).resize(function(){ //웹브라우저 크기 조절시 반응하는 이벤트 메소드()
screen_size();
});
$('.down').click(function(){
screenHeight = $(window).height();
$('html,body').animate({'scrollTop':screenHeight}, 1000);
});
});
</script>
</head>
<body>
<div id="wrap">
<div class="videoBox">
<video autoplay loop muted id="videoBG"></video>
<img src="back.jpg" id="imgBG">
<a class="down" href="#">SCROLL DOWN</a>
</div>
<header id="headerArea">
<div class="headerInner">
<h1><a href="#">로고</a></h1>
<nav id="gnb">
<ul>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
</ul>
</nav>
</div>
</header>
<article id="content">내용 콘텐츠</article>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| input[type="number"] 화살표 및 키보드 막기 (0) | 2022.05.18 |
|---|---|
| input replace 유효성 체크 (1) | 2022.05.03 |
| jQuery 셀렉터, 요소 복사 및 잘라내기 (0) | 2022.01.11 |
| 영역의 크기 메소드 (0) | 2022.01.11 |
| .on(events[,selector][,data],function) (0) | 2022.01.04 |
