w3.css
패럴랙스 스크롤링
CSS를 사용하여 “패럴랙스” 스크롤링 효과를 만드는 방법을 알아보자.
패럴랙스 스크롤링은 배경 콘텐츠(즉, 이미지)가 스크롤링하는 동안 전경 콘텐츠와 다른 속도로 움직이는 웹사이트 트렌드다.
⭐ 패럴랙스 스크롤링은 모바일 기기/스마트폰에서 항상 작동하지는 않는다. 그러나 미디어 쿼리를 사용하여 모바일 기기에서 효과를 끌 수 있다.
패럴랙스 스크롤링 효과를 만드는 방법
컨테이너 요소를 사용하고 특정 높이의 컨테이너에 배경 이미지를 추가한다. 그런 다음 를 사용하여 background-attachment: fixed; 실제 패럴랙스 효과를 만든다. 다른 배경 속성은 이미지를 완벽하게 중앙에 배치하고 크기를 조정하는 데 사용된다.
1단계) HTML 추가
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element -->
<div class="parallax"></div>
기본 예시
예제 보기위의 예에서는 픽셀을 사용하여 이미지의 높이를 설정했다.
퍼센트(예: 100%)를 사용하여 이미지가 전체 화면에 맞도록 하려면 시차 컨테이너의 높이를 100%로 설정한다.
⭐ <html>과 <body> 모두에 높이: 100%를 적용해야 한다.
2단계) CSS 추가
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
기본 예시
예제 보기모바일에 CSS 추가
일부 모바일 디바이스에서는 background-attachment: fixed에 문제가 있다. 그러나 미디어 쿼리를 사용하여 모바일 디바이스에서 시차 효과를 끌 수 있다.
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
기본 예시
예제 보기참고
W3C School - How TO - Parallax Scrolling
공부 목적 블로그