<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
*{box-sizing: border-box;}
body{height:100vh; background: url('img/main_bg.jpg'); background-size: cover; overflow: hidden;}
.section1{width: 740px; height:325px; position: relative;
left: 50%; top:50%; transform: translate(-50%,-50%);}
.section1 img{width: 100%; display:none;}
.section1 p{position: absolute; background: #000;}
p.top{width: 0; height: 1px; left:0; top:0; }
p.right{width: 1px; height: 0; right:0; top:0;}
p.bottom{width: 0; height: 1px; right:0; bottom: 0;}
p.left{width: 1px; height: 0; left:0; bottom:0;}
a.close img{width:50px; position: absolute; left: 10px; top:10px;}
h1{position: fixed; left: 50px; top: 50px;}
.avata{position: absolute; left: 10%; top: 10%;}
h2{position: absolute; right: 10%; top:10%;}
video{position: absolute; right: 10%; top:24%; }
.btn{position: absolute; right: 10%; bottom:10%; width: 640px;}
.btn li{float: left; width: 50%; cursor: pointer;}
.btn li img{width: 100%;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('.btn1').click(function(){
alert()
mainHide()
sec1show()
});
$('a.close').click(function(){
$('.section1 img').fadeOut();
$('p.top').animate({'width':'0'});
$('p.right').animate({'height':'0'});
$('p.bottom').animate({'width':'0'});
$('p.left').animate({'height':'0'});
});
function sec1show(){
$('p.top').animate({'width':'100%'},1000,function(){
$('p.right').animate({'height':'100%'},function(){
$('p.bottom').animate({'width':'100%'},function(){
$('p.left').animate({'height':'100%'},function(){
$('.section1 img').fadeIn()
})
})
})
})
};
function mainHide(){
$('.avata').animate({'left':'0'})
$('video').animate({'top':'0','opacity':'0'})
$('.btn').animate({'bottom':'0'})
};
function mainSow(){
$('.avata').delay(500).animate({'left':'10%'})
$('video').delay(500).animate({'top':'10%','opacity':'1'})
$('.btn').delay(1000).animate({'bottom':'10%','opacity':'1'})
};
});//function
</script>
</head>
<body>
<h1><img src="img/logo.png" alt=""/></h1>
<div class="avata"><img src="img/main_man.png" alt=""/></div>
<h2><img src="img/main_txt.png" alt=""/></h2>
<video src="img/video.mp4"></video>
<ul class="btn">
<li class="btn1"><img src="img/btn1.png" alt=""/></li>
<li class="btn2"></a><img src="img/btn2.png" alt=""/></li>
</ul>
<section class="section1">
<p class="top"></p>
<p class="right"></p>
<p class="bottom"></p>
<p class="left"></p>
<img src="img/section1.png" alt="img"/>
<a href="#" title="#" class="close">
<img src="img/iconfinder_basics-22_296812.png" alt=""/>
</a>
</section>
</body>
</html>
'얼렁뚱땅코드 > jquery' 카테고리의 다른 글
| swiper: 클릭하면 움직이는 배너 만들기 (0) | 2019.09.27 |
|---|---|
| swiper 사용하기 (0) | 2019.09.27 |
| 제이쿼리 애니메이션: callback을 이용해서 움직이는 선 박스 만들기 (0) | 2019.09.26 |
| position:relative 사용시 화면의 가운데 맞추기 (0) | 2019.09.26 |
| 클릭하면 다른 이미지와 다른 글씨들이 보이게 하기:호텔농심참고 (0) | 2019.09.26 |