| Главная » Файлы » Шаблоны » Разное |
Cоздаём анимированную страницу 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> Внутри корпуса мы разместили пару тегов, вы можете увидеть тег #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 миллисекунд. На этом всё! | |
|
Демо Просмотров: 1403
| 23.03.2014, 18:09 |
| Просмотров: 1403 | Загрузок: 0 | | |
Рекомендую к прочтению
| Всего комментариев: 0 | |
Disqus comments
comments powered by Disqus| HTML | |
| BB-Code | |
| Ссылка |
