웹/FrontedWeb
페럴렉스 스크롤링- (배경 이용)
옥돌소녀
2019. 11. 4. 12:54
<!-- 패럴렉스 스크롤링 : 배경 -->
<!-- 플러그인 사용: http://parallax-scroll.aenism.com -->
<!-- 화면을 스크롤할때 배경위로 콘텐츠가 스크롤 되도록 해준다 -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*, html{
margin:0;
padding:0;
}
h3,p{
font-family: "맑은 고딕", 돋음, 굴림;
}
.container{
position: relative;
/* 커서 모양을 변경한다 */
cursor:pointer;
min-height:730px;
background-position: center;
background-repeat: no-repeat;
background-size:cover;
overflow:hidden;
margin:0;
}
/* 네비게이션 */
#navi {
position:fixed;
/* 화면 넓이에 따라서 가변크기의 폰트 */
width:100vw;
/* 맨위로 올린다. */
z-index:10000;
background:#e9592c;
}
#navi h1{
float:left;
padding:10px 0 0 15px;
/*상하 좌우 */
}
.main-nav{
position: relative;
float:left;
height:60px;
margin:10px 0 0 50px;
}
.main-nav li{
list-style:none;
/* 한줄 안에 있으면서, 너비와 높이를 가지도록 배치한다 */
display: inline-block;
margin:12px 30px;
}
.main-nav a{
color:white;
font-family: Arial;
font-size:20px;
text-decoration: none;
}
#ms1{
background-image: url("./images/bg01.jpg");
}
#ms2{
background-image: url("./images/bg02.jpg");
}
#ms3{
background-image: url("./images/bg03.jpg");
}
.bg-holder {
width:100%;
height:100%;
}
.container .content{
color:white;
text-align: center;
/* 부모 위치는 relative 로 해야된다. */
position: absolute;
left:50%;
/* 컨텐츠 시작점이 앵커이다. */
top:50%;
/* translate는 위치이동 함수이다. : 컨텐츠 중심점이 앵커이다. */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');
.content h3{
font-family: 'Staatliches', cursive;
color:#e9592c;
font-size:65px;
text-align:center;
}
.container p{
margin-top:12px;
padding-left:5px;
padding-right:5px;
line-height:32px;
font-size:24px;
text-align:center;
color:white;
}
.icon{
text-align:center;
margin-top:10px;
height:118px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<nav id="navi">
<h1><a href="http://paikdabang.com/"><img src="images/logo.jpg" alt=""></a></h1>
<ul class="main-nav">
<li><a href="#ms1" class="scroll">Link1</a></li>
<li><a href="#ms2" class="scroll">Link2</a></li>
<li><a href="#ms3" class="scroll">Link3</a></li>
</ul>
</nav>
<!-- 플러그인 클래스 설정하기 -->
<div id="ms1" class="container bg-holder" data-width="1200" data-height="730">
<section class="content">
<h3>It's bean o'clock</h3>
<p>더치커피와 원두커피 전문 쇼핑몰 빈어클락입니다.
<div class="icon"><img src="images/icon_view.png" ></div>
</p>
</section>
</div>
<div id="ms2" class="container bg-holder" data-width="1200" data-height="730">
<section class="content">
<h3>Cold brewed coffee</h3>
<p> 믿을 수 있는 고품질의 더치커피를 찾으신다면 <br>
지금 바로 주문하세요 !
<div class="icon"><img src="images/icon_order.png" ></div>
</p>
</section>
</div>
<div id="ms3" class="container bg-holder" data-width="1200" data-height="730">
<section class="content">
<h3>Roasted bean</h3>
<p> 주문 후 로스팅한 신선한 원두를 <br>
만나보고 싶다면 지금 바로 주문하세요 !
<div class="icon"><img src="images/icon_order.png" ></div>
</p>
</section>
</div>
<script src="./js/jquery-2.2.4.min.js"></script>
<script src="./js/jquery.parallax-scroll.min.js"></script>
<script>
//익명함수
$(function(){
$(function(){
$('.scroll').click(function(e){
//앵커태그의 기본 하이퍼링크 기능을 제거
//버튼으로만 동작하도록
e.preventDefault();
$('html,body').animate(
//매개변수로 key-value 객체를 넣는다
{
scrollTop:$(this.hash).offset().top
},
// 재생시간, 0.5초만에 도달
500
);
});
$(window).resize(function(){
// 콘텐츠를 윈도우(웹페이지)의 너비, 높이에 맞춘다.
$('.container').width($(window).width()).height($(window).height());
$('.content').each(function(){
// 콘텐츠에 css를 적용한다
$(this).css('margin-left',($(this).width()/2*-1)+'px')
.css('margin-top', ($(this).height()/2*-1)+'px');
});
});
});
setTimeout(function(){
// 1초 후에 레이아웃 정렬
$(window).resize()
},1000);
$('.bg-holder').parallaxScroll({
//key-value객체
//마찰값 속도지연값 : 0.0~1.0 까지의 값
//0일 때: 스크롤과 콘텐츠 이동 속도 동일함
//1일 때: 배경이 거의 고정되어서 컨텐츠만 올라감
friction :0.7,
anim:"move"
});
//css선택자
//jquery hover 함수 (마우스가 올라갔을 때, 마우스가 떠났을 때)
$('.icon img').hover( function(){
// img 태그의 이미지 소스를 교체해준다.
$(this).attr('src', $(this).attr('src').replace('.png','_over.png'));
},function(){
$(this).attr('src', $(this).attr('src').replace('_over.png','.png'));
});
});
</script>
</script>
<div></div>
<div></div>
</div>
</body>
</html>
