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

Автор темы: Airat
ID темы: 2143
Информация:
Тема содержит 9 сообщения, была просмотрена 11835 раз.
Просмотр темы
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:

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
Покопаться в чужом коде для парсинга. Wordpress.  →  Платные услуги 1 / 356 04.09.2019 13:50
Zinsta - Программа для раскрутки и продвижения instagram  →  Флуд 10 / 1912 27.08.2019 15:19
разные языки для юзеров  →  Локализация 17 / 2714 06.08.2019 06:44
Возможности CMS, необходимые для SEO продвижения (видео)  →  Пожелания и предложения 0 / 472 01.06.2019 22:35
PHP-Fusion 7 Bogatyr - бесплатная мультиязычная CMS для блога, форума, фотогалереи  →  Моды 20 / 14065 01.06.2019 18:19
Создание сайта на семерке  →  Платные услуги 1 / 332 22.05.2019 14:10
Мобильная версия сайта  →  Моды 4 / 429 08.03.2019 12:14
Поиск новых и популярных страниц для пользователя  →  Пожелания и предложения 5 / 387 21.02.2019 23:32
Как определить необходимые мощности хостинга для группы сайтов с определённой посещалкой?  →  Хостинг 0 / 756 20.02.2019 20:46
Денежный комплект шаблонов для емейл-рассылок  →  Флуд 0 / 404 07.02.2019 19:18
Топ 5 пользователей форума
Alex Alex (1,211)   Zaxap Zaxap (1,089)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)