animation 으로 뛰어넘기 - Parallax 3-

15122 단어 CSSanimation
CSS animation day35가 되었습니다.

오늘은

position: sticky

을 사용하여 병렬을 표현하고 싶습니다.

1. 완성판



See the Pen Parallax Stich by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .


2. 참고문헌



CSS Tricks: Creating sliding effects using sticky positioning

Medium: CSS Position Sticky - How It Really Works!



WPJ : 단 몇 줄의 CSS로 패럴랙스 풍 표현을 할 수있는 "position : sticky"의 사용법

q-az: CSS position:sticky가 매우 편리합니다.



MDN: position



3. 분해해 본다



❶.

1: position: sticky 는 별로 들을 수 없지만, 도대체 무엇입니까?



position:sticky

스크롤로, 그 지정된 위치까지 가능하면, 그 이후는, 고정된다고 하는 효과를 가집니다.

이미지로서, 바퀴벌레는 최초 자유롭게 움직이고 있습니다만, position: sticky 라고 하는 이름의 바퀴벌레 호이 호이를 설치해, 거기에 잡히면 딱 움직이지 않게 되는 이미지입니다. 밥 안의 분, 죄송합니다. .




2: 마지막 기사 그리고 나서, position: fixed 와의 차이는 무엇인가?



한마디로, position:fixed는 처음부터 바퀴벌레 호이호이에 달라붙어 미동이 되지 않고 딱 1mm도 움직이고 싶지 않을 때 사용하고 position: sticky는 지정한 곳까지는 항상 스크롤하면 움직이지만, 도중부터 거기에 바싯 고정하고 싶을 때 사용한다고 생각하면 좋을 것 같습니다!



MDN에 따르면




점착 위치 지정된 요소는 지정된 임계값에 도달할 때까지 상대 위치 지정으로, 임계값에 도달하면 고정 위치 지정으로 취급됩니다.




점착 위치 지정을 상정한 대로 동작시키기 위해서는 top, right, bottom, left 중 적어도 하나로 임계값을 지정해야 하므로,



.container { position: sticky; top: 10px; }


와 같이 설정해야 합니다.



overflow: hidden 을 붙이면 효과가 사라져 버리는 것 같아, 주의합시다.




❷.

마크업합니다.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="sticky">パララックス</div>
      <div>なんて</div>
      <div>楽しいんだ！</div>
    </div>
  </body>
</html>




styles.scss

body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 1500px;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background: linear-gradient(#efefbb, #d4d3dd);
  color: #fff;
  font-size: 30px;
  margin-bottom: 100px;
  width: 100vw;
  height: 100px;
}





그래디언트가 붙어 있는 요소가 top:0이 된 순간에 위치가 고정되었습니다. 이것이 position: sticky의 효과입니다.




❸.

그럼, 제대로 만들어 갑시다.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <p>パララックス1</p>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    <p>パララックス2</p>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    <p>パララックス3</p>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    <div class="footer"></div>
  </body>
</html>




styles.scss

body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 3000px;
}

p {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 100vw;
  height: 100px;
  font-size: 30px;
  line-height: 100px;
  margin: 0;
  color: #fff;
  background: #7e0a3b;
}

.one,
.two,
.three {
  width: 100vw;
  height: 300px;
  font-size: 30px;
  line-height: 100px;
  color: #fff;
}

.one {
  background: #8adcaa;
}

.two {
  background: #64cf8d;
}

.three {
  background: #3ec271;
}

.footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0px;
  width: 100vw;
  height: 50px;
  background: linear-gradient(90deg, #8e0e00, #1f1c18);
}




See the Pen Parallax Stich by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .



<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

쉽게 패럴랙스를 할 수있었습니다!

position: fixed 처럼 쉽습니다!



내일은 역역 패럴랙스를 전해드립니다. 그럼 또~


animation에서 놀기 - Scroll Arrow2 -
animation에서 놀기 - Submit Button 2 -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage