패럴랙스 스크롤링(parallax scrolling)은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법이다. 하나의 이미지를 여러 개의 레이어(layer)로 분리한 후 스크롤에 반응하는 속도를 다르게 조정하는 방식으로 구현한다. 1930년대부터 애니메이션 분야에 사용되던 기법이었으나, 웹 디자인 분야는 HTML5와 CSS3 기법이 도입됨으로써 사용이 가능해졌다. - 위키백과
예제 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>bean o`clock</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/parallax.css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<div id="ms1" class="container bg-holder" data-width="1200" data-height="600" style='background-image:url("images/bg01.jpg")'>
<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="600" style='background-image:url("images/bg02.jpg")'>
<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="600" style='background-image:url("images/bg03.jpg")'>
<section class="content">
<h3>Roasted bean</h3>
<p> 주문 후 로스팅한 신선한 원두를<br>
만나보고 싶다면 지금 바로 주문하세요!
<div class='icon'><img src='images/icon_order.png'></div>
</p>
</section>
</div>
</div>
위 코드는 html head, body 부분이다. 코드 중에 패럴랙스 스크롤링과 관련된 부분은 ms1, ms2, ms3에서 class="container 뒤에 bg-holder 부분인데 쉽게 말하면 컨테이너라는 블록에 배경을 설정하는 부분에 bg-holder라는 함수를 불러와서 실행하는데 bg-holder 함수는 이후 javascript 부분에서 가져옵니다.
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.parallax-scroll.min.js"></script>
<script>
$(function() {
$(window).resize(function(){
$('.container').width($(window).width).height($(window).heifht());
})
setTimeout(function(){
$(window).resize()
}, 1000)
$('.bg-holder').parallaxScroll({
friction: 0.3
});
$('.icon img').hover(function() {
$(this).attr('src', $(this).attr('src').replace('.png', '_over.png'));
}, function() {
$(this).attr('src', $(this).attr('src').replace('_over.png', '.png'));
});
});
</script>
</body>
</html>
1초마다 resize함수를 실행하여 창 크기에 따라 블록 크기를 조절하고 bg-holder에서 fiction 값을 조절하여 배경과 글의 속도 차이를 조절할 수 있다.
'웹 개발 > Front End' 카테고리의 다른 글
| 캐러셀 (0) | 2021.11.08 |
|---|---|
| 유튜브 동영상 풀 스크린 배경으로 사용하기 (0) | 2021.11.08 |
| 풀 스크린 배경 (0) | 2021.11.08 |
| CSS 그리드 레이아웃 (0) | 2021.11.08 |
| 플렉스 박스란? (0) | 2021.11.08 |
댓글