반응형
wow js 를 활용한 애니메이션 넣기
animate.css
0.05MB
wow.min.js
0.01MB
<!DOCTYPE html>
<html>
<head>
<title>자기소개 사이트</title>
<style>
html,body{height: 100%;}
header h1{text-align: center;}
header ul li{float: left;padding:20px;background-color: gray;}
header ul{list-style: none;}
.clear{clear:both;}
section{width:100%; height: 100%;}
</style>
<link rel="stylesheet" href="resource/css/animate.css">
<script src="resource/js/wow.min.js"></script>
<style>
/**팝업CSS**/
.popup{position: fixed; top:0px; left:0px;
width:100%; height:100%;
background-color: rgba(0, 0, 0, .5);
display: none;
}
.popup.active{
display: block;
}
.popup-wrap{
position: absolute;
width:500px;
top:25%;
left: 25%;
}
.popup-content{background-color: #fff;
color: #333; padding: 3em;
border-radius: 10px;
}
.pop-close{position: absolute;
right: -70px; top: -70px;width: 50px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
wow = new WOW(
{
animateClass: 'animated',
offset: 100,
callback: function(box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
}
);
wow.init();
//스크롤
$(window).scroll(function(){
console.log($("#sectionMap").offset().top);
console.log($(window).scrollTop());
});
//Jquery 시작
$(document).ready(function(){
$(".popup01").click(function(){
$("#evnet-pop").show();
$("#evnet-pop").hide();
});
$("#toMap").on("click",function(){
var position = $("#sectionMap").offset().top;
//$(window).scrollTop(position);
$("html").animate({scrollTop:position}, 600);
});
});
$(document).ready(function(){
$(".popup01").click(function(){
$("#evnet-pop").addClass("active");
});
$(".pop-close").click(function(){
$("#evnet-pop").removeClass("active");
});
});
</script>
</head>
<body>
<header>
<h1>Gildong Hong</h1>
<ul class="wow slideInRight" data-wow-duration="2s" data-wow-delay="1s">
<li>Home</li>
<li id="toMap">Info</li>
<li>Portfolio</li>
</ul>
<div class="clear"></div>
</header>
<section>
<!--팝업띄우기 -->
<ul>
<li class="popup01">HTML 포트폴리오사이트</li>
<li>Java 실습프로그래밍</li>
<li>게임만들기</li>
</ul>
<!--팝업영역 -->
<div id="evnet-pop" class="popup">
<div class="popup-wrap">
<div class="popup-content">
<h2>HTML 포트폴리오사이트</h2>
<p>Html, CSS 수업에서 포트폴리오 사이트를
제작하였습니다. 포트폴리오를 만들기 전에
기획부터 만들었고, 기획서를 기반으로 페이지를
구성할 수 있는 기술을 습득하였습니다.
</p>
</div>
<img src="resource/images/star.png" alt="닫기버튼"
class="pop-close" />
</div>
</div>
</section>
<section id="sectionMap">
<iframe src="https://www.dongyang.ac.kr/dongyang/index.do#" width="300" height="500" ></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.3343108242984!2d126.86542637580261!3d37.50003257205591!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c9de1fee16d79%3A0x1ab4872c13dbfeaf!2z64-Z7JaR66-4656Y64yA7ZWZ6rWQ!5e0!3m2!1sko!2skr!4v1684379366699!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</section>
<section>
</section>
</body>
</html>반응형
'웹프로그래밍 기초 > 소스자료' 카테고리의 다른 글
| [ TIP] 폰트로 아이콘 활용하기 fontawesome (0) | 2023.05.18 |
|---|---|
| [참고소스] 레이어팝업 (0) | 2022.05.24 |
| [참고]디자이너 & 개발자 포트폴리오사이트 참고 (0) | 2022.04.05 |
| [실전실습] 동적인 배경화면 적용하기 (0) | 2021.06.15 |
| [참고] SNS 공유 시 설정 메타태그 (0) | 2019.12.05 |
댓글