404 стильная страница для вашего сайта | RUDEBOXНа страницу 404 попадают пользователи очень часто, и эта страница весьма отпугивает посетителей, после чего хочется сразу закрыть сайт и продолжить поиски на другом ресурсе. Но как удержать пользователя на странице, ответ достаточно простой и очевидный-создать отзывчивую страницу ошибки для пользователя. Что это значит? А то, что необходимо красиво стилизовать данную заглушку. В данном уроке мы рассмотрим именно такой прием, дизайн был разработан одним из наших французских коллег, и так, давайте посмотрим.

 

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

404: стильная страница для вашего сайта на JS

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

Шаг 1. HTML

Разметка будет элементарной и содержится с одной строчки, в которой будет ID присвоен определенная команда:

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

404 стильная страница для вашего сайта | RUDEBOX

Шаг 2. CSS

Так как большую часть работы у нас будет выполнять JS то нам необходимо определить общие параметры контейнера и отображение текста на заглушке:

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

Шаг 3. JS

Теперь нам необходимо установить цвета для текста, шрифт , разбить текст на секции каждая из которых будет закрашена определенным цветом, кроме этого устанавливаем процент анимации в соотношении с основным текстом:

Вот и все. Готово!

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