fantom
All in One animation slider
Данный материал предоставлен сайтом All4Cms.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно All in One animation slider.
Скачать бесплатно 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 - через какое время элемент начнет появляться (в секундах)
Вот и все.
Скачать All in One animation slider
- Скрипты / Полезные статьи
- 18-01-2014, 22:22
- 3 451
