Автор

05 12.2015
Sequence.js - создание слайдера товаров

Sequence.js - создание слайдера товаров


Создаем адаптивный слайдер товаров с помощью плагина анимации Sequence.js. В статье подробно описываются все нюансы инструмента и какие параметры используются в слайдере. Хороший вариант презентации своих продуктов.

 

ДЕМО
ИСХОДНИКИ

 

 

HTML

<div id="sequence" class="seq">
    <ul class="seq-canvas">
      <li class="step1 valign seq-in">
        <div class="vcenter">
          <img data-seq class="feature" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/bananas.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" />
          <h2 data-seq class="title">Bananas</h2>
        </div>
      </li>
      <li class="step2 valign">
        <div class="vcenter">
          <img data-seq class="feature" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/coconut.png" alt="A cartoon illustration of half a coconut" width="325" height="300" />
          <h2 data-seq class="title">Coconut</h2>
        </div>
      </li>
      <li class="step3 valign">
        <div class="vcenter">
          <img data-seq class="feature" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/orange.png" alt="A cartoon illustration of a round orange" width="350" height="300" />
          <h2 data-seq class="title">Orange</h2>
        </div>
      </li>
    </ul>

    <fieldset class="nav" aria-label="Slider buttons" aria-controls="sequence">

      <button type="button" class="seq-prev" aria-label="Previous"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/prev.svg" alt="Previous" /></button>

      <ul role="navigation" aria-label="Pagination" class="seq-pagination">
        <li class="seq-current">
          <a href="#step1" rel="step1" title="Go to bananas">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/tn-bananas@2x.png" alt="Bananas" width="50" height="40" />
          </a>
        </li>
        <li>
          <a href="#step2" rel="step2" title="Go to coconut">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/tn-coconut@2x.png" alt="Coconut" width="50" height="40" />
          </a>
        </li>
        <li>
          <a href="#step3" rel="step3" title="Go to orange">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/tn-orange@2x.png" alt="Orange" width="50" height="40" />
          </a>
        </li>
      </ul>

      <button type="button" class="seq-next" aria-label="Next"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/next.svg" alt="Next" /></button>
    </fieldset>

  </div>

CSS

body,
html,
.seq {

  /* #1 */
  width: 100%;
  height: 100%;

  /* #2 */
  margin: 0;
  padding: 0;
}

/*
 * Styles: Container
 * 1: Canvas, steps, and content should be positioned relative to the container
 * 2: Hide anything that goes beyond the boundaries of the Sequence container
 * 3: Some basic styles
 * 4: Set the initial background color
 * 5: Make the background color transition when navigating between steps
 */
.seq {

  /* #1 */
  position: relative;

  /* #2 */
  overflow: hidden;

  /* #3 */
  font-family: sans-serif;
  color: white;
  text-align: center;

  /* #4 */
  background-color: #2A93BC;

  /* #5 */
  transition-duration: .5s;
  transition-property: background-color;
}

/*
 * Styles: Canvas and steps
 * 1: Make the width/height of the screen, canvas, and steps the same size as the Sequence element
 * 2: Reset the canvas and steps for better browser consistency
 */
