시차 스크롤 효과를 만들기 위한 10가지 CSS 및 JavaScript 조각
게시 됨: 2022-03-22시차 디자인과 웹에서 작동하는 방식에 대해 많은 혼란이 있습니다. 일반적으로 시차 디자인은 페이지에 깊이의 환상을 만들기 위해 모션을 사용합니다.
이는 사용자의 스크롤과 함께 이동하는 배경 변경 또는 반고정 위치 항목과 관련될 수 있습니다. 우리는 웹사이트에서 많은 예를 다루었지만 관련된 기술에 대해 자세히 설명하지 않았습니다.
이 컬렉션에서는 시차 레이아웃을 만들기 위해 내가 가장 좋아하는 CSS 및 JavaScript 스니펫을 선택했습니다. 모든 예제는 무료 소스 코드를 제공하므로 스니펫을 가지고 놀고 자신의 프로젝트에서 사용할 수도 있습니다.
1. CJ감몬 의 대 몰락
이 시차 예제는 내가 찾은 가장 독특한 인터페이스 중 하나입니다. 사용자 정의 스크립트를 사용하여 페이지 아래로 끝없이 흐르는 것처럼 보이는 폭포수 스프라이트를 만듭니다. JavaScript를 통해 제어되는 캔버스 요소를 기반으로 구축되었으므로 꽤 기술적인 설정입니다.
대부분의 경우 이것은 현대 웹 개발에서 가능한 것에 대한 증거입니다. 캔버스 요소를 배우면 디자인을 많이 제어할 수 있습니다.
펜대추락 by CJ Gammon
2. Sebastian Schepis의 CSS 스크롤 시차
다음은 고정된 배경과 상단에 더 큰 페이지가 있는 보다 실용적인 시차 효과입니다. 스크롤하면 각 페이지 섹션이 배경 위에 나타납니다. 이것은 깊이의 환상을 만들어내며 우수한 시차 디자인의 핵심 요소 중 하나입니다.
개발자 Sebastian Schepis는 이 페이지에 CSS만 사용했으며 매우 간단한 개념입니다. 배경 디자인이 크게 향상될 수 있다는 것은 말할 것도 없고 누구나 이것을 쉽게 복제할 수 있다고 생각합니다.
Sebastian Schepis의 Pen CSS 스크롤 시차 효과 보기
3. Renan Breno의 단순 이미지 태그 시차
큰 전체 화면 배경 이미지와 결합된 시차 디자인을 종종 볼 수 있습니다. 이들은 일반적으로 배경에 대해 특정 시차 "스크롤 속도"를 특징으로 하는 회사 사이트 및 신생 기업에서 너무 일반적입니다.
여기서 차이점은 페이지를 스크롤하는 속도나 이미지 배치가 얼마나 큰지에 있는 것이 아닙니다. 대신, 스크롤하는 동안 이미지가 페이지의 배경을 통해 얼마나 빨리 움직이는지 볼 수 있습니다. 미묘한 시차 효과지만 이 레이아웃은 다양한 애니메이션 속도가 실제로 작동하는 모습을 볼 수 있는 훌륭한 템플릿입니다.
Renan Breno의 펜 단순 이미지 태그 시차 보기
4. 시차 및 고정 이미지 배경
고정 이미지 배경은 페이지를 분할하고 콘텐츠 섹션을 균등하게 나누는 데 적합합니다. 스크롤하면 개별 페이지 섹션이 배경 이미지보다 높은 것처럼 느껴질 수 있습니다. 이것은 스크롤하는 동안 시차 효과에 생기를 불어넣도록 설계된 모든 것입니다.
콘텐츠 영역이 약간 얇아 보이기 때문에 이 정확한 레이아웃을 사용하지 않을 것입니다. 하지만 이 스타일이 마음에 든다면 웹사이트와 관련된 다른 이미지로 각 페이지 섹션에 구두점을 지정하는 것이 좋습니다.
See the Pen #Maincode Hackdays by chaobu
5. Paulo Cunha의 CSS 시차
이 시차 예는 시차 효과가 작동하는 방식의 고유한 예입니다. 모든 페이지 콘텐츠는 스크롤 시 콘텐츠 아래에 사라지는 큰 영웅 이미지 아래에 있습니다. 이것은 또한 고정된 이미지 위치를 사용하여 이미지가 제자리에 고정되어 있지 않고 페이지가 이미지 위로 움직이는 것처럼 보이도록 합니다.
긴 스크롤 레이아웃과 동일한 효과를 사용할 수 있으며 유사한 디자인 스타일을 갖습니다. 이는 큰 이미지가 포함된 단일 블로그 게시물이나 큰 영웅을 사용하여 관심을 끄는 랜딩 페이지에 가장 적합합니다.
Paulo Cunha의 Pen CSS Parallax 보기
6. Katie Rogers의 시차 설계
다음은 샘플 웨딩 페이지에 대한 흥미로운 시차 디자인입니다. 이미지가 시차 고정 스크롤로 다양한 콘텐츠 영역을 분리하는 분할 페이지 디자인이 있습니다. 모든 것이 CSS에서 실행되며 이는 멋진 터치이며 모든 배경 이미지는 페이지 아래로 이동하는 동안 고정된 상태로 유지됩니다.
이 효과는 콘텐츠 영역에 배경 위에 떨어지는 큰 상자 그림자가 있기 때문에 작동합니다. 당연히 이것은 페이지에 이론적 광원과 계층 구조를 제공하여 깊이의 환상을 만듭니다. 단일 페이지 레이아웃에 대한 매우 좋은 아이디어입니다.
Katie Rogers의 펜 시차 디자인 보기
7. Rich Howell 의 배경 이미지 시차 스크롤
앞서 배경 위치 변경 비율에 따라 스크롤 속도가 어떻게 달라질 수 있는지 언급했습니다. 이 예제는 이것이 어떻게 작동하는지 보기 위한 완벽한 비교입니다.
이 예제의 효과를 보려면 스크롤 막대를 사용해야 합니다. 마우스 휠로 시도했지만 차이를 볼 수 없었지만 스크롤 막대를 움직일 때 열 사이의 속도 변화를 알 수 있습니다.
이러한 속도 중 어느 것도 시차 설계에 대한 틀리거나 부정확한 묘사가 아닙니다. 그것들은 페이지에서 움직임을 만드는 다른 방법일 뿐이며 이 작은 예는 많은 옵션을 시각화하는 좋은 방법입니다.
Rich Howell의 Pen Scrolling Background-Image Paralax 보기
8. Saransh Sinha의 별이 빛나는 시차 배경
이 효과는 스크롤링과 관련이 없지만 시차 설계와 직접 관련이 있습니다. 순수 CSS를 사용하여 페이지 배경에 시차 별 애니메이션을 만듭니다. 페이지 위에 텍스트와 콘텐츠 영역을 추가할 수 있지만 별은 첫눈에 즉시 깊이를 만듭니다.
애니메이션은 CSS를 통해 실행되지만 이 스니펫은 Sass와 Compass를 사용하므로 편집하기 전에 이해하는 데 도움이 됩니다.
Saransh Sinha의 CSS에서 Pen Parallax Star 배경 보기
9. Jack Rugile의 캔버스 시차 스카이라인
때때로 시차 디자인은 스크롤 기능과 함께 마우스 움직임도 대상으로 합니다. 이 캔버스 디자인은 페이지에서 마우스 움직임에 반응하는 끝없는 스카이라인 효과를 만듭니다. 마우스의 위치를 변경하면 보기 각도가 변경됩니다. 그러나 애니메이션은 그대로 유지되며 이 스카이라인이 명확한 시각적 계층 구조로 움직이는 것을 볼 수 있습니다.
당연히 이것은 꽤 복잡한 아이디어이기 때문에 애니메이션에 JavaScript가 필요합니다. 그러나 그것은 또한 많은 웹사이트에서 찾을 수 있는 것이 아니므로 귀하의 사이트에 복사할 것도 아닙니다. 하지만 시차 개념으로서 이것은 정말 흥미롭습니다.
Jack Rugile의 펜 캔버스 시차 스카이라인 보기
10. Bajjy Xilo의 깨진 유리 필터
나는 매우 독특한 디자인을 만드는 웹사이트에서 이 효과를 본 적이 있습니다. 깨진 유리 필터는 배경 이미지가 여러 부분으로 분할되는 환상을 제공합니다. 이미지가 유리판 위에 있는 것처럼 보이며 산산조각이 나서 그림이 부서지고 이미지가 왜곡되었습니다.
순수 CSS로 이 효과를 복제할 수 있으며 멋진 디자인을 넘어서는 실용적이고 실제적인 용도가 없을 수도 있는 멋진 효과 중 하나입니다. 그래도 이것은 스크롤하는 동안의 시차 깊이와 모션의 인상적인 예입니다.
Bajjy Xilo의 Pen BrokenGlass CSS 필터 보기