Создаем слайдшоу с помощью jmpress.js

Возможно Вы уже видели impress.js, действительно отличную JavaScript-библиотеку для создания 3D-презентаций. jQuery плагин jmpress.js позволит Вам использовать эту библиотеку вместе с jQuery, с некоторыми дополнительными опциями. Мы хотим показать вам сегодня, как использовать этот замечательный плагин для создания слайд-шоу с 3D-эффектами.

Значки, используемые в демо от Artcore Illustration, и используются они по Creative Commons BY-NC-ND 3.0 license.

Итак, давайте начнем!

HTML-разметка

У нас будет один главный контейнер с классом jms-slideshow. Внутри, у нас будет несколько подразделов с классом step. Это будут наши слайды. Каждый шаг или слайд получит класс data-color, он нужен за определения цвета фона и некоторых атрибутов данных от jmpress.js. Вы можете найти все (встроенные) опции здесь: jmpress.js Documentation – Options. Мы будем использовать некоторые атрибуты для того, чтобы определить позицию и вращение слайдов в 3D-пространстве:

<section id="jms-slideshow" class="jms-slideshow">
 
 <div class="step" data-color="color-1">
 <div class="jms-content">
 <h3>Some headline</h3>
 <p>Some text</p>
 <a class="jms-link" href="#">Read more</a>
 </div>
 <img src="images/1.png" />
 </div>
 
 <div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
 <!-- ... -->
 </div>
 
 <!-- ... -->
 
</section>

Теперь займемся стилями.

CSS

Мы зададим ширину основного контейнера в процентах, при этом определим минимальные и максимальные значения:

 .jms-slideshow {
 position: relative;
 width: 80%;
 max-width: 1400px;
 min-width: 640px;
 margin: 20px auto;
 height: 460px;
}

Следующий блок-обертка будет добавлен динамически, и это будет видимая оболочка слайд-шоу:

 .jms-wrapper {
 width: auto;
 min-width: 600px;
 height: 440px;
 background-color: #fff;
 box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
 -webkit-background-clip: padding;
 -moz-background-clip: padding;
 background-clip: padding-box;
 border: 10px solid #fff;
 border: 10px solid rgba(255, 255, 255, 0.9);
 outline: none;
 transition: background-color 1s linear;
}

Классы для фона будут применяться к предыдущему блоку-обертке. Класс определяется в атрибуте данных data-color на каждом шаге. Это дает нам возможность добавить цвет фона для каждого слайда и изменить его при переходе.

 .color-1 {
 background-color: #E3D8FF;
 background-color: rgba(227, 216, 268, 1);
}
.color-2 {
 background-color: #EBBBBC;
 background-color: rgba(235, 187, 188, 1);
}
.color-3 {
 background-color: #EED9C0;
 background-color: rgba(238, 217, 192, 1);
}
.color-4 {
 background-color: #DFEBB1;
 background-color: rgba(223, 235, 177, 1);
}
.color-5{
 background-color: #C1E6E5;
 background-color: rgba(193, 230, 229, 1);
}

Шаги или слайды будут иметь следующие стили:

 .step {
 width: 900px;
 height: 420px;
 display: block;
 transition: opacity 1s;
}
.step:not(.active) {
 opacity: 0;
}

Неактивные шаги будут иметь прозрачность равную 0. Когда слайды перемещаются, прозрачность будет установлена равной 1.

Внутренние части слайда будут иметь следующие стили:

 .jms-content{
 margin: 0px 370px 0px 20px;
 position: relative;
 clear: both;
}
.step h3{
 color: #fff;
 font-size: 52px;
 font-weight: bold;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 margin: 0;
 padding: 60px 0 10px 0;
}
.step p {
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 font-size: 34px;
 font-weight: normal;
 position: relative;
 margin: 0;
}

