Все для веб-дизайнера
Как создать анимированную страницу 404
Всем вам известная данная страница, она неотъемлемая составляющая каждого сайта. Это так называемая заглушка для сайта, она информирует посетителя о том, что он перешел на не существующую страницу. Это весьма удобно, ведь пользователь просматривает не белую страницу с непонятными иероглифами, а на креативно оформленную заглушку. Знаю по себе, что такой вариант заставляет оставаться на сайте и вернутся назад, а не закрыть страницу, как как вылезла ошибка. Оформив правильно данную страницу вы не потеряете посетителей на вашем сайте.
В данном уроке мы рассмотрим как создать простую анимированную страницу 404 для сайта, с помощью jQuery и CSS3. И так, приступим.
Шаг 1. HTML
Как обычно, мы начинаем с разметки HTML. Здесь мы используем новый тип документа HTML5 с новым тегом HGroup.
404.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
Внутри корпуса мы разместили пару тегов, вы можете увидеть тег #rocket и вышеупомянутый HGroup . #rocket был привязан rocket.png в качестве фона, кроме этого фон имеет несколько стилей применяется, в том числе относительное позиционирование, которое необходимо для анимации, как вы можете наблюдать в демонстрации.
Кроме этого, мы должны подключить JQuery библиотеки и наш script.js, который мы рассмотрим более детально чуть позже. Теперь перейдем к следующему шагу.
Шаг 2. CSS
Теперь давайте перейдем к стилем. Как уже упоминалось в HTML, для тега #rocket установлено позиционирование на относительное. Это позволяет вставить абсолютно позиционирован пролетов , которые составляют выхлопные газы , которые выходят из двигателя, и смещение их по отношению к ракете.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
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 не загружен.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$(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 миллисекунд.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 27.11.2012 в 21:56, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...