CSS 및 SVG로 완전히 구축된 12가지 풍경 장면
게시 됨: 2021-01-26SVG로 꽤 미친 짓을 할 수 있습니다. 개발자는 SVG 및 캔버스 기능을 사용하여 이미지 파일 없이 페이지에 그래픽을 코딩할 수 있습니다.
이것은 내가 여기에서 수집한 순수한 SVG 풍경과 같은 정말 멋진 프로젝트로 이어집니다.
이 모든 프로젝트는 완전히 무료로 편집하고 사용할 수 있습니다. 그들은 애니메이션, 왜곡 및 시차 효과를 만들기 위해 일부 기본 CSS 및 JS와 함께 SVG 코드에서 작업합니다.
혹스 베이
이 아름다운 만 풍경의 예는 Louis Coyle에 의해 개발되었습니다. 일반적으로 3D 렌더링에서 볼 수 있는 폴리곤 디스플레이를 모방한 폴리 스타일 모양을 따릅니다.
SVG 및 JavaScript에서 널리 사용되는 효과이지만 확실히 해내기가 간단하지 않습니다.
Louis는 TweenMax 라이브러리를 사용하여 스타일과 코드 모두에서 우아한 애니메이션을 만듭니다.
원시 SVG 코드를 파헤치고 싶다면 이 스니펫에서 배울 것이 많습니다.
낮은 폴리 풍경
로우 폴리 룩을 모델로 한 또 다른 풍경이 있습니다.
이것은 개발자 Luke Reid가 제공하며 3D 효과에 훨씬 더 중점을 둡니다. 전체 레이아웃이 매우 사실적으로 느껴지며 별이 뿌려진 하늘 그라데이션이 이 디자인에 생명을 불어넣습니다.
JavaScript 코드를 보면 별 위치가 무작위로 생성되는 것을 볼 수 있습니다. SVG 배경 또는 영웅 헤더 스타일을 디자인하는 경우 멋진 효과입니다.
SVG 풍경 애니메이션
Evan Winston은 눈에 보이는 모든 요소를 천천히 보기에 떨어뜨리는 이 사용자 지정 애니메이션을 개발했습니다.
그것은 꽤 멋진 효과이며, 누구나 만들 수 있는 것입니다. 물론 이것은 애니메이션을 완료하는 데 필요한 시간 때문에 거대한 배경 그림만큼 유용하지 않을 수 있습니다.
그러나 웹 사이트에서 사용자 정의 SVG 아이콘으로 유사한 작업을 수행할 수 있습니다. 기본 SVG를 디자인한 다음 위의 코드(TweenMax에서도 실행됨)의 코드를 사용하여 애니메이션을 적용하는 데 도움이 되는 많은 자습서가 있습니다.
해양 경관
기본적인 호숫가 전망을 위해 저는 이 SVG 스니펫을 파헤치고 있습니다. 그것은 배경의 물과 구름과 같은 몇 가지 기본 페이지 애니메이션을 자랑합니다.
이 모든 작업은 약간의 JavaScript로 매우 쉽게 수행할 수 있습니다. 하지만 이 스니펫이 순수 CSS 로 만들어졌음을 알 수 있을 것입니다.
최신 CSS3 애니메이션은 UI/UX 애니메이션이 있는 웹사이트에서 가장 유용하지만 풍경이나 일러스트레이션에도 사용할 수 있습니다. 그것이 개발자가 되는 즐거움의 절반입니다.
겨울 풍경
이 겨울 풍경은 우리가 매년 보는 새하얀 눈을 상기시켜줍니다.
Andrey Sorokin은 SVG 코드와 JavaScript로 이 기본 애니메이션을 만들었습니다. 애니메이션 효과가 느려질 수 있으므로 전체 효과를 보려면 1분 정도 기다려야 할 수 있습니다.
나는 이징 효과의 품질과 이것이 브라우저에서 얼마나 잘 작동하는지에 가장 깊은 인상을 받았습니다.
얼마나 많은 요소가 보기에 애니메이션되는지를 기반으로 하면 약간의 부진을 가정했을 것입니다. 그러나 얼마나 많은 일이 일어나고 있는지 생각하면 엄청나게 빠르게 로드됩니다.
나무에서 나오는 태양의 애니메이션은 말할 것도 없고 그저 유쾌합니다.
SVG 풍경
우리는 그라디언트 없이 기본 색상을 사용하는 플랫 디자인 트렌드와 세미 플랫 디자인이 크게 성장하는 것을 보았습니다.
이 스니펫은 그림자와 모서리에 단단한 가장자리가 있는 동일한 스타일을 따릅니다.
그것은 아름다운 스니펫이며 확실히 작업하기 가장 쉬운 SVG 전용 랜드스케이프 중 하나입니다. SVG 코드를 사용한 적이 없더라도 이 스니펫이 살펴볼 내용과 SVG/XML 속성을 많이 제공하므로 Google에서 검색하여 자세히 알아볼 수 있습니다.
자연 경관
개발자 Amr Zakaria는 애니메이션 보트와 비행기를 사용하여 이 풍경과 유사한 평면 디자인을 만들어 주의를 끌었습니다.
모든 것이 순수 CSS에서 실행되며 꽤 명확한 CSS 키프레임 애니메이션과 함께 작동합니다.
인내심을 갖고 작동할 수 있다면 이 모든 것을 웹페이지의 배경에 복제할 수 있습니다. 가장 어려운 부분은 모바일 화면에 완벽하게 반응하도록 하는 것입니다.
시차 조명
웹의 모든 시차 효과 중에서 이것은 매우 기본적입니다. 그러나 모든 것이 스크립팅이 필요하지 않은 CSS에서만 작동하기 때문에 매우 인상적입니다.
가로등을 포함한 모든 요소는 SVG 모양과 CSS 효과로 디자인되었습니다.
정말 가까이서 보면 램프가 실제로 CSS 그림자 효과를 사용하여 사실적인 광선을 만드는 것을 알 수 있습니다.
기본 애니메이션
이 업데이트된 SVG 랜드스케이프에서 볼 수 있는 많은 사용자 정의 요소를 찾을 수 있습니다.
제작자인 Stef van Dijk는 각 애니메이션에 바운스 및 중력과 같은 효과를 추가하여 각 애니메이션에 세심한 주의를 기울입니다. 예를 들어, 산이 시야에 들어오면 지면에서 반동 효과를 볼 수 있습니다.
디테일에 세심한 주의를 기울일 때 얻을 수 있는 것이 바로 이것이 바로 제가 현대 웹 애니메이션의 열렬한 팬인 이유입니다.
SVG 및 CSS
초대형 배경 애니메이션을 보려면 이 펜을 살펴보세요. 이 모든 것은 JavaScript 없이 SVG와 순수 CSS에서 작동합니다.
풍경의 레이어가 천천히 시야에 들어오고 모두 고유한 키프레임 애니메이션이 있습니다. 그러나 일단 시야에 들어오면 일부 요소가 계속 움직이는 것을 알 수 있습니다(예: 태양 및 구름).
이와 같은 것을 디자인하는 것은 많은 시간이 걸립니다. 그러나 CSS 애니메이션의 기본 사항과 함께 SVG 구문에도 익숙해질 것입니다.
잔디
이 환경은 매우 간단하지만 새로운 프론트엔드 코더를 위한 훌륭한 교사이기도 합니다.
Felix De Montis는 잔디, 언덕 및 나무에 대한 소량의 SVG 코드를 사용하여 처음부터 이 프로젝트를 구축했습니다. 그것을 복제하고 CSS를 사용하여 위치를 변경하는 것도 충분히 쉽습니다.
전반적으로 간단한 SVG 디자인에 관심이 있다면 이 디자인이 시작하기에 좋은 곳입니다. Felix는 또한 기본 CSS 이상의 것을 찾고 있다면 LESS 전처리기를 사용합니다.
시차 페이지
Chris Gruber는 마우스 움직임에 따라 움직이는 이 깨끗한 시차 풍경을 개발했습니다.
그러나 그와 함께 그는 범선과 배경 구름과 같은 특정 페이지 요소에 애니메이션을 적용했습니다.
이 모든 것은 20줄 미만의 jQuery에서 작동하기 때문에 JavaScript가 거의 필요하지 않습니다. 이것이 얼마나 상세한지를 고려하면 더욱 인상적입니다.