12 пейзажных сцен, полностью созданных с помощью CSS и SVG

Вы можете делать довольно сумасшедшие вещи с SVG. Разработчики могут кодировать графику на странице без каких-либо файлов изображений, просто используя функцию SVG и холста.

Это приводит к действительно крутым проектам, таким как пейзажи в чистом SVG, которые я собрал здесь.

Все эти проекты абсолютно бесплатны для редактирования и использования. Они работают с кодом SVG вместе с некоторыми базовыми CSS и JS для создания анимации, искажений и эффектов параллакса.

Хокс-Бей

Этот пример красивого пейзажа бухты был разработан Луи Койлом. Он следует полистильному виду, имитирующему полигональное отображение, обычно встречающееся в 3D-рендеринге.

Это популярный эффект в SVG и JavaScript, но реализовать его, безусловно, непросто.

Луи использует библиотеку TweenMax для создания анимаций, элегантных как по стилю, так и по коду.

Если вы когда-нибудь хотели покопаться в необработанном SVG-коде, из этого фрагмента можно многому научиться.

Низкополигональная Пейзаж

Вот еще один пейзаж, созданный по образцу низкополигональной модели.

Этот создан разработчиком Люком Ридом и уделяет гораздо больше внимания 3D-эффектам. Весь макет кажется очень реальным, а градиент неба, усыпанный звездами, вдыхает жизнь в этот дизайн.

Если вы посмотрите на код JavaScript, вы увидите, что позиции звезд генерируются случайным образом. Это классный эффект, если вы когда-либо проектировали фон SVG или стиль заголовка героя.

Пейзажная анимация SVG

Эван Уинстон разработал эту пользовательскую анимацию, которая медленно отображает все видимые элементы.

Это довольно крутой эффект, и его может создать каждый. Конечно, это может быть не так полезно, как огромная фоновая иллюстрация, в основном из-за времени, необходимого для завершения анимации.

Но вы можете сделать что-то подобное с пользовательскими значками SVG на веб-сайте. Существует множество руководств, которые помогут вам спроектировать базовые SVG, а затем анимировать их с помощью кода из приведенного выше фрагмента (также работающего на TweenMax).

Морской пейзаж

Для базового вида на берегу озера я действительно копаю этот фрагмент SVG. Он содержит несколько основных анимаций страниц, таких как волны на воде и облака на заднем плане.

Все это довольно легко сделать с небольшим количеством JavaScript. Но вы заметите, что этот фрагмент сделан с использованием чистого css , что делает его еще более впечатляющим!

Современная анимация CSS3 наиболее полезна на веб-сайтах с анимацией UI/UX, но вы также можете использовать ее для пейзажей или иллюстраций. Это половина удовольствия быть разработчиком.

Зимний пейзаж

Этот зимний пейзаж напоминает о хрустящем белом снегу, который мы видим каждый год.

Андрей Сорокин создал эту базовую анимацию, используя только код SVG и немного JavaScript. Анимация может быть медленной, поэтому вам, возможно, придется подождать минуту, чтобы увидеть полный эффект.

Я больше всего впечатлен качеством эффектов плавности и тем, насколько хорошо они работают в браузере.

Основываясь на том, сколько элементов анимируется в поле зрения, я бы предположил некоторую медлительность, но он загружается невероятно быстро, учитывая, сколько всего происходит.

Не говоря уже о том, что анимация солнца, выходящего из-за дерева, просто восхитительна.

SVG-сценарий

Мы наблюдаем массовый рост тенденций плоского дизайна и полуплоских дизайнов, в которых используются базовые цвета без градиентов.

Этот фрагмент следует тому же стилю с резкими краями для теней и углов.

Это красивый фрагмент и, безусловно, один из самых простых в работе ландшафтов только для SVG. Даже если вы никогда раньше не использовали SVG-код, этот фрагмент предлагает много интересного и множество атрибутов SVG/XML, которые вы можете найти в Google, чтобы узнать больше.

Природный ландшафт

Разработчик Амр Закария создал аналогичный плоский дизайн с этим пейзажем, используя анимированные лодки и самолеты, чтобы привлечь ваше внимание.

Все это работает на чистом CSS и работает с довольно четкой анимацией ключевых кадров CSS.

Все это можно воспроизвести для фона на веб-странице, если у вас хватит терпения заставить его работать. Самое сложное — сделать так, чтобы это полностью адаптировалось к экранам мобильных устройств.

Параллаксные огни

Из всех эффектов параллакса в Интернете этот самый простой. Однако это также весьма впечатляет, так как все работает только на CSS , никаких сценариев не требуется.

Все элементы, включая уличные фонари, разработаны с использованием форм SVG и эффектов CSS.

Если вы посмотрите очень внимательно, то заметите, что лампы на самом деле используют эффект тени CSS для создания реалистичного свечения.

Основные анимации

В этом обновленном ландшафте SVG вы найдете множество настраиваемых элементов, которые бросаются в глаза.

Создатель Стеф ван Дейк уделяет особое внимание каждой анимации, добавляя к каждой части эффекты подпрыгивания и гравитации. Например, когда в поле зрения появляются горы, вы заметите эффект отскока от земли.

Это то, что вы получаете, когда уделяете пристальное внимание деталям, и именно поэтому я такой большой поклонник современной веб-анимации.

SVG и CSS

Взгляните на эту ручку, чтобы получить увеличенную фоновую анимацию. Все это работает на SVG и чистом CSS без JavaScript.

Слои ландшафта постепенно появляются в поле зрения, и все они имеют собственную анимацию ключевых кадров. Но как только они появятся в поле зрения, вы заметите, что некоторые элементы продолжают двигаться (например, солнце и облака).

Создание чего-то подобного занимает много времени. Но это также познакомит вас с синтаксисом SVG и основами CSS-анимации.

Трава

Хотя этот ландшафт очень прост, я также думаю, что он станет отличным учителем для новых программистов.

Феликс Де Монтис создал этот проект с нуля с небольшим количеством кода SVG для травы, холмов и деревьев. Достаточно просто воспроизвести это и изменить позиции с помощью CSS.

В целом, если вам нравятся простые SVG-дизайны, это отличное место для начала. Felix также использует препроцессор LESS, если вы ищете что-то помимо базового CSS.

Страница параллакса

Крис Грубер разработал этот безупречный пейзаж с эффектом параллакса, который движется в зависимости от движений мыши.

Но наряду с этим он также анимировал некоторые элементы страницы, такие как парусник и фоновые облака.

Для всего этого требуется очень мало JavaScript, так как он оперирует менее чем 20 строками jQuery. Тем более впечатляет, учитывая, насколько это подробно.