Как создать анимированную страницу 404

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

404.html

<html>

<head>

</head>

<body>

<h1>Страница не найдена</h1>

<h2>Вернитесь пожалуйста обратно</h2>

</hgroup>

</body>

</html>

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

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

Шаг 2. CSS

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

body{

background:url('img/bg.png') no-repeat center center #1d1d1d;

color:#eee;

font-family:Corbel,Arial,Helvetica,sans-serif;

font-size:13px;

}

#rocket{

width:275px;

height:375px;

background:url('img/rocket.png') no-repeat;

margin:140px auto 50px;

position:relative;

}

/* Пару классов steam */

.steam1,

.steam2{

position:absolute;

bottom:78px;

left:50px;

width:80px;

height:80px;

background:url('img/steam.png') no-repeat;

opacity:0.8;

}

.steam2{

/* Steam2 показывает нижнюю часть (темная-версия)

* От фонового изображения.

background-position:left bottom;

}

hgroup{

/ * Использование HTML4 HGroup элемента * /

display:block;

margin:0 auto;

width:850px;

font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;

text-align:center;

}

h1{

color:#76D7FB;

font-size:60px;

text-shadow:3px 3px 0 #3D606D;

white-space:nowrap;

}

h2{

color:#9FE3FC;

font-size:18px;

font-weight:normal;

padding:25px 0;

}

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

Шаг 3. jQuery

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

$(window).load(function(){

function animSteam(){

// Создать новый пролет steam1, или steam2 класса:

$('<span>',{

className:'steam'+Math.floor(Math.random()*2 + 1),

css:{

// Применение случайного смещения от 10px до 10px слева направо

marginLeft : -10 + Math.floor(Math.random()*20)

}

}).appendTo('#rocket').animate({

left:'-=58',

bottom:'-=100'

}, 120,function(){

/ / Когда анимация завершается, удалить службы

/ / Установить функцию, которая будет работать в 10 миллисекунд

$(this).remove();

setTimeout(animSteam,10);

});

}

function moveRocket(){

$('#rocket').animate({'left':'+=100'},5000).delay(1000)

.animate({'left':'-=100'},5000,function(){

setTimeout(moveRocket,1000);

});

}

// Запуск функции, когда документ и все изображения загружены.

moveRocket();

animSteam();

});

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