Все для CMS » Вебмастеру » Скрипты » All in One animation slider

All in One animation slider

  • 0
Данный материал предоставлен сайтом All4Cms.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно All in One animation slider.

All in One animation slider - анимационный слайдер для сайта с постепенным появлением элементов слайда.

Установка

1. Распаковываем архив в корень вашего сайта

2. Прописываем пути к css и js файлам на странице, где у вас будет размещен этот баннер.

Между

<head> и </head>

вставляем следующий код:

<link href="css/allinone_contentSlider.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/jаvascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/allinone_contentSlider.js" type="text/jаvascript"></script>
<script>        jQuery(function() {
            jQuery('#allinone_contentSlider_surprise').allinone_contentSlider({
                skin: 'surprise',    
            width: 960,    
            height: 384,    
            autoHideBottomNav:false,    
            showPreviewThumbs:false,    
            autoHideNavArrows:false    
        });    
                                    });    
</script>

В следующей строке:

<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>

- это идет подключение шрифтов, которые вы можете заменить на свои

3. Вставляем этот код, туда, где у вас будет находиться слайдер:

<div style="width:960px;margin: 0 auto; padding:10px 0 0 0;">
        <div id="allinone_contentSlider_surprise">
                <ul class="allinone_contentSlider_list">
                    <li data-text-id="#allinone_contentSlider_photoText1"></li>
                    <li data-text-id="#allinone_contentSlider_photoText2"></li>
                    <li data-text-id="#allinone_contentSlider_photoText3"></li>
                    <li data-text-id="#allinone_contentSlider_photoText6"></li>
                </ul>
                                                                    <!-- TEXTS -->
                  <div id="allinone_contentSlider_photoText1" class="allinone_contentSlider_texts">
                    <div class="allinone_contentSlider_text_line" data-initial-left="150" data-initial-top="10" data-final-left="30" data-final-top="10" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="img/surprise1.png" width="444" height="364" alt=""/></div>
                    <div class="allinone_contentSlider_text_line textElement11_surprise" data-initial-left="0" data-initial-top="25" data-final-left="380" data-final-top="25" data-duration="0.5" data-fade-start="0" data-delay="0.3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
                    <div class="allinone_contentSlider_text_line textElement12_surprise" data-initial-left="0" data-initial-top="50" data-final-left="378" data-final-top="50" data-duration="0.5" data-fade-start="0" data-delay="0.5">Et harum quidem <br />rerum facilis</div>
                    <div class="allinone_contentSlider_text_line textElement13_surprise" data-initial-left="420" data-initial-top="180" data-final-left="420" data-final-top="170" data-duration="0.5" data-fade-start="0" data-delay="0.5">Temporibus autem quibusdam et aut officiis debitis<br /> aut rerum necessitatibus saepe eveniet ut et voluptates</div>
                    <div class="allinone_contentSlider_text_line textElement13_surprise" data-initial-left="420" data-initial-top="230" data-final-left="420" data-final-top="220" data-duration="0.5" data-fade-start="0" data-delay="0.7">Itaque earum rerum hic tenetur a sapiente</div>
                <div  class="allinone_contentSlider_text_line" data-initial-left="200" data-initial-top="170" data-final-left="380" data-final-top="170" data-duration="0.5" data-fade-start="0" data-delay="0.9"><img src="img/listIcon.png" width="28" height="26" alt=""/></div>
                <div  class="allinone_contentSlider_text_line" data-initial-left="200" data-initial-top="220" data-final-left="380" data-final-top="220" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="img/listIcon.png" width="28" height="26" alt=""/></div>
                <div  class="allinone_contentSlider_text_line" data-initial-left="730" data-initial-top="90" data-final-left="710" data-final-top="90" data-duration="1.7" data-fade-start="0" data-delay="2.5"><img src="img/surprise2.png" width="209" height="335" alt=""/></div>
        </div>

                <div id="allinone_contentSlider_photoText2" class="allinone_contentSlider_texts">
                    <div class="allinone_contentSlider_text_line" data-initial-left="150" data-initial-top="35" data-final-left="270" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="1.1"><img src="img/surprise22.png" width="650" height="367" border="0" alt=""/></div>
                    <div class="allinone_contentSlider_text_line textElement22_surprise" data-initial-left="378" data-initial-top="75" data-final-left="50" data-final-top="75" data-duration="0.5" data-fade-start="0" data-delay="0.5">rerum facilis</div>
                     <div class="allinone_contentSlider_text_line textElement21_surprise" data-initial-left="380" data-initial-top="130" data-final-left="55" data-final-top="130" data-duration="0.5" data-fade-start="0" data-delay="0.3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
        </div>

        <div id="allinone_contentSlider_photoText3" class="allinone_contentSlider_texts">
                       <div  class="allinone_contentSlider_text_line textElement31r_surprise" data-initial-left="80" data-initial-top="10" data-final-left="80" data-final-top="10" data-duration="0.5" data-fade-start="0" data-delay="0"><a href="">Dominate the header!</a></div>
                    <div  class="allinone_contentSlider_text_line textElement32r_surprise" data-initial-left="77" data-initial-top="150" data-final-left="77" data-final-top="45" data-duration="0.5" data-fade-start="0.7" data-delay="1.1">Et harum quidem <br />rerum facilis</div>
                    <div  class="allinone_contentSlider_text_line" data-initial-left="580" data-initial-top="0" data-final-left="580" data-final-top="50" data-duration="0.5" data-fade-start="0" data-delay="0.0"><img src="img/gift2.png" width="300" height="357" alt=""/></div>
                    <div  class="allinone_contentSlider_text_line" data-initial-left="100" data-initial-top="85" data-final-left="100" data-final-top="85" data-duration="0.5" data-fade-start="0.5" data-delay="0.7"><img src="img/gift1.png" width="597" height="293" alt=""/></div>
                </div>

                <div id="allinone_contentSlider_photoText6" class="allinone_contentSlider_texts">
                    <div id="61" class="allinone_contentSlider_text_line" data-initial-left="280" data-initial-top="-30" data-final-left="280" data-final-top="0" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <img src="img/1galaxy_s2.png" width="373" height="384" alt="" />
                    </div>
                    
            <div id="62" class="allinone_contentSlider_text_line" data-initial-left="45" data-initial-top="50" data-final-left="45" data-final-top="7" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <img src="img/2galaxy_s21.png" width="196" height="376" alt="" />
                    </div>
                    
                    <div id="63" class="allinone_contentSlider_text_line" data-initial-left="710" data-initial-top="50" data-final-left="710" data-final-top="7" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <img src="img/3galaxy_aceplus.png" width="196" height="376" alt="" />
                    </div>
            
            <div id="611" class="allinone_contentSlider_text_line textElement61_surprise" data-initial-left="100" data-initial-top="135" data-final-left="540" data-final-top="135" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <a href="" target="_blank">Iphone 3GS</a>
                    </div>
                    
                    <div id="612" class="allinone_contentSlider_text_line textElement62_surprise" data-initial-left="300" data-initial-top="85" data-final-left="25" data-final-top="85" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <a href="" target="_blank">galaxy S</a>
                    </div>
                    
                    <div id="613" class="allinone_contentSlider_text_line textElement63_surprise" data-initial-left="480" data-initial-top="85" data-final-left="850" data-final-top="85" data-duration="0.5" data-fade-start="0" data-delay="0">
                        <a href="" target="_blank">Iphone 4S</a>
                    </div>

        </div>
    </div>
</div>

Слайдер готов! 

Управление и изменение слайдов:

data-initial-left - отвечает за позицию с какой координаты с левой стороны будет выезжать блок

data-initial-top - отвечает за позицию с какой координаты сверху будет выезжать блок

data-final-left - конечная позиция элемента в слайдере, относительно левого края

data-final-top - конечная позиция элемента в слайдере, относительно верха

data-duration - с какой скоростью будет появляться изображение или текст

data-fade-start - прозрачность при стартовой позиции элемента (значение указывается в процентах)

data-delay - через какое время элемент начнет появляться (в секундах)

Вот и все.


  • Скрипты / Полезные статьи
  • 18-01-2014, 22:22
  • 3 389
Вернуться назад
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.