Создаем рекламный щит с эффектом вращения, на JQUERY и CSS

В этом уроке мы будем использовать несколько изображений, CSS и JQuery, чтобы создать эффект вращающегося рекламного щита с двумя объявлениями. Идея состоит в том, чтобы сделать один набор изображений исчезающий, а другой (другие объявления) появляется. Мы будем уменьшать ширину каждого исчезающего среза,  и увеличить ширину каждого появляющегося среза. Это даст эффект вращения, так же, как во вращающейся системе рекламного щита.

ПОСМОТРЕТЬ ДЕМО                           СКАЧАТЬ ИСХОДНИК

Итак, давайте начнем!

1. 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 пикселей с высоту изображения. Можно было бы думать, что это слишком много работы и что мы можем на самом деле взять одно целое изображение и создать дивы заставить действовать как фрагменты. Но тогда мы не смогли бы создать такой же эффект вращающегося среза (по крайней мере, мы не используем JavaScript, для этой витрины).

2. 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;

}

Чтобы разместить элемент в центре страницы, мы устанавливаем значение слева на 50%.

Контейнер для объявления будет иметь тот же стиль, как щит, за исключением фонового изображения. Мы делаем это, потому что мы должны позиционировать содержащие элементы в том же месте, как рекламный щит. Мы должны разместить нашу рекламу внутри рекламного щита. Таким образом, мы делаем такой трюк и создаем еще один элемент с тем же позиционированием:

.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. Мы также должны установить левое поле второго фрагмента до 18 пикселей, так как мы хотим создать вращающийся эффект. Я объясню подробнее об этом значение после того как мы определим CSS для фрагментов.

Фрагменты должны быть расположены следующим образом:

.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;}

По позиционированию элементов на еще один пиксель влево, чем они есть на самом деле в ширину, мы создаем маленький разрыв между ними. Теперь, левое поле имеет значение 18 пикселей, потому что это половина фрагмента, плюс ее разрыв. Мы установили это, для того, чтобы фрагменты появлялись (или исчезали) из (или) в центр, а не только со стороны. Если мы просто установим  ширину среза до 0 пикселей изображение не будут казаться вращающимся.

И это все, CSS. 

Давайте создадим вращающийся эффект с JQuery.

3. JAVASCRIPT

Теперь мы создадим функцию для поворота фрагмента. Функция заставит первые фрагменты объявления исчезнуть, сделав их ширину 0 пикселей. Для достижения вращающегося эффекта, мы добавим с левого края 18 пикселей.

В то время как первые фрагменты объявления исчезают мы указываем  другим появляться путем удаления левого края 18 пикселей (что мы изначально настроили в CSS) и это дает им ширину 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);

            });

        });

    }

});

Таким образом, функция поворота выполняет сокрытие текущего элемента (для чего она была и создана), а затем определяет, какой элемент  в настоящее время вращается, так что еще один вызов функции поворота может быть выполнен  на других фрагментах объявления. 

ПОСМОТРЕТЬ ДЕМО                                  СКАЧАТЬ ИСХОДНИК

Ссылка на источник