Часто возникает задача: «на коленке» сделать анимированный баннер используя лишь несколько изображений с эффектами перехода. Да, есть Adobe Flash, есть GIF анимация, но бывают случаи, когда маркетолог скинул тебе пару скудных jpg макетов, и попросил - «что-нибудь с ними сделать».
Софт-программисты ищут, в таких случаях, нужный jquery плагин. Благо, их обилие позволяет легко найти подходящий. Но это не всегда оправданно, так как сама jQuery имеет отличные средства анимации и эффектов. И код для этого, будет не более 20-ти строк, в зависимости от того, какое количество эффектов Вам потребуется.
В этой статье я опишу, как сделать небольшой анимированный баннер на jquery, без использования сторонних плагинов.
В результате мы получим такой баннер:
Создадим заготовку для нашего баннера. У меня есть 4 изображения одного размера в формате png, переход между ними будет порядка 4 секунд. Меньше делать не стоит, тогда баннер начинает раздражать.
<style>
.slider{
height:170px;
width:600px;
overflow:hidden;
position:relative;
margin:10px auto;
display:block;
}
.slider>div{
height:170px;
width:600px;
left:0px;
position:absolute;
background-size:100% 100%;
background:url(/img/sms_order/slide/1.png) no-repeat #ffef92;
z-index:0;
}
.slide2{background-image:url(/img/sms_order/slide/2.png);}
.slide3{background-image:url(/img/sms_order/slide/3.png);}
.slide4{background-image:url(/img/sms_order/slide/4.png);}
</style>
<script>
$(function(){
//здесь будет наша анимация
});
</script>
<a class="slider" href="#">
<div class="slide1"></div>
<div class="slide2"></div>
<div class="slide3"></div>
<div class="slide4"></div>
</a>
Четыре div блока с абсолютным позиционирование, у каждого из которых в качестве фона указано соответствующее изображение. Для анимации движения будем менять left или top свойство. Чтобы достичь эффекта вырастания, мы указали background-size:100% 100%; и просто будем менять размер блока.
Теперь нужно все это оживить.
Для начала нам потребуется функция генерации случайных целочисленных значений. Можно обойтись без этого, и задать строгий порядок смены эффектов, я расскажу и об этом, но мне нравится, когда баннер выглядит каждый раз по другому. Дефолтный js генератор случайных чисел Math.random() может генерировать лишь значения с 0.0 до 1.0. Улучшим его.
var _rand = function(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
};
Саму анимацию будем запускать на setTimeout, это будет промежуток между анимациями. Для начала сделаем два эффекта перехода: выезды.
var slide = 1, // текущий слайд
oldslide=4;// предыдущий
var slider = function(){
setTimeout(function(){
var callback = arguments.callee;
// устанавливаем значения всех слайдов на дефолтные
$('.slider div').css({zIndex:0,width:'600px',height:'170px',top:'0px',left:'0px'});
// предыдущий слайд должен быть выше чем остальные, но ниже чем текущий
$('.slide'+oldslide).css({zIndex:1})
switch( _rand(1,2) ){
case 1:
// ставим слайд в в правый край, и двигаем с права на лево,
// при это предыдущий слайд двигаем в ту же сторону, но его положение изначально внутри слайдера
// т.е. он как бы уходит
$('.slide'+slide).css({left:'600px',top:'0px',zIndex:2}).animate({left:'0px'},2000,slider);// в конце запускаем следующий кадр
$('.slide'+oldslide).css({left:'0px',top:'0px'}).animate({left:'-600px'},2000);
break;
case 2:
// все тоже самое что и выше, но с движением по вертикали
$('.slide'+slide).css({top:'-170px',zIndex:2,left:'0px'}).animate({top:'0px'},2000,slider);
$('.slide'+oldslide).css({top:'0px',left:'0px'}).animate({top:'170px'},2000);
break;
}
oldslide=slide++;
if( slide>4 )
slide=1; // если дошли до конца слайдшоу, то возвращаемся в начало
},2000+_rand(1,3)*1000);
};
slider();// запускаем первый кадр
все просто, двигаем div блок, меняя его left или top позицию.
Добавим эффект затемнения, один слайд исчезает, второй появляется. Меняем opacity нужного слайда с 0.0 до 1.0
case 3:
$('.slide'+slide).css({top:'0px',zIndex:2,left:'0px',opacity:0.0}).animate({opacity:1.0},2000,slider);
break;
Эффект роста, упомянутый выше. Слайд словно вырастает из маленькой картинки.
case 4:
$('.slide'+slide).css({top:_rand(1,170)+'px',zIndex:2,left:_rand(1,600)+'px',width:'1px',height:'1px'})
.animate({top:'0px',left:'0px',width:'600px',height:'170px'},2000,slider);
break;
Помещаем слайд в любом месте слайдера, а размеры задаем в 1px, как по высоте так и по ширине. Анимируем двигая слайд к началу слайдера, попутно изменяя размер до дефолтного.
Эффект "гармошки". Предыдущий слайд меняет размер по ширине от 100% до 0, а текущий от 0 до 100%.
case 5:
$('.slide'+slide).css({zIndex:2,left:'0px',width:'1px'}).animate({width:'600px'},2000,slider);
$('.slide'+oldslide).css({left:'0px',width:'600px'}).animate({left:'600px',width:'1px'},2000);
break;
Не забываем менять switch( _rand(1,2) ) на switch( _rand(1,5) ) в зависимости от того, какое количество эффектов вы создали.
Если Вам захотелось создать строгую последовательность смены кадров, то стоит ввести новую переменную effect_number=1;, а switch( _rand(1,2) ) заменить на switch(effect_number++)
Вот и все, баннер готов. Совет: не ищите плагины на любой чих, учитесь писать их сами, любые самые сложные системы написаны такими же, как Вы программистами, которые пошли дальше, улучшили, нашли нишу. Не бойтесь написать свой велосипед. Желаю удачи.
Комментарии