css)스크롤에 따른 transform효과

browser 스크롤에 따라, 상단의 커브이미지가 변형되어 사라지는 것처럼 보이는 효과

참고한 CSS Online Tutorial 유투브

수정한 소스코드

transform_effect.html

transform_effect_style.css

curve.img

0

---

시각적인 효과를 고려하여 이미지 위치를 설정한다.

※ cal( ) : CSS 속성 값을 계산하는 CSS 함수

 

section을 브라우저 높이(100%)에서 상단으로 200px만큼 위로 설정하고,

cal(100% - 200px)

이미지가 200px 높이를 갖도록 한다음에 200px만큼 위로 중첩시켜서,

마치 연속된 커브이미지가 첫 화면을 채우도록 설정한다.

bottom: -200px
height: 200px

 

예제에서는 전체 영역을 현재 브라우저 높이의 2배로 설정하였다.
200vh ( 1 vh는 뷰포트 높이의 1/100)

 

 

curve 이미지 영역을 css 선택자로 받아온다.

var curve_scroll = document.querySelector('.curve')

 

curve section을 class명으로 지정하였으므로 ('.curve')다.

 

브라우저의 스크롤에 이벤트를 추가한다.

window.addEventListener('scroll', function(){ })

 

브라우저를 수직방향으로 스크롤할만큼만 변형하려고 한다.

Window인터페이스의 scrollY는 읽기전용 속성으로 문서가 수직으로 스크롤될 정도를 픽셀단위로 반환한다.

scaleY는 y축을 따라 요소를 확대/축소할 수 있다.

1은 확대/축소되지 않은 상태이고, 음수는 기준축의 반대방향에서 확대/축소되어 나타난다.

이 때 축은 transform-origin으로 지정할 수 있다.

transform-origin: top;

var value = 1 + window.scrollY/-500
curve_scroll.style.transform=`scaleY(${value})`

value 값 설정은 스크롤되지 않았을 때는 그대로이다가, 스크롤되어가면서 위로 축소되다가 축 반대방향으로 확대되어가도록 설정되었다. 같은 색의 상단 section과 중접되어 사실은 작아지다가 사라지는 것처럼 보일 것이다.