|
Анимационный баннер или слайдер для сайта с постепенным появлением элементов слайда
|
| Airat |
Опубликовано 04.04.2014 10:15
|
Новичок
Сообщений: 3
Зарегистрирован: 04.04.2014 09:46
|
Очень понравился слайдер. Описано все вроде подробно, но попытка установить не увенчалась успехом . Может я что то делаю не так.
ССылка на сайт:http://bayguzin.ru/main/skriptyi/slajderyi/animaczionnyij-banner-ili-slajder-dlya-sajta-s-postepennyim-poyavleniem-izobrazhenij.html
Здравствуйте! Хочу представить вашему вниманию потрясающий анимационный баннер для сайта на CSS3. Его можно использовать как слайдер презентации продукта или услуг на главной странице сайта. Это не просто анимациооно перелистование слайдов: это пошаговое появление изображений и текста, которые есть в слайде. Именно поэтому я назвал это анимационным баннером. Мало того, что данный скрипт сложен в визуальзации, что придает дороговизну вашему сайту, но он еще и легок в установке на сайт. В нем один js-файл и один css-файл.
Сейчас я подробно распишу, как работает слайдер, а потом расскажу, как его поставить на сайт и что нужно знать, что бы поменять картинку или изменить динамику и сюжет каждого слайда. Во первых скажу, что я достаточно много провозился с этим слайдером, очищал его от кучи ненужного мусора (в виде картинов, css и js-файлов и лишнего кода). Во вторых скажу, что данный анимационный слайдер помог мне сделать презентацию на одном сайте, которая получилась достаточно неплохой и функциональной. Баннер представляет из себя четыре слайда, в котором есть некая инфомрация в виде текста и картинок. Каждая картинка и блок с текстом плавно выезжают сверху, снизу, справа или слева, и у каждого элемента задано свое время для появления. И так показаны четыре слайда с разной анимацией выезда информации.
Из навигации есть стрелочки, чтобы посмотреть следующий слайд или вернуться к предыдущему. Также есть буллиты, с помощью которых тоже можно управлять баннером, и индикатор времени смены слайдов в виде круга с движущейся красной полоской.
Установка анимационного баннера на сайт
1. Скачиваем архив с моего сайта, нажав кнопку "Скачать"
2. Распаковываем архив в корень вашего сайта
3. Прописываем пути к 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/javascript"></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/javascript"></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'>
можно бужет удалить, так как это идет подключение латинских шрифтов, а у вас в слайдере скорее всего будут русские шрифты
4. Вставляем этот код, туда, где у вас будет находиться слайдер:
Код <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>
Слайдер готов! Теперь поговорим о его управлении и изменении слайдов. Я просто скажу, что за что отвечает, а вы сами уже будете пробовать и эксперементировать. Не забываем, что все цифры в html коде представлены в виде пикселей, а элементы позиционируются относительно левого края и верха.
Изменил(а) Polarfox, 04.04.2014 10:36
|
|
 x1
|
| |
|
|
| ozzypro |
Опубликовано 04.04.2014 10:30
|
Пользователь
Сообщений: 65
Зарегистрирован: 11.02.2014 20:17
|
Нафиг нада 
учимся Adobe Photoshop CS на http://www.adobe-photoshop-masters.ru/ кому интересно  |
| |
|
|
| Polarfox |
Опубликовано 04.04.2014 10:36
|
Администратор
Разработчики
Группа поддержки
Сообщений: 3387
Зарегистрирован: 20.08.2010 14:03
|
Код в код
Всегда можно заюзать другой же.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
|
| |
|
|
| jikaka |
Опубликовано 04.04.2014 10:55
|
Супер Администратор
Разработчики
Сообщений: 4849
Зарегистрирован: 26.07.2010 12:10
|
классный баннер, на следующей неделе сделаю аддон из него
|
|
x1
|
| |
|
|
| Airat |
Опубликовано 04.04.2014 11:20
|
Новичок
Сообщений: 3
Зарегистрирован: 04.04.2014 09:46
|
Буду ждать результат. Т.к. я новичок в этом деле, хотелось бы пошаговую инструкцию к установке на сайт. Благодорю за понимание. |
| |
|
|
| jikaka |
Опубликовано 04.04.2014 11:55
|
Супер Администратор
Разработчики
Сообщений: 4849
Зарегистрирован: 26.07.2010 12:10
|
будет простая панель, которую надо будет включить в админке
|
|
x1
|
| |
|
|
| Airat |
Опубликовано 04.04.2014 12:02
|
Новичок
Сообщений: 3
Зарегистрирован: 04.04.2014 09:46
|
Как раз я к этому и стремился. |
| |
|
|
| Alex_OOPS |
Опубликовано 25.09.2015 08:58
|
Начинающий
Сообщений: 43
Зарегистрирован: 22.09.2015 18:20
|
jikaka написал:
будет простая панель, которую надо будет включить в админке
Получилось что-нибудь?Если да, то где можно посмотреть и скачать? |
| |
|
|
| jikaka |
Опубликовано 25.09.2015 09:55
|
Супер Администратор
Разработчики
Сообщений: 4849
Зарегистрирован: 26.07.2010 12:10
|
как аддон руки не дошли сделать, а так использую данный слайдер
|
| |
|