.seq-canvas,
.seq-canvas > * {

  /* #1 */
  height: 100%;
  width: 100%;

  /* #2 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Styles: steps
 * 1: Position steps all in the same place
 * 2: Add whitespace around each step
 * 3: Make space for the pagination
 */
.seq-canvas > * {
  /* #1 */
  position: absolute;

  /* #2 */
  padding: 32px;
  box-sizing: border-box;

  /* #3 */
  height: auto;
  top: 0;
  bottom: 80px;
}

.seq-step1 {
  background-color: #2A93BC;
}

.seq-step2 {
  background-color: #6BC85E;
}

.seq-step3 {
  background-color: #45367E;
}

.feature {
  width: 70%;
  max-width: 100%;
  height: auto;
}

@media only screen and (min-width: 460px) and (min-height: 520px) {
  .feature {
    width: 100%;
  }
}


/* Ghost element */
.valign:before {
  content: "";
  height: 100%;
}

/* Vertically align the ghost and desired elements */
.valign:before,
.valign > .vcenter {
  display: inline-block;
  vertical-align: middle;
}

/* Remove 4px gap to allow consistent valign */
.valign {
  font-size: 0;
}

/* Reset font-size on valigned elements */
.valign > .vcenter {
  font-size: 16px;
}

/*
 * 1: Reset
 * 2: Titles should start as transparent
 * 3: When a change in opacity occurs, transition over .5s
 */
.title {
  /* #1 */
  margin: 0;

  /* #2 */
  opacity: 0;
  transform: translateX(50px) translateZ(0);

  /* #3 */
  transition-duration: .5s;
  transition-property: opacity, transform;
}

/*
 * When a step is active, fade in to opaque and slide to the center
 */
.seq-in .title {
  opacity: 1;
  transform: translateX(0) translateZ(0);
}

/*
 * When a step becomes inactive, fade out and slide to the left
 */
.seq-out .title {
  opacity: 0;
  transform: translateX(-50px) translateZ(0);
}

/*
 * Scale an image to 0 (so it can't be seen) when in its start position
 */
.feature {
  transform: translateZ(0) scale(0);
  transition-duration: .5s;
  transition-property: transform, opacity;
}

/*
 * When a step is active, make the image scale in
 */
.seq-in .feature {
  transform: translateZ(0) scale(1);
}

/*
 * When a step becomes inactive, make the image fade out but maintain full scale
 */
.seq-out .feature {
  transform: translateZ(0) scale(1);
  opacity: 0;
}


.nav {
  /* #1 */
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 2.5em;
  max-width: 640px;
  width: 100%;

  /* #2 */
  border: none;
  margin: 0 auto;
  padding: 0;
}

/*
 * Styles: previous/next buttons
 * 1: Reset styles
 * 2: General styles
 * 3: Set up the `opacity` so that it will transition from 70% transparency to opaque when hovered over
 */
.seq-next,
.seq-prev {
  /* #1 */
  padding: 0;
  background: transparent;
  border: none;

  /* #2 */
  padding: .75em;
  cursor: pointer;
  color: white;
  font-size: .75em;
  text-transform: uppercase;

  /* #3 */
  opacity: .7;
  transition-duration: .25s;
  transition-property: opacity;
}

.seq-next:hover,
.seq-prev:hover {
  opacity: 1;
}

/*
 * Styles: next/previous buttons and pagination container
 */
.seq-next,
.seq-prev,
.seq-pagination {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
}

/*
 * Add some space to sides of pagination
 */
.seq-pagination {
  margin: 0 1em;
  padding: 0;
}

/*
 * Styles: pagination links
 * 1: Make the links relative so their active indicator dot can be position: absolute
 * 2: Reset styles
 * 3: Make the links sit side-by-side
 * 4: General styles
 */
.seq-pagination li {
  /* #1 */
  position: relative;

  /* #2 */
  list-style: none;

  /* #3 */
  display: inline-block;
  vertical-align: middle;

  /* #4 */
  width: 50px;
  height: 40px;
  margin: 0 .25em;
}

/*
 * Styles: A small dot that appears when a pagination link is active
 * 1: position the dot under the image and centered
 * 2: Make the dot transparent when not active and set up a transition for when it becomes active
 */
.seq-pagination li:before {
  /* #1 */
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: .5em;
  border-radius: 50%;
  background: white;

  /* #2 */
  opacity: 0;
  transition-duration: .25s;
  transition-property: opacity;
}

/*
 * Show the indicator dot for the current link
 */
.seq-pagination .seq-current:before {
  opacity: .7;
}

/*
 * Reset styles
 */
.seq-pagination img,
.seq-pagination a {
  display: block;
  border: none;
}

JS

var sequenceElement = document.getElementById("sequence");

var options = {
  keyNavigation: true,
  animateCanvas: false,
  phaseThreshold: false,
  reverseWhenNavigatingBackwards: true
}

var mySequence = sequence(sequenceElement, options);

 

Вот и всё! Более подробно вы можете прочитать на сайие разработчика!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеJS

29 09.2014
Sequence.js - создание слайдера товаров

На многих сайтах реализована функция всплывающего окна при входе на сайт. Такой элемент позволяет преподнести посетителю необходимую информацию, которая, на мнение, автора, является ценной для посетителя или на оборот-предупреждающей.


25 01.2018
Sequence.js - создание слайдера товаров

Тенденции в области инфографического дизайна 2018, безусловно, будут следовать правилам графического дизайна 2018 года. Однако инфографика имеет эту специфическую и обязательную функцию, которую вы должны иметь в виду при проектировании: информации.


31 03.2013
Sequence.js - создание слайдера товаров

Как часто вы замечали так называемые "вееры" с выбором цвета, или прочей информацией с магазинах. Это достаточно удобный подход, для экономии места, при этом предоставляется возможность хранить множество информации в достаточно малом объеме места. В данном уроке мы рассмотрим пример создания такой книжки образцов для сайта с помощью jquery и css3, в которой панели воспринимают нажатия кнопки мыши, после чего происходит открытие нужной страницы. В демонстрации приводится несколько примеров организации книги.


20 07.2013
Sequence.js - создание слайдера товаров

Вам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект.  На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close