HTML
У нас будет много частей одного большого изображения - по 22 части для каждой рекламы:
Код:
<div class="container">
<div class="ad">
<div id="ad_1" class="ad_1">
<img class="slice_1" src="ads/ad1_slice01.jpg"/>
<img class="slice_2" src="ads/ad1_slice02.jpg"/>
<img class="slice_3" src="ads/ad1_slice03.jpg"/>
<img class="slice_4" src="ads/ad1_slice04.jpg"/>
<img class="slice_5" src="ads/ad1_slice05.jpg"/>
<img class="slice_6" src="ads/ad1_slice06.jpg"/>
<img class="slice_7" src="ads/ad1_slice07.jpg"/>
<img class="slice_8" src="ads/ad1_slice08.jpg"/>
<img class="slice_9" src="ads/ad1_slice09.jpg"/>
<img class="slice_10" src="ads/ad1_slice10.jpg"/>
<img class="slice_11" src="ads/ad1_slice11.jpg"/>
<img class="slice_12" src="ads/ad1_slice12.jpg"/>
<img class="slice_13" src="ads/ad1_slice13.jpg"/>
<img class="slice_14" src="ads/ad1_slice14.jpg"/>
<img class="slice_15" src="ads/ad1_slice15.jpg"/>
<img class="slice_16" src="ads/ad1_slice16.jpg"/>
<img class="slice_17" src="ads/ad1_slice17.jpg"/>
<img class="slice_18" src="ads/ad1_slice18.jpg"/>
<img class="slice_19" src="ads/ad1_slice19.jpg"/>
<img class="slice_20" src="ads/ad1_slice20.jpg"/>
<img class="slice_21" src="ads/ad1_slice21.jpg"/>
<img class="slice_22" src="ads/ad1_slice22.jpg"/>
</div>
<div id="ad_2" class="ad_2">
<img class="slice_1" src="ads/ad2_slice01.jpg"/>
<img class="slice_2" src="ads/ad2_slice02.jpg"/>
<img class="slice_3" src="ads/ad2_slice03.jpg"/>
<img class="slice_4" src="ads/ad2_slice04.jpg"/>
<img class="slice_5" src="ads/ad2_slice05.jpg"/>
<img class="slice_6" src="ads/ad2_slice06.jpg"/>
<img class="slice_7" src="ads/ad2_slice07.jpg"/>
<img class="slice_8" src="ads/ad2_slice08.jpg"/>
<img class="slice_9" src="ads/ad2_slice09.jpg"/>
<img class="slice_10" src="ads/ad2_slice10.jpg"/>
<img class="slice_11" src="ads/ad2_slice11.jpg"/>
<img class="slice_12" src="ads/ad2_slice12.jpg"/>
<img class="slice_13" src="ads/ad2_slice13.jpg"/>
<img class="slice_14" src="ads/ad2_slice14.jpg"/>
<img class="slice_15" src="ads/ad2_slice15.jpg"/>
<img class="slice_16" src="ads/ad2_slice16.jpg"/>
<img class="slice_17" src="ads/ad2_slice17.jpg"/>
<img class="slice_18" src="ads/ad2_slice18.jpg"/>
<img class="slice_19" src="ads/ad2_slice19.jpg"/>
<img class="slice_20" src="ads/ad2_slice20.jpg"/>
<img class="slice_21" src="ads/ad2_slice21.jpg"/>
<img class="slice_22" src="ads/ad2_slice22.jpg"/>
</div>
</div>
</div>
<div class="billboard"></div>
Из этих изображений (22 кусочка по 35 пикселей каждый) у нас получится одно 770 пикселей на 340.
CSS
Стили для бигборда:
Код:
.billboard{
position:absolute;
bottom:0px;
left:50%;
margin-left:-447px;
width:916px;
height:599px;
background:transparent url(../images/billboard.png) no-repeat 0px 0px;
}
Для позиционирования элемента в центре страницы, мы задаем значение left на 50% и left margin на негативное значение половины ширины элемента.
Контейнер для реклам будет иметь такие же стили, как и бигборд, кроме фонового изображения. Мы делаем это для того, чтобы позиционировать элементы рекламы в том же месте, где и бигборд. Мы не хотим размещать наши рекламы внутри бигборда, так как нам необходимо, чтобы бигборд был над ними. Поэтому мы используем этот трюк создавая элемент со схожим позиционированием.
Код:
.container{
position:absolute;
bottom:0px;
left:50%;
margin-left:-447px;
width:916px;
height:599px;
}
.ad{
width:800px;
height:336px;
position:relative;
margin:35px 0px 0px 60px;
background-color:#333;
}
.ad_1 img{
width:35px;
height:336px;
position:absolute;
}
.ad_2 img{
width:0px;
height:336px;
margin-left:18px;
position:absolute;
}
Кусочки рекламы имеют ширину 35 пикселей. Кусочки второй рекламы также, но нам необходимо задать им ширину 0. Нам также необходимо задать left margin вторых кусочков на 18 пикселей, поскольку хотим создать вращающийся эффект. Об этом подробнее немного ниже по тексту.
Единичные кусочки необходимо правильно позиционировать:
Код:
.slice_1{left:0px;}
.slice_2{left:36px;}
.slice_3{left:72px;}
.slice_4{left:108px;}
.slice_5{left:144px;}
.slice_6{left:180px;}
.slice_7{left:216px;}
.slice_8{left:252px;}
.slice_9{left:288px;}
.slice_10{left:324px;}
.slice_11{left:360px;}
.slice_12{left:396px;}
.slice_13{left:432px;}
.slice_14{left:468px;}
.slice_15{left:504px;}
.slice_16{left:540px;}
.slice_17{left:576px;}
.slice_18{left:612px;}
.slice_19{left:648px;}
.slice_20{left:684px;}
.slice_21{left:720px;}
.slice_22{left:756px;}
Позиционируя элементы на один пиксель левее их собственного размера, мы создаем небольшой просвет между ними. Теперь значение left margin 18 пикселей (половина кусочка + расстояние). Мы устанавливаем это, так как хотим наши кусочки появляться (или исчезать) из (или в) их центра. Если мы просто зададим ширину кусочка на 0, тогда не будет эффекта вращения.
JavaScript
Теперь мы создадим простую функцию. Она будет заставлять первые кусочки исчезнуть (менять ширину на 0). Для эффекта вращения добавляем значение left margin = 18 пикселей.
По мере исчезновения первых кусочков, мы показываем вторые убирая left margin = 18 пикселей и придавая им ширину 35 пикселей. Мы вызываем нашу функцию таким образом:
Код:
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,3000,i);
});
Весь скрипт выглядит так:
Код:
$(function() {
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
var other;
if(elem1.parent().attr('id') == 'ad_1')
other = $('#ad_2').children('img').eq(i);
else
other = $('#ad_1').children('img').eq(i);
other.animate({'marginLeft':'0px','width':'35px'},
speed,function(){
var f = function() { rotate(other,speed,timeout,i) };
setTimeout(f,timeout);
});
});
}
});
Заменив значения в строке со словом rotate (500 и 3000) можно изменить скорость анимации и задержку.
Вот и все готово! :)
Смотреть Demo
Скачать исходник.