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

Автор темы: Airat
ID темы: 2143
Информация:
Тема содержит 9 сообщения, была просмотрена 12858 раз.
Просмотр темы
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 перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 
jikaka
классный баннер, на следующей неделе сделаю аддон из него
x1
 
Web
Airat
Буду ждать результат. Т.к. я новичок в этом деле, хотелось бы пошаговую инструкцию к установке на сайт. Благодорю за понимание.
 
jikaka
будет простая панель, которую надо будет включить в админке
x1
 
Web
Airat
Как раз я к этому и стремился.
 
Alex_OOPS
jikaka написал:

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


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

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

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
SharkBoss - партнёрская программа для монетизации ЛЮБЫХ видов трафика (включая спам).  →  Реклама на портале 0 / 537 28.03.2024 07:49
Proxy5 - Отличные IPv4 прокси для любых задач (Бесплатный тест)  →  Платные услуги 0 / 1487 31.10.2023 09:47
Где взять список районов по областям для разных стран?  →  Пожелания и предложения 0 / 1538 10.08.2023 12:44
От какой CMS лучше переделывать плагины сервисов оплаты, доставки, 1С для PHP-Fusion-7?  →  Пожелания и предложения 2 / 1592 08.08.2023 08:59
Отзовик - самопис или на WP  →  Платные услуги 2 / 689 08.08.2023 08:12
Посоветуйте плагины для назначения прав админов и групп пользователей  →  Пожелания и предложения 0 / 3154 06.06.2022 11:52
Бот для поиска чужих файлов на Dropmefiles.com  →  Реклама на портале 1 / 943 11.03.2022 05:28
Потерял пароль от сайта  →  Разное 6 / 2112 22.01.2022 14:54
Zinsta - Программа для раскрутки и продвижения instagram  →  Флуд 12 / 6951 15.01.2022 10:47
Версия для слабовидящих Button visually impaired  →  Javascript, ajax, jquery 1 / 1848 04.01.2022 10:44
Топ 5 пользователей форума
Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)   SchreiBear SchreiBear (625)