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

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

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

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

Шаг 1. HTML

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

404.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="rocket"></div>

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

<script src="script.js"></script>
</body>
</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;
}

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();
});

$(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 миллисекунд.

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

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

Интересно:

Print article

Опубликовал admin 27.11.2012 в 21:56, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. jQuery

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

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

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

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

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. jQuery

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

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

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи