Возможно Вы уже видели impress.js, действительно отличную JavaScript-библиотеку для создания 3D-презентаций. jQuery плагин jmpress.js позволит Вам использовать эту библиотеку вместе с jQuery, с некоторыми дополнительными опциями.
Мы хотим показать вам сегодня, как использовать замечательный плагин jmpress.js для создания слайд-шоу с 3D-эффектами. Значки, используемые в демо от Artcore Illustration, и используются они по Creative Commons BY-NC-ND 3.0 license.
Итак, давайте начнем!
У нас будет один главный контейнер с классом 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>
Теперь займемся стилями.
Мы зададим ширину основного контейнера в процентах, при этом определим минимальные и максимальные значения:
.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!
Как уже говорилось выше, мы будем использовать плагин 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 && 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(); } ); }
Вот и всё! Я надеюсь, вам понравился этот урок и будет вам полезен!
© 2008 - 2024 Все права защищены