[CSS] Parallax Scroll / 패럴렉스 적용방법

 

Parallax Scroll 적용방법

 

 

영역 요소에 background-attachment : fixed; 를 선언하고

background를 설정함으로 손쉽게 적용할수 있습니다.

 

 

코드

[html]
<div>
  <h1>Parallax Effect</h1>
</div>
<div>
  <p>패럴렉스는 끌려가는 느낌을 줍니다 (시각적 효과)</p>
</div>
<div>
  <h1>Normal</h1>
</div>
<div>
  <p>일반적인 효과는 컨텐츠와 같이 움직입니다.</p>
</div>

[css]
*{
  margin : 0;
  padding : 0;
}
div{
  height : 100vh;
  width : 100%;
}
h1{
  text-align : center;
  line-height : 100vh;
  color : white;
  font-size : 70px;
}

p{
  text-align : center;
  line-height : 100vh;
  font-size : 30px;
}

/*패럴렉스 효과 적용*/
div:nth-child(1){
  background : url('https://images.unsplash.com/photo-1616520836152-09d130550cfd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center;
  background-size : cover;
  background-attachment : fixed;
}

/*일반 배경*/
div:nth-child(3){
  background : url('https://images.unsplash.com/photo-1616520836152-09d130550cfd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center;
  background-size : cover;
}

 

 

실행파일

 

See the Pen parallax by 윤재현 (@jh91) on CodePen.