Ссылка  "Читать далее" будет иметь небольшую анимацию: как только шаг становится активным, она будет двигаться вверх и появляться:

 a.jms-link{
 color: #fff;
 text-transform: uppercase;
 background: linear-gradient(top, #969696 0%,#727272 100%);
 padding: 8px 15px;
 display: inline-block;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 border: 1px solid #444;
 border-radius: 4px;
 opacity: 1;
 margin-top: 40px;
 clear: both;
 transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
 opacity: 0;
 margin-top: 80px;
}

Изображение будет позиционироваться абсолютно на правой стороне каждого слайда:

 .step img{
 position: absolute;
 right: 0px;
 top: 30px;
}

Навигация в виде точек будет располагаться в нижней части:

 .jms-dots{
 width: 100%;
 position: absolute;
 text-align: center;
 left: 0px;
 bottom: 20px;
 z-index: 2000;
 user-select: none;
}

Тег span будет в виде темной маленькой точки:

 .jms-dots span{
 display: inline-block;
 position: relative;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: #777;
 margin: 3px;
 cursor: pointer;
 box-shadow:
 1px 1px 1px rgba(0,0,0,0.1) inset,
 1px 1px 1px rgba(255,255,255,0.3);
}

С помощью псевдо-класса :after, активный пункт навигации будет выглядеть как маленькая белая точка:

 .jms-dots span.jms-dots-current:after{
 content: '';
 width: 8px;
 height: 8px;
 position: absolute;
 top: 2px;
 left: 2px;
 border-radius: 50%;
 background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}

Стрелки навигации будут расположены на левой и на правой стороне слайд-шоу. Мы будем использовать фоновые изображения для стрелок:

 .jms-arrows{
 user-select: none;
}
.jms-arrows span{
 position: absolute;
 top: 50%;
 margin-top: -40px;
 height: 80px;
 width: 30px;
 cursor: pointer;
 z-index: 2000;
 box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
 border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
 background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
 left: -10px;
}
.jms-arrows span.jms-arrows-next{
 background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
 right: -10px;
}

Со стилями мы разобрались, теперь давайте перейдем к JavaScript!

JavaScript

Как уже говорилось выше, мы будем использовать плагин jmpress.js для создания нашего слайд-шоу. Хотя вы можете использовать любые из его многочисленных функций, мы будем использовать только необходимые нам настройки для создания нашего скрипта. Вы можете прочитать больше о возможностях, которые предлагает jmpress.js, здесь.

Мы создадим jQuery плагин для слайд-шоу. Мы можем вызвать плагин следующим образом:

 $( '#jms-slider' ).jmslideshow();

Параметры для плагина jmpress определяются как параметры по умолчанию в нашего плагина:

 jmpressOpts : {
 // set the viewport
 viewPort        : {
 height  : 400,
 width   : 1300,
 maxScale: 1
 },
 fullscreen      : false,
 hash            : { use : false },
 mouse           : { clickSelects : false },
 keyboard        : { use : false },
 animation       : { transitionDuration : '1s' }
},

Вы можете изменить их в плагине слайд-шоу, или передать определенное значение при инициализации плагина. В качестве примера:

 // specify the jmpress options
var jmpressOpts = {
 animation       : { transitionDuration : '0.8s' }
};
 
// call the jmslideshow plugin
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
 autoplay    : true,
 bgColorSpeed: '0.8s',
 arrows      : false
}));

Ниже приводится набор доступных параметров, которые можно использовать для слайд-шоу:

 $.JMSlideshow.defaults      = {
 // options for the jmpress plugin.
 // you can add more options...
 jmpressOpts : {
 // set the viewport
 viewPort        : {
 height  : 400,
 width   : 1300,
 maxScale: 1
 },
 fullscreen      : false,
 hash            : { use : false },
 mouse           : { clickSelects : false },
 keyboard        : { use : false },
 animation       : { transitionDuration : '1s' }
 },
 // for this specific plugin we will have the following options:
 // скрыть/показать стрелки навигации
 arrows      : true,
 // скрыть/показать навигацию на слайдах в виде точек
 dots        : true,
 // скорость анимации фона
 bgColorSpeed: '1s',
 // автопроигрывание слайд шоу
 autoplay    : false,
 // время между переходами для слайд шоу
 interval    : 3500
};

После того, как плагин слайд-шоу вызывается, первая функция, которая выполняется - это функция инициализации:

 _init : function( options ) {
 
 this.options        = $.extend( true, {}, $.JMSlideshow.defaults, options );
 
 // the slides
 this.$slides        = $('#jms-slider').children('div');
 // total number of slides
 this.slidesCount    = this.$slides.length;
 // step's bgcolor
 this.colors         = $.map( this.$slides, function( el, i ) { return $( el ).data( 'color' ); } ).join( ' ' );
 // build the necessary structure to run jmpress
 this._layout();
 // initialize the jmpress plugin
 this._initImpress();
 // if support (function implemented in jmpress plugin)
 if( this.support ) {
 
 // load some events
 this._loadEvents();
 // if autoplay is true start the slideshow
 if( this.options.autoplay ) {
 
 this._startSlideshow();
 }
 }
 },

В функции _layout мы создаем необходимые структуры для плагин jmpress. Кроме того, мы будем добавлять стрелки/точки навигации в случае, если они устанавлены как true в настройках.

