유행은 지났지만 Parallax 백그라운드에 흥미가 생겨서 좀 찾아봤다. 그것들 중에 Only CSS 로만 구현한 것이 있어서 한번 살펴봤는데 Parallax Scroll 원리 를 쉽게 알수 있는 예제라 메모해둠
Parallax Scrolling
Parallax 는 배경과 콘텐츠의 움직임에 차이를 둬 평면에 공간적 깊이를 더해주는 시각적 효과다. 2014 년 쯤에 유행했었고, 지금도 꾸준히 쓰이는거 같다.
이거다.
구성은 5단짜리로 되어있다.
실제 최하단은 필요가 없고. 1,2,3,4 단의 시각적 효과를 통해 Parallax 효과를 준다.
1단
별거없다.
background-attachment:fixed;
백그라운드를 고정해놓는다. 글자가 올라가도 백그라운드는 그대로 있다.
별거 아니지만 2단의 백그라운드가 올라올때 시각적효과를 도와준다.
2단
Parallax Scrolling 기술의 핵심.
2단 자체는 background 속성이 없다.
대신 #slide1:before 를 추가해 다음과 같은 속성을 추가했다.
before 로 따로 만들어준 이유는 레이어를 만들기 위해서다.
#slide1:before {
background-image: url("http://lorempixel.com/640/480/abstract/4/");
transform: translateZ(-1px) scale(2); //화면스크롤보다 속도를 늦추기 위해 뒤로 밀고 밀어진 만큼 사이즈 키움
z-index:-1;
}
background 속성을 주고, transform 속성을 이용해 z축(모니터뒤) 으로 밀어버렸다. 실제 멀리있으니 스크롤도 늦게 되는것. 배경이 화면 올라가는 속도보다 느리게 만들기 위해서 뒤로 밀어버린거다.
뒤로 밀어버려서 작아진 만큼 화면을 채워야 되기 때문에 크기를 다시 키웠다.
3단
1단과 같이 백그라운드 fixed 로 놨다. 대신 이미지들을 2단과 마찬가지 방식을 통해서 스크롤 속도와 차이를 줬다.
//이렇게 앞으로 (translateZ) 로 땡겨서 스크롤보다 빨리 이동하게 만든것. transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
뭐. 나머지 원리는 4단도 같음.
정리
여기서 원리는 간단하다. CSS 속성 transform 에서 translateZ 를 이용해 실제 원근을 주는것이다. – 값을 주면 뒤로, + 면 눈에 가까운 쪽으로 뜨니 실제 스크롤상에서 속도 차이가 생긴다. 다만, :before 속성을 통해 레이어를 하나 따로 잡아줘야된다.
아. 찾아보면 금방인데 이걸 구찮아서 그동안 안보고 있었다니. Javascript 도 들어간건 낼 함 봐야겠당. 근데 이거 처음에 한사람 머리 좋은거 같네
근데 이거보다 훨씬 수준 높고 우아한 움직임 적용하려면 아래 링크에서 배우는게 훨씬 좋다.
https://www.inflearn.com/tag-curation/skill/318
