RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Kenburner слайдер на jquery v1.1

KENBURNER слайдер
Просмотров: 4020  Скачан: 396 раз  Комментариев в теме: 0

Kenburner - это jquery плагин с помощью которого можно реализовать на сайте отличный слайдер. Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов. В данном слайдере есть возможность воспроизводить видео с таких источников как YouTube и Vimeo, задавать подписи и неограниченное число слайдов.

Jquery слайдер представлен в различных версиях (смотрите DEMO), так же слайдер отлично адаптирован к сенсорным устройствам, таких как смартфоны, планшеты и т.д.

Шаг 1 - создание разметки

 

HTML

<div class="demoholder">
    <div id="banner-example-1" class="dark">				
        <ul>								
            <li data-transition="fade" data-startalign="right,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,top" data-panduration="12" data-colortransition="4"><img alt="" src="images/slides/image1.jpg" data-bw="images/slides/image1_blur.jpg" data-thumb="images/thumbs/thumb1.jpg" data-thumb_bw="images/thumbs/thumb1_blur.jpg">
                <div  class="creative_layer">
                    <div class="caption_orange wipeleft" style="top:130px;left:50px;"><i>KENBURNER </i></div>	
                    <div class="caption_transparent wipedown" style="top:180px;left:50px;">The Ultimate Ken Burns Slider</div>
                    <div class="caption_white minicap wipeup" style="top:230px;left:260px"><i>Presented by</i> <a href="#"><b>ThemePunch</b></a></div>										
                </div>		
            </li>
            <li data-transition="slide" data-startalign="center,top" data-zoom="out" data-zoomfact="1.6" data-endAlign="left,bottom" data-panduration="15" data-colortransition="4"><img alt="" src="images/slides/image2.jpg" data-bw="images/slides/image2_blur.jpg" data-thumb="images/thumbs/thumb2.jpg" data-thumb_bw="images/thumbs/thumb2_blur.jpg">													
                <div class="video_container">
                    <div class="video_kenburn_wrap">	
                        <iframe class="video_clip" src="http://player.vimeo.com/video/27243869?title=0&byline=0&portrait=0" width="569" height="320" ></iframe>
                        <h2>Vimeo Video</h2>
                        <p>Themepunch creates beautiful and elegant templates, themes and components that suit your clients needs.</p>
                        <p><strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.</p>
                        <a class="buttonlight" href="#">Visit Website</a>
                        <div class="close"></div>
                    </div>
                </div>	
                <div  class="creative_layer">
                    <div class="caption_blue wipeleft" style="top:120px;left:470px;">Vimeo Video</div>					
                    <div class="caption_black wiperight" style="top:120px;left:626px;">Support</div>
                    <div class="caption_transparent minicap wipeup" style="top:170px;left:626px;">Click the play button</div>									
                </div>
            </li>
            <li data-transition="slide" data-startalign="left,bottom" data-zoom="in" data-zoomfact="3" data-endAlign="center,center" data-panduration="8" data-colortransition="4"><img alt="" src="images/slides/image3.jpg" data-bw="images/slides/image3_blur.jpg" data-thumb="images/thumbs/thumb3.jpg" data-thumb_bw="images/thumbs/thumb3_blur.jpg">
                <div  class="creative_layer">
                    <div class="caption_transparent wipedown" style="top:80px;left:50px;">Some of KenBurner's Options:</div>
                    <div class="caption_black smallcap wipeleft" style="top:130px;left:50px">Image And Thumbs Fully Resizable</div>	
                    <div class="caption_black smallcap wipeleft" style="top:164px;left:50px">Customizable Ken Burns Effect</div>
                    <div class="caption_black smallcap wipeleft" style="top:198px;left:50px">Freely Positionable and Stylable Captions</div>
                    <div class="caption_black smallcap wipeleft" style="top:232px;left:50px">High Browser Compatibility!</div>	
                </div>
            </li>					
            <li data-transition="fade" data-startalign="right,center" data-zoom="out" data-zoomfact="1.6" data-endAlign="left,center" data-panduration="11" data-colortransition="4"><img alt="" src="images/slides/image4.jpg" data-bw="images/slides/image4_blur.jpg" data-thumb="images/thumbs/thumb4.jpg" data-thumb_bw="images/thumbs/thumb4_blur.jpg">
                <div  class="creative_layer">
                    <div class="caption_orange wipeup" style="top:210px;left:100px;">Captions can be positioned freely</div>	
                    <div class="caption_transparent wipedown" style="top:210px;left:473px;"><a href="#">Example URL-link</a></div>											
                </div>
            </li>
            <li data-transition="fade" data-startalign="center,top" data-zoom="in" data-zoomfact="1.6" data-endAlign="center,bottom" data-panduration="12" data-colortransition="4"><img alt="" src="images/slides/image5.jpg" data-bw="images/slides/image5_blur.jpg" data-thumb="images/thumbs/thumb5.jpg" data-thumb_bw="images/thumbs/thumb5_blur.jpg">
                <div class="video_container">
                    <div class="video_kenburn_wrap">	
                        <iframe class="video_clip" src="http://www.youtube.com/embed/-BrDlrytgm8?hd=1&wmode=opaque&autohide=1&showinfo=0" height="320" width="569" ></iframe>
                        <h2>Youtube Video</h2>
                        <p>Themepunch creates beautiful and elegant templates, themes and components that suit your clients needs.</p>
                        <p><strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.</p>
                        <a class="buttonlight" href="#">More Info</a>
                        <div class="close"></div>
                    </div>
                </div>	
                <div  class="creative_layer">
                    <div class="caption_red wipeleft" style="top:140px;left:30px;"><a href="#">Youtube Video</a></div>					
                    <div class="caption_white wiperight" style="top:140px;left:205px;">Support</div>								
                </div>
            </li>
            <li data-transition="slide" data-startalign="center,center" data-zoom="in" data-zoomfact="2" data-endAlign="center,center" data-panduration="15" data-colortransition="4"><img alt="" src="images/slides/image6.jpg" data-bw="images/slides/image6_blur.jpg" data-thumb="images/thumbs/thumb6.jpg" data-thumb_bw="images/thumbs/thumb6_blur.jpg">
                <div  class="creative_layer">		
                    <div class="caption_black nobg largecap wipeleft" style="top:10px;left:400px;">Text with no background</div>		
                </div>
            </li>	
            <li data-transition="slide" data-startalign="left,bottom" data-zoom="in" data-zoomfact="2" data-endAlign="center,center" data-panduration="15" data-colortransition="4"><img alt="" src="images/slides/image7.jpg" data-bw="images/slides/image7_blur.jpg" data-thumb="images/thumbs/thumb7.jpg" data-thumb_bw="images/thumbs/thumb7_blur.jpg">
                <div  class="creative_layer"></div>
            </li>		
            <li data-transition="slide" data-startalign="right,top" data-zoom="out" data-zoomfact="1" data-endAlign="center,center" data-panduration="15" data-colortransition="4"><img alt="" src="images/slides/image8.jpg" data-bw="images/slides/image8_blur.jpg" data-thumb="images/thumbs/thumb8.jpg" data-thumb_bw="images/thumbs/thumb8_blur.jpg">
                <div  class="creative_layer">		
                    <div class="caption_orange wipeleft" style="top:130px;left:50px;"><i>KENBURNER </i></div>	
                    <div class="caption_transparent wipedown" style="top:180px;left:50px;">Get It Now!</div>				
                </div>
            </li>					
        </ul>
    </div>
    <div class="selector">
        <div class="thumbbutton right tnone"><div class="grain">Отключить</div></div>
        <div class="seperator"></div>
        <div class="thumbbutton middle tbull"><div class="grain">Кнопки</div></div>
        <div class="seperator"></div>
        <div class="thumbbutton selected tthumb"><div class="grain">Иконки</div></div>
        <div class="seltext">Навигация</div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery_1.7.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.kenburn.min.js"></script>	
