웹/FrontedWeb
패럴럭스 스크롤링
옥돌소녀
2019. 11. 4. 10:07
<!-- 패럴럭스 스크롤링 -->
<!--화면을 스크롤 할 때 애니메이션 효과를 주는 것 -->
<!-- 주로 pc용 웹에서 구현이 된다 -->
<!-- 정적인 웹은 아래로 스크롤 하면 아래로 내려간다. -->
<!-- 동적인 웹으로 구성해서, 천천히 내려가거나 반대로 -->
<!-- 올라가게 구성할 수 있다. -->
<!-- 레이어(계층)을 나눠서 프론트, 백엔드를 나눈다. -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>패럴러스 스크롤링</title>
<style>
*,html{
margin:0;
padding:0;
}
#sky{
background:url('./images/bg1.png') 50% 0;
position: relative;
width:100%;
height:1500px;
/* 가로를 중앙으로 정렬 시킨다.*/
margin:0 auto;
}
#sky article{
position: absolute;
top:750px;
left:40%;
}
</style>
</head>
<body>
<!-- data - 속성은 사용자 정의 속성으로 사용 가능하다. -->
<section id="sky" data-type="background" data-speed="0.5">
<article><img src="./images/balloon.png"></article>
</section>
<script src="./js/jquery-2.2.4.min.js"> </script>
<script>
//window.onload()와 동일한 역할을 한다
// jquery로 구현한 것이다. 웹문서가 로딩 완료 되었을 때 호출된다.
$(document).ready(function() {
var wd=$(window);
// css 속성 선택자 -> 속성으로 선택할 수 있다
// each() 함수 - for each 함수 : 모든 background 속성에 적용한다.
$('section[data-type="background"]').each(function(){
var bg= $(this);
wd.scroll(function(){
// wd.scrollTop() : 현재 스크로뢴 위치
// bg.data('speed') : 0.5 값
var yPos=-(wd.scrollTop()/ bg.data('speed'));
//50% : 수평 중앙, yPos px : 계산된 수직 위치 값이다 .
var coords='50%' + yPos+ 'px';
// css() 함수 : jquery css를 객체에 적용하는 함수
// 풍선의 위치를 조정하는게 아니고, 백그라운드(하늘 배경)의 속도를 조절하는 것이다 .
bg.css({backgroundPosition:coords});
});
});
});
</script>
</body>
</html>