_layout             : function() {
// adds a specific class to each one of the steps
this.$slides.each( function( i ) {
$(this).addClass( 'jmstep' + ( i + 1 ) );
} );
// wrap the slides. This wrapper will be the element on which we will call the jmpress plugin
this.$jmsWrapper    = this.$slides.wrapAll( '<div class="jms-wrapper"/>' ).parent();
// transition speed for the wrapper bgcolor
this.$jmsWrapper.css( {
'-webkit-transition-duration' : this.options.bgColorSpeed,
'-moz-transition-duration' : this.options.bgColorSpeed,
'-ms-transition-duration' : this.options.bgColorSpeed,
'-o-transition-duration' : this.options.bgColorSpeed,
'transition-duration' : this.options.bgColorSpeed
} );
// добавляем стрелки навигации
if( this.options.arrows ) {
this.$arrows    = $( '<nav class="jms-arrows"/>' );
if( this.slidesCount > 1 ) {
this.$arrowPrev = $( '<span class="jms-arrows-prev"/>' ).appendTo( this.$arrows );
this.$arrowNext = $( '<span class="jms-arrows-next"/>' ).appendTo( this.$arrows );
}
this.$el.append( this.$arrows )
}
// добавляем навигацию в виде точек
if( this.options.dots ) {
this.$dots      = $( '<nav class="jms-dots"/>' );
for( var i = this.slidesCount + 1; --i; ) {
this.$dots.append( ( i === this.slidesCount ) ? '<span class="jms-dots-current"/>' : '<span/>' );
}
if( this.options.jmpressOpts.start ) {
this.$start     = this.$jmsWrapper.find( this.options.jmpressOpts.start ), idxSelected = 0;
( this.$start.length ) ? idxSelected = this.$start.index() : this.options.jmpressOpts.start = null;
this.$dots.children().removeClass( 'jms-dots-current' ).eq( idxSelected ).addClass( 'jms-dots-current' );
}
this.$el.append( this.$dots )
}
},

Мы будем инициализировать плагин jmpress в функции _initImpress. Мы также будем переопределять метод "setActive" для переключения активных пунктов навигации.

 _initImpress : function() {
 
 var _self = this;
 
 this.$jmsWrapper.jmpress( this.options.jmpressOpts );
 // check if supported (function from jmpress.js):
 // it adds the class not-suported to the wrapper
 this.support    = !this.$jmsWrapper.hasClass( 'not-supported' );
 
 // if not supported remove unnecessary elements
 if( !this.support ) {
 if( this.$arrows ) {
 this.$arrows.remove();
 }
 
 if( this.$dots ) {
 this.$dots.remove();
 }
 return false;
 }
 // redefine the jmpress setActive method
 this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData ) {
 
 // change the pagination dot active class
 if( _self.options.dots ) {
 
 // adds the current class to the current dot/page
 _self.$dots
 .children()
 .removeClass( 'jms-dots-current' )
 .eq( slide.index() )
 .addClass( 'jms-dots-current' );
 }
 // delete all current bg colors
 this.removeClass( _self.colors );
 // add bg color class
 this.addClass( slide.data( 'color' ) );
 } );
 // add step's bg color to the wrapper
 this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data( 'color' ) );
 },

_startSlideshow и _stopSlideshow будут запускать и останавливать слайд-шоу соответственно, если параметр autoplay установлен true.

 // start slideshow if autoplay is true
 _startSlideshow     : function() {
 
 var _self   = this;
 this.slideshow  = setTimeout( function() {
 _self.$jmsWrapper.jmpress( 'next' );
 
 if( _self.options.autoplay ) {
 _self._startSlideshow();
 }
 
 }, this.options.interval );
 },
 // stops the slideshow
 _stopSlideshow      : function() {
 
 if( this.options.autoplay ) {
 clearTimeout( this.slideshow );
 this.options.autoplay   = false;
 }
 },

В конце, мы загружаем события для навигации. Событие touchend уже определено в плагине jmpress, но мы должны остановить слайд-шоу, в случае, если это событие происходит:

 _loadEvents         : function() {
 
 var _self = this;
 
 // navigation arrows
 if( this.$arrowPrev &amp;&amp; this.$arrowNext ) {
 this.$arrowPrev.on( 'click.jmslideshow', function( event ) {
 
 _self._stopSlideshow();
 _self.$jmsWrapper.jmpress( 'prev' );
 
 return false;
 } );
 
 this.$arrowNext.on( 'click.jmslideshow', function( event ) {
 
 _self._stopSlideshow();
 _self.$jmsWrapper.jmpress( 'next' );
 
 return false;
 } );
 }
 
 // navigation dots
 if( this.$dots ) {
 
 this.$dots.children().on( 'click.jmslideshow', function( event ) {
 
 _self._stopSlideshow();
 _self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + ( $(this).index() + 1 ) );
 
 return false;
 } );
 }
 // the touchend event is already defined in the jmpress plugin.
 // we just need to make sure the slideshow stops if the event is triggered
 this.$jmsWrapper.on( 'touchend.jmslideshow', function() {
 _self._stopSlideshow();
 } );
 }

Вот и всё! Я надеюсь, вам понравился этот урок и будет вам полезен!

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии  

#1 gege 19.04.2012 12:04
Это просто потрясающе!
без скриптов сделать такие эффекты - афигеть просто)
Спасибо!
#2 gege 19.04.2012 12:06
Цитирую gege:
Это просто потрясающе!
без скриптов сделать такие эффекты - афигеть просто)
Спасибо!

извиняюсь, запамятовал про jquery..
но все равно здорово!
#3 Everlier 22.01.2014 10:49
Вообще говоря, эта библиотека построена на impress.js, а та в свою очередь на CSS3D transitions. Так что скрипты, в оригинале, играют просто роль удобных хендлеров всех переходов и событий, а рендерит все браузер уже исходя из свойств CSS ;-)

You have no rights to post comments