10 впечатляющих примеров заставок в веб-дизайне

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

Пришедшее из мира настольного программного обеспечения, оно сумело успешно прижиться в веб-дизайне. Он шустрый, быстрый, легкий, относительно простой и мощный. Мы всегда говорим о том, как первые несколько секунд могут изменить мир. Все должно быть идеально с самого начала. А заставки — один из тех компонентов веб-приложения, которые напрямую связаны с успехом этой миссии.

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

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

Использование полного экрана

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

SmokeT от Тедда Аркури

Three.js не является хорошим компаньоном для создания быстрых и легких заставок, но в случае с Теддом Аркури он определенно помогает. Здесь искусно воспроизведенный высокореалистичный эффект дыма используется для усиления внешнего вида буквы «Т». Последний здесь чисто символический, так как его легко превратить в логотип, талисман или название.

.

Заставка Тимоти Гиблина

Большинство заставок идут рука об руку с фирменным стилем. Например, заставка Тимоти Гиблина. Это 100% классический экран-заставка, в котором фирменный стиль обогащен творческим мышлением художника. Автор показывает нам, как придерживаться золотой середины. Его концепция оригинальна и в то же время скромна. Он раскрывает только логотип, но это раскрытие бросается в глаза.

Анимация заставки от Hitesh Sahu

Этот пример менее впечатляющий, чем решение Тимоти Гиблина, но он более практичен и сегодня его можно увидеть повсюду. По сути, это просто ленивая загрузка, переведенная на следующий уровень. Он игриво и творчески раскрывает элементы домашней страницы один за другим, делая вещи намного интереснее.

Есть еще несколько интересных фрагментов кода. Давайте вместе изучим коллекцию и найдем то, что лучше всего подойдет для вашего следующего проекта.

Классические решения

Хотите использовать более проверенный подход к заставке? Приведенные ниже примеры помогут вам в этом.

Заставка Адама Блюма

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

Play On от Нираджана

Чтобы сделать предыдущее решение немного более интересным, вы можете добавить манипуляции с фоном, как это сделал Ниранджан в этой ручке. В его проекте Play On представлены прекрасные скользящие переходы между полупрозрачными накладываемыми экранами, примененными к фону изображения. Красиво и забавно.

Мой всплеск от Williams

My Splash by Williams — еще один типичный пример классической заставки. Концепция имеет два этапа. Сначала анимация раскрывает подпись автора в умеренном и комфортном темпе. После этого появляется черный экран. Это элегантное, элегантное и деловое решение, которое подходит для множества проектов.

Анимированная заставка Дмитрия Львовского

Анимированная заставка Дмитрия Львовского — идеальная отправная точка для создания собственного решения. Анимация на основе JavaScript состоит из нескольких экранов и традиционного перехода между ними. Последний основан на эффекте, когда круг ведет игру.

См. Анимированную заставку Дмитрия Львовского (@UnforbiddenYet) на CodePen.

Простое исчезновение CSS3, Джайлз Папворт

Вот невероятно упрощенное решение. Процедура заключается в показе блоков текста один за другим, сопровождаемых проверенным временем эффектом затухания. Тем не менее, он делает все, что должен. И, самое главное, он делает это, не «съедая» ваши драгоценные ресурсы, потому что использует только CSS3. Он простой, элегантный, скромный и легкий.

Создатель настроения

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

Анимация загрузки консоли от Эндрю Таннеклиффа

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

Падающие числа Тибо Ян Бейер

Если вы планируете проект, основанный на статистике или данных, то книга «Падение чисел» Тибо Яна Бейера станет хорошим началом для вашего опыта рассказывания историй. Анимация начинается с падающих чисел, которые в конечном итоге падают на землю и открывают главный экран. Он имеет геометрическое очарование, обогащенное некоторой цифровой специей.

Последний, но тем не менее важный

Для многих людей Стэн Ли всегда будет «занудным братом Брюса Ли». Для нас он икона, которая стояла за вселенной, где добро побеждает зло, и который навсегда останется в наших сердцах.

Заставка Marvel от Мэтта Файнштейна

Marvel Splash Screen от Matt Feinstein — это не совсем трибьют, но он понравится всем поклонникам супергероев. Название говорит само за себя. Его анимация всплеска имеет чудесную атмосферу комиксов. Это копия вступительной сцены фильмов Marvel, которая выглядит невероятно.

Как сделать всплеск

В качестве альтернативы загрузчикам можно использовать заставки — если они, конечно, не тяжелые. К сожалению, до сих пор есть люди, которые воспринимают их слишком серьезно и пытаются превратить в остросюжетную часть пьесы.

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