Создаем эффект 'летящее облако' с использованием jQuery

Сегодня довольно сложно представить сайт, без движущихся вращающихся объектов, без анимации и тд. В данной статье мы рассмотрим создание эффекта, который так и назовем "летающее облако". Суть на нашем сайте будет равномерно прямолинейно перемещаться слева направо определенный объект, притом при достижении правой границы сайта, он будет исчезать, появляться слева и повторять вновь свое движение. Смотрели на небо?.. Итак, бесконечно.

Основная функция, которую мы будем применять в нашем уроке:

$(identificator).animate(Что_делаем, Время, Тип_анимации);

• Что делаем – это собственно то действиек которое у нас будет происходить с нашим объектом.
• Время – сколько времени будет длится действие в миллисекундах.
• Тип_анимации (easing) - есть два параметра: "swing"(по умолчанию) и "linear". Linear – анимация разворачивается во времени равномерно. Swing – анимация развивается по параболе – сначала интенсивность усиливается, затем плавно затухает.

Пример использования:

$(".block").animate({width: "200px"}, 400);

Или еще пример, который запустит анимацию двух параметров одновременно:

$(".block").animate({width: "200px", height: "150px"}, 700 , "linear"); 

Теперь перейдем к решению нашей задачи.

Основная функция:

<script type='text/javascript'>
$(document).ready(function() {
function run() {
$("#cloud"). animate({left: ‘800px’}, 10000, "linear").fadeOut(400).animate({left: ‘0px’}, 0 , "linear").fadeIn(400);
run();
}
run ();
}
});
</script>

И сразу к разбору полетов: данная функция передвинет за 10 секунд наше "облако" на 800 пикселей, затем оно за 0.4 секунды исчезнет и переместится снова в левый край, затем наша функция вызовет сама себя повторно. Но окно браузера то не всегда 800 пикселей. Поэтому будем искать выход нашего положения. Школьная физика всегда начинается с равномерного прямолинейного движения.

Его формула:

v(скорость)=s(путь)/t(время)

Путь это ширина окна браузера, она у нас переменная. Скорость движения должна быть всегда одинаковой: нехорошо когда в узеньком 100 пиксельном окошке облака летают, а в огромном окне они будут еле ползать. В функции animate мы используем все-таки время, а не скорость.

t=s*1000/v

Время у нас указывается в миллисекундах, расстояние в пикселях, а скорость в пиксель/с. Осталось узнать ширину окна браузера, для этого используем функцию

document.body.clientWidth;

Теперь компонуем наши знания

<script type='text/javascript'>
$(document).ready(function() {
var sks = document.body.clientWidth;
var sks1 = sks - $("#cloud").css("width"); // путь который продет облако
var skleft1 = $("#cloud").css("left"); // начальное положение нашего облачка
skl1= '+='+sks1+'px';
function skrun() {
$("#cloud"). animate({left: skl1}, sks1*1000/80 , "linear").fadeOut(400).animate({left: skleft1}, 0 , "linear").fadeIn(400);
// 80 – скорость облака
skrun();
}
skrun();
});
</script>

Наслаждаемся полетом!

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.