Забыли пароль?
Запросите новый здесь.

Автор темы: Airat
ID темы: 2143
Информация:
Тема содержит 9 сообщения, была просмотрена 12045 раз.
Просмотр темы
PHP-Fusion Russia » Поддержка 7 версии » Вопросы новичков
 Распечатать тему
Анимационный баннер или слайдер для сайта с постепенным появлением элементов слайда
Airat
Очень понравился слайдер. Описано все вроде подробно, но попытка установить не увенчалась успехом . Может я что то делаю не так.
ССылка на сайт: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
Нафиг нада ag
учимся Adobe Photoshop CS на http://www.adobe-photoshop-masters.ru/ кому интересноad
 
Web
Polarfox
Код в код

Всегда можно заюзать другой же.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме

PolarLab - вход для подопытных
 
Web
jikaka
классный баннер, на следующей неделе сделаю аддон из него
x1
 
Web
Airat
Буду ждать результат. Т.к. я новичок в этом деле, хотелось бы пошаговую инструкцию к установке на сайт. Благодорю за понимание.
 
jikaka
будет простая панель, которую надо будет включить в админке
x1
 
Web
Airat
Как раз я к этому и стремился.
 
Alex_OOPS
jikaka написал:

будет простая панель, которую надо будет включить в админке


Получилось что-нибудь?Если да, то где можно посмотреть и скачать?
 
jikaka
как аддон руки не дошли сделать, а так использую данный слайдер
 
Web

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
Как вебмастеру сформулировали УТП для создания сайтов на PHP-Fusion?  →  Пожелания и предложения 1 / 690 25.07.2020 03:46
какие функции надо переписать для PHP 7?  →  Пожелания и предложения 15 / 7536 12.07.2020 07:19
PHP-Fusion 7 Bogatyr - бесплатная мультиязычная CMS для блога, форума, фотогалереи  →  Моды 20 / 16458 17.03.2020 19:59
У нас есть простейшая форма заказа дл сайта?  →  Пожелания и предложения 3 / 958 16.03.2020 12:35
Какой плагин PHP-Fusion уместно использовать для создания сайта КВИЗа?  →  Пожелания и предложения 1 / 732 18.02.2020 15:14
InstaSpider - инстаграм программа шпион для мониторинга новых подписчиков пользователей  →  Флуд 0 / 468 12.02.2020 18:34
Восстановление сайта  →  Книга жалоб и предложений 130 / 60516 24.01.2020 06:23
Дизайн сайта  →  Книга жалоб и предложений 59 / 16674 24.01.2020 06:12
Каким ява скриптом приделать выбор цвета для поля input type="text"?  →  Вопросы новичков 1 / 647 10.01.2020 20:47
Панель "последние статьи" в зависимости от языка сайта и категории статьи  →  Моды 9 / 823 31.10.2019 22:59
Топ 5 пользователей форума
Alex Alex (1,219)   Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)