Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






Анимация на Jquery



В сегодняшнем уроке мы решили показать вам, как создавать удивительные анимированные пейзажи с помощью всего лишь нескольких строк 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.

Вот и всё! Я надеюсь, вам понравилось!



Больше информации читайте по теме:

CSS - вертикальное выезжающее меню на Jquery
Очень сочное расползающееся меню на Jquery Easing и CSS
Красивое слайдшоу в стиле движущихся объектов на CSS и Jquery
Jquery горизонтальное навигационное меню с увеличивающимися иконками при наведении
Перекрестное выпадающее вертикально-горизонтальное универсальное анимированное меню на CSS3 и Jquery
RollOver кнопки средствами JavaScript (Jquery)
Раздвижное (выпадающее) вертикальное навигационное меню на JQuery
Стильное навигационное меню.
Всплывающая графическая подсказка на MooTools
Навигационное меню средствами jQuery



Оценить статью:

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

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        


        Roman_che    22.09.2011 23:35:35
        

А чего солнышко то не исчезло полность, а осталось внизу страницы??косяк!

212.106.33.211




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок