[JavaScript] 라이브러리 없이 뷰티(뷰티 효과) 배경 만들기

TL;DR

이 글에서 해설한 시각차는이런 거.이다.

이마

파이락스, 대단하지.
오사어 사이트에 가면 가끔 배경과 요소에 적용돼'오'하면서 들여다본다.
나도 어떤 사이트의 배경을 시험해 보고 싶다. 위대한 Google 선생님께 물어봤는데, 검색 결과의 주된 부분은 앞의 요소의 시차를 조절하는 것이다. (이 추천 Rellax 라이브러리)배경만 천천히 굴러다니는 내가 추구하는 시차는 없다.
그래서 제가 직접 해 봤는데 의외로 간단해서 기사를 썼어요.

background-attachment ?

배경 그림을 들으면 발락스인데 가장 먼저 떠오르는 것은 CSSbackground-attachment 속성이다.
여기서 값fixed을 설정하면 요소를 스크롤해도 배경이 스크롤되지 않아 낙하산을 연출할 수 있습니다.
의기양양하게 쓰여진 이 코드를 기다리는 나는 비참한 운명이다.

슬픈 초상화
네.스마트폰은 이미 우리 현대인의 장기가 되어 위에서 기술한background-size: cover과 배경 이미지를 지원하지 않는 요소가 되었다.
그렇게 슬픈 나에게 말을 건 건 건 MDN 기사였다.

background-attachment !

그는 object-fit 속성은 우리object-fit 요소와 <img>와 같다고 말했다.
그리고 background-size: cover, 이걸 background-attachment로 어떻게든 해결해 봅시다.
viewport (문서 표시 영역) 상단의 거리 JavaScript 와 상응하는 이동을 가져옵니다.
없음transform은 성능을 고려합니다.
그렇게 만든 것은 여기.이다.그래도 괴로울 거야.

top !

매우 곤란한 나는 방금 Rellax의 원본 코드를 조금 말했다.그래서 소스의 어느 곳에도 requestAnimationFrame와addEventListener라는 글자가 없었다.
쓰는 것 같다onscroll.이는 FPS가 기계의 성능과 탭의 상태(배경이냐 정장이냐)에 따라 달라졌기 때문requestAnimationFrame으로 조사됐다.
특히 FPS와 상관없는 이번 상황이 딱!
이상의 코드를 바탕으로 여기.입니다.

천천히 움직이다

그렇다면 일부러 자바스크립트로 CSS를 하는 데는 스마트폰에 대응할 수 있는 이유 외에도 다른 이유가 있다.
CSS만 있으면 배경 이미지를 고정할 수 있어도 서서히 이동할 수 없습니다.
하지만 JavaScript는 가능합니다.
간단하고 알기 쉬운 그림은 다음과 같다.

확실히 천천히 움직이는 것 같아.
☆의 부분은 요소가 화면에 나타나기 시작할 때는 0이고, 끝날 때는 부분을 뛰어넘는 전체이다.
즉 setTimeout는 이동의 비율이기 때문에 배경 이미지의viewport에서 드러난 부분(viewportの高さ - 要素のviewport上端からの距離) / (画面の高さ + 要素の高さ)이 된다.
그걸 코드이것로 만들었지.

후기

입식은 어려워요.
다른 건 간단해.
맥이랑 스마트폰으로 살짝 붙여도 어쩔 수 없죠...