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

В данном уроке мы рассмотрим как создать простую анимированную страницу 404 для сайта, с помощью jQuery и CSS3. И так, приступим.

Шаг 1. HTML

Как обычно, мы начинаем с разметки HTML. Здесь мы используем новый тип документа HTML5 с новым тегом HGroup.

404.html

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

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

Шаг 2. CSS

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

Каждая пара изображений имеет высоту 80px и ширину 80px, в качестве фона будем использовать steam.png. Это изображение в два раза больше высоты пролетов, а на самом деле состоит из двух цветовых версий  — белого и черного . Классы steam1 и steam2  показывают соответствующие версии изображения.

Шаг 3. jQuery

Как мы уже говорили выше, JQuery будет выполнять анимацию выхлопных газов ракеты. Давайте внимательнее посмотрим, как это будет происходить. Запуск начинается с параметра window load, Это отличается от document ready событий, в том, что window.load срабатывает, когда не только присоединен DOM, но и изображения загружены. Таким образом, мы можем быть уверены, что пользователь не увидит дым от ракет пока rocket.png не загружен.

Функция AnimSteam () создает эффект дыма. При вызове функции выполняет анимацию, которая использует SetTimeout , чтобы запустить анимацию снова в 10 миллисекунд.

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

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

Читайте также: