ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный слайдер сайта с CSS анимацией

Адаптивный слайдер сайта с CSS анимацией

Адаптивный слайдер сайта с CSS анимацией
Оригинальная анимация присутствует на этом адаптивном слайдере с помощью JS или любую библиотеку JS, где переключатели идут сбоку правой стороны. В этой статье узнаете, как можно построить с последующей установкой слайдер изображений jQuery Slice с уникальной CSS-анимацией. Где при переключении производится замена картинки, а за ней стразу идут ключевые слова под заданный материал. По сути, этот слайдер имеет анимацию типа slice, когда он изменяет изображение и текст.

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

Так смотрится на большом мониторе и мобильно экране гаджет:

Структура адаптивного слайдера для сайта

Установка:

На странице в HEAD

Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

HTML

Код
<main>
<section class="vizualnos">  
<section class="vizualnos-nav">
  <nav class="vizualnos-nav__nav">
  <button class="vizualnos-nav__prev js-prev">Вперех</button>
  <button class="vizualnos-nav__next js-next">Назад</button>
  </nav>
  </section>

  <section class="sliding_seat is-active">
  <div class="sliding_seat__content">
  <figure class="sliding_seat__figure"><div class="sliding_seat__img" style="background-image: url(http://zornet.ru/_fr/56/3407482.jpg)"></div></figure>
  <header class="sliding_seat__header">
  <h2 class="sliding_seat__title">
  <span class="title-line"><span>Первая</span></span>
  <span class="title-line"><span>Вторая фраза</span></span>
  </h2>
  </header>
  </div>
  </section>

  <section class="sliding_seat">
  <div class="sliding_seat__content">
  <figure class="sliding_seat__figure"><div class="sliding_seat__img" style="background-image: url(http://zornet.ru/_fr/56/0552961.jpg)"></div></figure>
  <header class="sliding_seat__header">
  <h2 class="sliding_seat__title">
  <span class="title-line"><span>Знаки</span></span>
  <span class="title-line"><span>Значение</span></span>
  </h2>
  </header>
  </div>
  </section>

  <section class="sliding_seat">
  <div class="sliding_seat__content">
  <figure class="sliding_seat__figure"><div class="sliding_seat__img" style="background-image: url(http://zornet.ru/_fr/56/0236097.jpg)"></div></figure>
  <header class="sliding_seat__header">
  <h2 class="sliding_seat__title">
  <span class="title-line"><span>Ключевая фраза</span></span>
  <span class="title-line"><span>Здесь вторая фраза</span></span>
  </h2>
  </header>
  </div>
  </section>

  <section class="sliding_seat">
  <div class="sliding_seat__content">
  <figure class="sliding_seat__figure"><div class="sliding_seat__img" style="background-image: url(http://zornet.ru/_fr/56/0650714.jpg)"></div></figure>
  <header class="sliding_seat__header">
  <h2 class="sliding_seat__title">
  <span class="title-line"><span>Картинка</span></span>
  <span class="title-line"><span>Изображение</span></span>
  </h2>
  </header>
  </div>
  </section>
</section>
</main>

CSS

Код
body {
  height: 100%;
  overflow-y: hidden;
}
.vizualnos-nav {
  z-index: 99;
  position: fixed;
  right: -5%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  height: 100%;
  color: #111;
}
@media (min-width: 54em) {
  .vizualnos-nav {
  right: 2%;
  }
}
.vizualnos-nav__nav {
  position: relative;
  right: 0;
  display: block;
  font-size: 1em;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: center;
  transform-origin: center;
}
.vizualnos-nav button {
  position: relative;
  display: inline-block;
  padding: 0.35em;
  margin: 0;
  font-family: "Space Mono", monospace;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  overflow-x: hidden;
  -webkit-transition: color 0.5s ease;
  transition: color 0.5s ease;
}
.vizualnos-nav button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 1px;
  width: 0;
  background: #111;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}
.vizualnos-nav button:hover {
  cursor: pointer;
  color: rgba(17, 17, 17, 0.75);
  -webkit-transition: color 0.5s ease;
  transition: color 0.5s ease;
}
.vizualnos-nav button:hover:after {
  width: 100%;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}
.vizualnos-nav button:focus {
  outline: 0;
}
.is-sliding .vizualnos-nav {
  pointer-events: none;
}

.vizualnos {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background: #fff;
  -webkit-transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
  transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
}
.is-sliding .vizualnos {
  background: #ededed;
  -webkit-transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
  transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
}