<script type="text/javascript">
$(document).ready(function() {
    $.noConflict();					 									
    jQuery('#banner-example-1').kenburn({										
        width:800,
        height:320,
        thumbWidth:120,
        thumbHeight:70,
        thumbAmount:6,							
        thumbSpaces:0,
        thumbPadding:9,
        thumbStyle:"both",
        bulletXOffset:0,
        bulletYOffset:-80,
        repairChromeBug:"on",
        shadow:'true',
        timerShow:"on",
        touchenabled:'on',
        pauseOnRollOverThumbs:'off',
        pauseOnRollOverMain:'on',
        preloadedSlides:10,							
        timer:10,
        googleFonts:'PT+Sans+Narrow:400,700',
        googleFontJS:'js/jquery.googlefonts.js'
    });
    jQuery('.tnone').click(function() {
        jQuery('.tbull').removeClass('selected');
        jQuery('.tthumb').removeClass('selected');
        jQuery('.tnone').addClass('selected');
        jQuery('.kenburn_thumb_container').css({'visibility':'hidden'});
        jQuery('.thumbbuttons').css({'visibility':'hidden'});
        jQuery('.bannershadow').cssAnimate({'margin-top':"100px"});
    });
    jQuery('.tthumb').click(function() {
        jQuery('.tbull').removeClass('selected');
        jQuery('.tthumb').addClass('selected');
        jQuery('.tnone').removeClass('selected');
        jQuery('.kenburn_thumb_container').css({'visibility':'visible'});
        jQuery('.thumbbuttons').css({'visibility':'hidden'});
        jQuery('.bannershadow').cssAnimate({'margin-top':"150px"});
    });
    jQuery('.tbull').click(function() {
        jQuery('.tbull').addClass('selected');
        jQuery('.tthumb').removeClass('selected');
        jQuery('.tnone').removeClass('selected');
        jQuery('.kenburn_thumb_container').css({'visibility':'hidden'});
        jQuery('.thumbbuttons').css({'visibility':'visible'});
        jQuery('.thumbbuttons').show(0);
        jQuery('.bannershadow').cssAnimate({'margin-top':"100px"});
    });
    jQuery('.tbull').click();
    jQuery('.thumbbuttons').hide(0);
});
</script>
Материалы по теме:

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css...

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carou...

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Аккордеон изображенийАккордеон изображений с помощью css...

Красивый горизонтальный аккордеон для вывода изображений на сайте....

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...
Интересные публикации:

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Функциональный слайдер «bxSlider»Функциональный слайдер «bxSlider»

Отличным слайдер с очень богатым функционалом, а если быть точнее, то это широко известный плагин «bxSlider», плагин постоянно усовершенствуется......

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

Картинки расположены в ряд по сетке с наложенным на них затемнением, при наведении курсора на картинку, затемнение......

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками
  • Текущий 2.44/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 2.4/5( Голосов 16 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить