главная

Теги:


Анимированная заставка для сайта с использованием jQuery

Демонстрационная страница покажет, что должно получиться в итоге. Заставка длится 30 секунд.

К сожалению, она не будет работать в IE. Не потому, что это невозможно. Но подгонка кода хотя бы под IE 8 превращает процесс создания страницы в сплошное мучение, и делает стройный и красивый код набором заплаток. IE должен умереть (не только IE6, но и вся линейка). Будьте милосердны, позвольте отойти ему в мир воспоминаний.

1. HTML

Разметка HTML состоит из нескольких элементов div, которые содержат изображения для сцен в качестве фона. Так у нас будет небо, солнце, облака, ландшафт, луна и звезды. Аналогичным образом организованы элементы для ночного пейзажа и падающая звезда.

 

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

Но прежде, чем окунуться в детали анимации, нужно взглянуть на CSS.


2. CSS

Правила CSS очень похожи для всех элементов. Все имеют абсолютное позиционирование:

body{
    overflow:hidden;
}
#clouds, #sky, #night, #stars{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
}

При задании общих атрибутов все классы перечисляются через запятую.

#sky{
    background:#fff url(../images/sky.png) repeat-x top left;
    z-index:1;
}

Небо состоит из композиции полупрозрачных изображений с градиентом от голубого до белого. Так получается прелестный эффект.

#sun_yellow{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun.png) no-repeat center center;
    z-index:2;
}
#sun_red{
    position:absolute;
    left:45%;
    top:50%;
    width:150px;
    height:152px;
    background:transparent url(../images/sun2.png) no-repeat center center;
    z-index:2;
    opacity:0;
}

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

#clouds{
    background:transparent url(../images/clouds.png) repeat-x top left;
    z-index:3;
}
#ground{
    position:absolute;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:232px;
    background:transparent url(../images/ground.png) repeat-x bottom center;
    z-index:3;
}

Облака и ландшафт повторяются, чтобы представить целостную картину для различных размеров экрана. Так как мы установили свойство overflow:hidden;, то полоски прокрутки никогда не будут появляться.

#night{
    background-color:#000;
    z-index:4;
    opacity:0;
}
#stars{
    bottom:200px;
    background:transparent url(../images/stars.png) repeat bottom center;
    z-index:5;
    opacity:0;
}

Ночь представлена простым элементом div, растянутым на весь экран с темным цветом фона. Мы постепенно будем проявлять его, изменяя прозрачность в ходе анимации.

#sstar{
    position:absolute;
    left:40%;
    top:10%;
    width:126px;
    height:80px;
    background:transparent url(../images/shootingstar.png) no-repeat 80px -200px;
    z-index:5;
    opacity:0;
}

Падающая звезда является специальным элементом: изображение - простая наклонная белая линия. Оно будет появляться как падающая звезда с помощью изменения положения фона и проявления. Поэтому нужно установить начальную позицию в значение 80px по горизонтали и -200px по вертикали.

#moon{
    position:absolute;
    left:45%;
    top:60%;
    width:168px;
    height:168px;
    background:transparent url(../images/moon.png) no-repeat center center;
    z-index:6;
    opacity:0;
}

С помощью увеличения значения свойства z-index, мы определяем порядок вывода элементов на странице. Конечно, в разметке HTML мы устанавливаем элементы соответственно, но всегда лучше подстраховаться в коде CSS. Все элементы, которые не нужно выводить сразу, будут иметь значения свойства opacity равное 0, что делает их прозрачными.

Теперь можно рассмотреть код JavaScript.


3. JavaScript

Для анимации изменения цвета неба используется плагин jQuery, который можно найти здесь. Он включен в код страницы после библиотеки jQuery.

Вот код JavaScript, который используется для нашей анимации:

$(function() {
   $('#sun_yellow').animate({'top':'96%','opacity':0.4}, 12000,function(){
       $('#stars').animate({'opacity':1}, 5000,function(){
            $('#moon').animate({'top':'30%','opacity':1}, 5000, function(){
                $('#sstar').animate({'opacity':1}, 300);
                $('#sstar').animate({
                    'backgroundPosition':'0px 0px','top':'15%', 'opacity':0
                }, 500);
            });
       });
   });
   $('#sun_red').animate({'top':'96%','opacity':0.8}, 12000);
   $('#sky').animate({'backgroundColor':'#4F0030'}, 18000);
   $('#clouds').animate({'backgroundPosition':'1000px 0px','opacity':0}, 30000);
   $('#night').animate({'opacity':0.8}, 20000);
});

На строчках 2 и с 12 по 16 мы определяем, что будет происходить одновременно. Последний параметр указывает длительность эффекта в миллисекундах. Желтое солнце будет выводиться 12 секунд, затем начнет опускаться и становиться прозрачным, в то же время красное солнце начнет проявляться (оно также опускается одновременно).

Небо (строка 13) в течение 18 секунд будет изменять цвет с белого (как определяется в CSS) на пурпурный.

Облака (строка 14) будут двигаться, потому что мы определяем анимированное изменение положения фона в течение 30 секунд. Также мы определяем, что в конце движения они должны стать прозрачными (так что будет проявляться чистое ночное небо).

Так как нам нужно затемнение декораций, то элемент div с темным фоном станет менее прозрачным.

Теперь рассмотрим, что происходит после захода солнца (строки с 3 по 10). Сначала звезды постепенно проявляются с помощью изменения прозрачности. Затем появляется луна, поднимаясь снизу до центра экрана и одновременно проявляясь. Затем появляется падающая звезда. Она имитируется изменением положения фона с позиции 0px 0px вниз. Для имитации настоящей падающей звезды мы убираем ее очень быстро с помощью изменения прозрачности.


Готово!

Так можно сделать настоящий мультфильм, для просмотра которого нужен будет только нормальный браузер.


Источник урока: tympanus.net/codrops/2009/12/14/day-and-night-creating-animation-with-jquery-and-css/

Урок Создан:2011-02-07 Просмотров:2633

Добавить комментарий:


Copyright© 2009 Hosted by Zhost