В сегодняшнем уроке мы решили показать вам, как создавать удивительные анимированные пейзажи с помощью всего лишь нескольких строк JQuery и некоторые абсолютные позиционирования элементы с изображениями.
Вот демо, а вот исходники. Анимация занимает около 30 секунд, так что сидите сложа руки и наслаждайтесь! =)
Пожалуйста, обратите внимание, что это не будет работать в любой версии IE.
Не потому, что это не возможно, просто не было времени и сил для этого. Я пытался исправить это по крайней мере в IE 8, но вы знаете, при разных кодированиях получаются самые уродливые
"фиксации", ибо иногда приходят дни когда нужно запастись терпением. =) Сегодня был один из этих дней
(Бьюсь об заклад, что все вы это уже проходили), где Вы говорите: Вот бил, Зараза...! =) ну да ладно.
Ok, давайте начнем с написанием сценария.
Шаг 1. HTML
HTML состоит из DIV-ов, которые будут иметь пейзаж в качестве фона.
Таким образом, мы будем иметь в небе, солнце, облака, а также луну и звезды.
Мы также должны сделать и падающая звезда:
<div id="sky"></div>
<div id="sun_yellow"></div>
<div id="sun_red"></div>
<div id="clouds"></div>
<div id="ground"></div>
<div id="night"></div>
<div id="stars"></div>
<div id="sstar"></div>
<div id="moon"></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;
}
В начале анимации, когда происхлдит анимация дня,
мы хотим показать, как зайдёт солнце. т.е. двигаться вниз и исчезают медленно.
В то же время, красное солнце будет двигаться таким же образом.
Таким образом, на начальном этапе, мы установили состоянии где-то в центре экрана.
#sky{
background:#fff url(../images/sky.png)
repeat-x top left;
z-index:1;
}
Небо состоит из полупрозрачных изображений с градиентом от синего к белому. Это даст хороший эффект небо.
#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;
}
Облака и пейзаж будет повторяться, потому что мы хотим, чтобы пользователи с большим экраном,
тоже увидели полную анимацию.
Попробуйте увеличить / уменьшить в ваш браузер и вы увидите, что экран всегда заполнены с изображениями.
Поскольку мы поставили переполнения тела может быть скрыта,
пользователь никогда не придется прокручивать - он просто не увидит ничего, что выходит за пределы браузера.
#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 по горизонтали (XPOS) и вертикально-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-индексов, мы определим, какой элемент будет на вершине другого.
Конечно, если мы перечислим их в HTML, соответственно, мы будем иметь тот же эффект.
Для всех элементов, которые мы не хотим показывать с самого начала на приведем значение непрозрачности равно 0,
следовательно, сделать их прозрачными.
И это вся часть CSS. Теперь давайте посмотрим на волшебную функцию в JavaScript.
Шаг 3. JavaScript
Для того, чтобы оживить цвета фона, мы будем использовать JQuery плагин, который можно найти здесь http://plugins.jquery.com/project/color .
Просто включите его после включать основной сценарий 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-тую секунду.
И они должны стать прозрачными в конце концов (так что мы имеем ясное небо в ночное время).
Теперь, давайте посмотрим, что происходит в функции, которые должна начаться после захода солнца (строка 3 до 10).
Во-первых, мы хотим, чтобы звезды медленно "Fade In", установив прозрачность.
После того, что произошло, мы хотим чтобы луна начила появляться с низу по центру.
Затем должна появиться падающая звезда. Это мы сделаем, изменив его фоне состоянии 0px 0px и перемещая ее немного вниз.
Кроме того, чтобы сделать его настоящей звездой, мы сделаем так чтобы звезда исчезла причём очень быстро:), установив прозрачность до 0.
Вот и всё! Я надеюсь, вам понравилось!