.sliding_seat {
  z-index: -1;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100vh;
  -webkit-transition: z-index 1s ease;
  transition: z-index 1s ease;
}
.sliding_seat.is-active {
  z-index: 19;
  -webkit-transition: z-index 1s ease;
  transition: z-index 1s ease;
}
.sliding_seat__content {
  position: relative;
  margin: 0 auto;
  height: 95%;
  width: 95%;
  top: 2.5%;
}
@media (min-width: 54em) {
  .sliding_seat__content {
  height: 80%;
  width: 80%;
  top: 10%;
  }
}
.sliding_seat__header {
  z-index: 9;
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  overflow-y: hidden;
  -webkit-transform: translateX(5%);
  transform: translateX(5%);
}
@media (min-width: 54em) {
  .sliding_seat__header {
  -webkit-transform: translateX(-5%);
  transform: translateX(-5%);
  }
}
.sliding_seat__title {
  font-family: Montserrat, helvetica;
  font-size: 2.5em;
  font-weight: 700;
  color: #111;
  overflow-y: hidden;
}
@media (min-width: 54em) {
  .sliding_seat__title {
  font-size: 5em;
  }
}
.sliding_seat__title .title-line {
  display: block;
  overflow-y: hidden;
}
.sliding_seat__title .title-line span {
  display: inline-block;
  -webkit-transform: translate3d(0, 140%, 0);
  transform: translate3d(0, 140%, 0);
  opacity: 0;
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: transform 0.4s ease, opacity 0.8s ease;
  transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
}
.sliding_seat__title .title-line span:nth-child(1) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.sliding_seat__title .title-line span:nth-child(2) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.is-active .sliding_seat__title .title-line span {
  -webkit-transform: translate3d(0, 0%, 0);
  transform: translate3d(0, 0%, 0);
  opacity: 1;
  -webkit-transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.is-active .sliding_seat__title .title-line:nth-of-type(2n) span {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.sliding_seat__figure {
  z-index: 7;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-sliding .sliding_seat__figure {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.sliding_seat__img {
  position: relative;
  display: block;
  background-size: cover;
  background-attachment: fixed;
  background-position: 50%;
  -webkit-backface-visibility: hidden;
  height: 0%;
  width: 100%;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  -webkit-transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
}
.is-active .sliding_seat__img {
  height: 100%;
  opacity: 1;
  -webkit-transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
}
.is-sliding .sliding_seat__img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

JS

Код
(function($) {
   
  var Slicesliding_seatr = {

  settings: {
  delta: 0,
  currentsliding_seatIndex: 0,
  scrollThreshold: 40,
  vizualnos: $('.sliding_seat'),
  numvizualnos: $('.sliding_seat').length,
  navPrev: $('.js-prev'),
  navNext: $('.js-next'),
  },

  init: function() {
  s = this.settings;
  this.bindEvents();
  },

  bindEvents: function(){

  s.vizualnos.on({
  'DOMMouseScroll mousewheel' : Slicesliding_seatr.handleScroll
  });
  // On click prev
  s.navPrev.on({
  'click' : Slicesliding_seatr.prevsliding_seat
  });
  // On click next
  s.navNext.on({
  'click' : Slicesliding_seatr.nextsliding_seat
  });

  $(document).keyup(function(e) {
  // Left or back arrows
  if ((e.which === 37) || (e.which === 38)){
  Slicesliding_seatr.prevsliding_seat();
  }
   
  if ((e.which === 39) || (e.which === 40)) {
  Slicesliding_seatr.nextsliding_seat();
  }
  });
  },
   

  handleScroll: function(e){

  if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {  

  s.delta--;
   
  if ( Math.abs(s.delta) >= s.scrollThreshold) {
  Slicesliding_seatr.prevsliding_seat();
  }
  }
   
  else {
   
  s.delta++;
   
  if (s.delta >= s.scrollThreshold) {
  Slicesliding_seatr.nextsliding_seat();
  }
  }
   
  return false;
  },

  showsliding_seat: function(){  
   
  s.delta = 0;
   
  if ($('body').hasClass('is-sliding')){
  return;
  }
   
  s.vizualnos.each(function(i, sliding_seat) {

  $(sliding_seat).toggleClass('is-active', (i === s.currentsliding_seatIndex));  
  $(sliding_seat).toggleClass('is-prev', (i === s.currentsliding_seatIndex - 1));  
  $(sliding_seat).toggleClass('is-next', (i === s.currentsliding_seatIndex + 1));  
   
  $('body').addClass('is-sliding');

  setTimeout(function(){
  $('body').removeClass('is-sliding');
  }, 1000);
  });
  },

  prevsliding_seat: function(){

  if (s.currentsliding_seatIndex <= 0) {
  s.currentsliding_seatIndex = s.numvizualnos;
  }
  s.currentsliding_seatIndex--;
   
  Slicesliding_seatr.showsliding_seat();
  },

  nextsliding_seat: function(){
   
  s.currentsliding_seatIndex++;

  if (s.currentsliding_seatIndex >= s.numvizualnos) {  
  s.currentsliding_seatIndex = 0;
  }
   
  Slicesliding_seatr.showsliding_seat();
  },
  };
  Slicesliding_seatr.init();
})(jQuery);

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

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

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

Видео обзор:


Здесь jQuery будет задействована для обработки всех функции, это навигации и их перемотки. Также используется JS, что идет для объявления значений и встроенного функционала.

Если брать общее, то для создания этой рабочего слайдера нужно 3 файла, где первый HTML, второй файл для CSS и третий файл для JavaScript.
14 Апреля 2020 Загрузок: 1 Просмотров: 1070 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar