HTML/CSS parallax scrolling 구현

김희윤·2021년 3월 31일

css

목록 보기

3/5

프론트 기술의 선두주자 애플의 홈페이지부터 시작해서 parallax scroll이 유행인 것 같아 직접 구현해보았다.

1. 준비

뒤에 배경으로 고정시킬 사진과, 움직일 사진을 따로 준비를해서 배치를 한다. (z-index 특성으로 위로 오게 배치)

그리고 html, css 를 작성한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <script type="text/javascript" src="./index.js"></script>
  <title>Document</title>
</head>
<body>
  <section class="zoom">
    <img src="./mountain1.png" id="layer1">
    <img src="./mountain2.png" id="layer2">
    <img src="./text.png" id="text">
  </section>
  <section class="content">
    <p>Simple Background Parallax Using Javascript</p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu augue ut lectus arcu bibendum at varius vel pharetra. Sociis natoque penatibus et magnis. Dignissim enim sit amet venenatis urna. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Fringilla est ullamcorper eget nulla facilisi. Auctor eu augue ut lectus. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Convallis posuere morbi leo urna. Condimentum mattis pellentesque id nibh tortor id aliquet. Ullamcorper dignissim cras tincidunt lobortis feugiat. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada.
Tempus imperdiet nulla malesuada pellentesque. Parturient montes nascetur ridiculus mus mauris vitae ultricies. Et tortor consequat id porta nibh venenatis cras sed. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Tincidunt vitae semper quis lectus nulla. Ornare suspendisse sed nisi lacus. Suspendisse potenti nullam ac tortor vitae purus. At lectus urna duis convallis convallis. Diam quam nulla porttitor massa id neque. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Nullam vehicula ipsum a arcu cursus vitae congue. Purus sit amet volutpat consequat mauris. Purus non enim praesent elementum.
Vestibulum lorem sed risus ultricies. Consequat id porta nibh venenatis cras sed. At lectus urna duis convallis convallis. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Viverra justo nec ultrices dui sapien. Montes nascetur ridiculus mus mauris vitae ultricies leo integer. At consectetur lorem donec massa sapien faucibus et. Diam phasellus vestibulum lorem sed. Posuere morbi leo urna molestie at elementum. Ipsum dolor sit amet consectetur. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Laoreet sit amet cursus sit amet dictum sit amet justo. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Odio morbi quis commodo odio. Vel facilisis volutpat est velit egestas dui id ornare arcu. Imperdiet nulla malesuada pellentesque elit eget gravida.
Dictum at tempor commodo ullamcorper a lacus vestibulum. Quisque id diam vel quam elementum pulvinar etiam. Nunc congue nisi vitae suscipit tellus mauris. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Tellus pellentesque eu tincidunt tortor aliquam nulla. Vel risus commodo viverra maecenas accumsan. Dui nunc mattis enim ut tellus. Eget nullam non nisi est sit amet facilisis magna. Non blandit massa enim nec dui nunc mattis enim. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Proin gravida hendrerit lectus a. Adipiscing bibendum est ultricies integer. Donec et odio pellentesque diam volutpat commodo sed. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Amet consectetur adipiscing elit ut aliquam purus sit. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Tincidunt vitae semper quis lectus nulla. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Vitae semper quis lectus nulla at volutpat diam ut.
Mollis nunc sed id semper risus in. Vitae auctor eu augue ut lectus arcu bibendum at varius. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Massa sapien faucibus et molestie ac. Orci porta non pulvinar neque laoreet suspendisse. Euismod nisi porta lorem mollis aliquam ut porttitor leo. Sed pulvinar proin gravida hendrerit. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Arcu non sodales neque sodales ut etiam. Pharetra magna ac placerat vestibulum. Rhoncus dolor purus non enim praesent elementum facilisis. Ac tortor dignissim convallis aenean et tortor at. Nunc non blandit massa enim nec dui. Scelerisque eu ultrices vitae auctor eu augue ut lectus arcu. Integer eget aliquet nibh praesent tristique magna sit. Volutpat est velit egestas dui id. Mattis pellentesque id nibh tortor id aliquet. Magna eget est lorem ipsum dolor.
Dictum non consectetur a erat nam at. Risus viverra adipiscing at in. Nunc congue nisi vitae suscipit tellus mauris. Cursus sit amet dictum sit amet justo donec. Facilisi etiam dignissim diam quis enim. Ullamcorper malesuada proin libero nunc consequat interdum varius sit amet. Dignissim diam quis enim lobortis. Pretium aenean pharetra magna ac placerat vestibulum. Sollicitudin tempor id eu nisl nunc. Elit at imperdiet dui accumsan sit amet nulla facilisi morbi. Egestas tellus rutrum tellus pellentesque eu tincidunt. Senectus et netus et malesuada fames ac turpis. Egestas sed tempus urna et pharetra pharetra massa. Pharetra magna ac placerat vestibulum lectus mauris. Tellus orci ac auctor augue mauris augue.
Tellus molestie nunc non blandit massa enim nec dui nunc. Lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Erat velit scelerisque in dictum non. Sed vulputate mi sit amet mauris commodo quis. Volutpat consequat mauris nunc congue nisi vitae suscipit. Ac tincidunt vitae semper quis lectus nulla at volutpat. Morbi tristique senectus et netus et. Enim diam vulputate ut pharetra sit. Amet cursus sit amet dictum sit amet. Elit scelerisque mauris pellentesque pulvinar pellentesque. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Est placerat in egestas erat imperdiet sed euismod nisi. Id aliquet lectus proin nibh. Euismod elementum nisi quis eleifend quam. Purus in mollis nunc sed id semper risus in hendrerit.
At in tellus integer feugiat scelerisque varius morbi enim. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Lobortis mattis aliquam faucibus purus in. Pulvinar pellentesque habitant morbi tristique senectus et. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Fringilla phasellus faucibus scelerisque eleifend. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Cras adipiscing enim eu turpis egestas. At in tellus integer feugiat scelerisque. Mi sit amet mauris commodo quis. Adipiscing vitae proin sagittis nisl rhoncus mattis.
Mauris ultrices eros in cursus. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Tincidunt id aliquet risus feugiat. Vitae congue mauris rhoncus aenean vel elit. Arcu non sodales neque sodales. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Sollicitudin nibh sit amet commodo nulla facilisi. Vestibulum lectus mauris ultrices eros in cursus turpis. Suspendisse faucibus interdum posuere lorem ipsum dolor. Nunc vel risus commodo viverra maecenas accumsan lacus. Nisi vitae suscipit tellus mauris a diam maecenas. Volutpat blandit aliquam etiam erat velit. Ornare arcu odio ut sem nulla pharetra diam sit. Odio ut enim blandit volutpat maecenas volutpat. Egestas pretium aenean pharetra magna ac placerat vestibulum. Pellentesque sit amet porttitor eget dolor.
    </p>
  </section>
</body>
</html>

body {
  margin: 0;
  padding: 0;
}
.zoom {
  width: 100%;
  height: 800px;
  position: relative;
  overflow: hidden;
  background: url(./bg.jpg);
  background-size: cover;
}
.zoom:before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  z-index: 1000;
  background: linear-gradient(transparent, #fff);
}
.zoom #layer1 {
  position: absolute;
  left: 50%;
  top: 150px;
  width: 100%;
  transform: translateX(-50%);
  z-index: 10;
}
.zoom #layer2 {
  position: absolute;
  right: 0;
  top: 150px;
  width: 100%;
  z-index: 9;
}
.zoom #text {
  position: absolute;
  right: 0;
  width: 100%;
  transform: translateY(50%);
  z-index: 8;
}

parallax scroll의 기본적인 방법은 스크롤을 할 때 그 스크롤의 값만큼 height를 조정하는 것이다. 즉 js파일로 구현이 필요하다.

document.addEventListener('scroll', () => {
  const scrollData = window.scrollY
  document.getElementById('layer1').style.width = (100 + scrollData/5) + '%'
  document.getElementById('layer2').style.width = (100 + scrollData/5) + '%'
  document.getElementById('layer2').style.left = (scrollData/50) + '%'
  document.getElementById('text').style.top = (- scrollData/5) + '%'
})