» »

Невероятный слайдер с анимацией на CSS

Невероятный слайдер с анимацией на CSS

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

В стилистике выставлено 100% под ширину, что если ставить на отдельную страницу, то здесь на всю ширину и длину заполнит слайд. Ведь здесь не предусмотрены кнопки переключение, потому он идет под карусель. Это первый из слайдов, где не содержат функционала переключателя, который приходилось встречать.

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

Пример такого трюка идет при переходе:

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

Приступаем к установке:

HTML

Код
<div class="pingenumind">
  <div class="busine-songekateg">
  <div class="sonesuganu-damprovemes">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/f27u6b-1.jpg" alt="ZorNet - портал Image 1">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/f27u6b-1.jpg" alt="ZorNet - портал Image 1">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/f27u6b-1.jpg" alt="ZorNet - портал Image 1">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/f27u6b-1.jpg" alt="ZorNet - портал Image 1">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/f27u6b-1.jpg" alt="ZorNet - портал Image 1">
  </div>
  <div class="sonesuganu-damprovemes">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/5e5zlj-2.jpg" alt="ZorNet - сайт Image 2">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/5e5zlj-2.jpg" alt="ZorNet - сайт Image 2">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/5e5zlj-2.jpg" alt="ZorNet - сайт Image 2">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/5e5zlj-2.jpg" alt="ZorNet - сайт Image 2">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/5e5zlj-2.jpg" alt="ZorNet - сайт Image 2">
  </div>
  <div class="sonesuganu-damprovemes">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/210hkyc-3.jpg" alt="Снимок под номером 3">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/210hkyc-3.jpg" alt="Снимок под номером 3">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/210hkyc-3.jpg" alt="Снимок под номером 3">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/210hkyc-3.jpg" alt="Снимок под номером 3">
  <img class="nesonesava-nedalekeg" src="http://zornet.ru/ABVUN/Abas/degakolas/210hkyc-3.jpg" alt="Снимок под номером 3">
  </div>
  </div>  
  </div>  

  </div>

CSS

Код
img {
  max-width: 100%;
}

.kegsenegav {
  padding: 0;
}

.pingenumind {
  overflow: hidden;
}

.busine-songekateg {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  transform: translateX(var(--slider-offset));
  transition-property: transform;
  transition-duration: var(--slider-time);
  transition-timing-function: ease;
  will-change: transform;
}

.sonesuganu-damprovemes {
  flex: 1 0 100%;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: auto;
}

.nesonesava-nedalekeg {
  width: 100%;
  height: auto;
  transform: translateX(0);
  animation-delay: var(--slide-distortion-delay), var(--slide-reset-delay);
  animation-duration: var(--slide-distortion-time), var(--slide-reset-time);
  animation-fill-mode: forwards, forwards;
  animation-direction: normal, reverse;
}

.nesonesava-nedalekeg:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}

.nesonesava-nedalekeg:nth-child(1) {
  clip-path: inset(0 0 calc(var(--rate) * 4) 0);
}

.nesonesava-nedalekeg:nth-child(2) {
  clip-path: inset(calc(var(--rate) * 1) 0 calc(var(--rate) * 3) 0);
}

.nesonesava-nedalekeg:nth-child(3) {
  clip-path: inset(calc(var(--rate) * 2) 0 calc(var(--rate) * 2) 0);
}

.nesonesava-nedalekeg:nth-child(4) {
  clip-path: inset(calc(var(--rate) * 3) 0 calc(var(--rate) * 1) 0);
}

.nesonesava-nedalekeg:nth-child(5) {
  clip-path: inset(calc(var(--rate) * 4) 0 0 0);
}

// Animation
.sonesuganu-damprovemes--animating .nesonesava-nedalekeg:nth-child(1) {
  animation-name: animation-1, animation-1;
}

.sonesuganu-damprovemes--animating .nesonesava-nedalekeg:nth-child(2) {
  animation-name: animation-2, animation-2;
}

.sonesuganu-damprovemes--animating .nesonesava-nedalekeg:nth-child(3) {
  animation-name: animation-3, animation-3;
}

.sonesuganu-damprovemes--animating .nesonesava-nedalekeg:nth-child(4) {
  animation-name: animation-4, animation-4;
}

.sonesuganu-damprovemes--animating .nesonesava-nedalekeg:nth-child(5) {
  animation-name: animation-5, animation-5;
}

// Keyframes
@keyframes animation-1 {
  from {
  transform: translateX(0);
  }
  to {
  // transform: translateX(-50px);
  transform: translateX(-5vw);
  }
}

@keyframes animation-2 {
  from {
  transform: translateX(0);
  }
  to {
  transform: translateX(-3vw);
  }
}

@keyframes animation-3 {
  from {
  transform: translateX(0);
  }
  to {
  transform: translateX(1vw);
  }
}

@keyframes animation-4 {
  from {
  transform: translateX(0);
  }
  to {
  transform: translateX(3vw);
  }
}

@keyframes animation-5 {
  from {
  transform: translateX(0);
  }
  to {
  transform: translateX(-1vw);
  }
}

@keyframes slide {
  to {
  transform: translateX(-100%);
  }
}

JS

Код
const ANIMATING_CLASS = 'sonesuganu-damprovemes--animating';

const Slider = {
  init() {
  this.sliderEl = document.querySelector('.pingenumind');
  this.slideInnerEl = document.querySelector('.busine-songekateg');
  this.sliderItemsEl = document.querySelectorAll('.sonesuganu-damprovemes');
  this.offset = 0;
  this.direction = 'left';
  this.maxOffset = (this.sliderItemsEl.length - 1) * 100;

  this.slideInnerEl.addEventListener('transitionend', this.onSliderTransitionEnd.bind(this));
  setInterval(this.slide.bind(this), 3000);
  },
  slide() {
  if (this.isMaxLeft()) {
  this.direction = 'right';
  } else if (this.isMaxRight()) {
  this.direction = 'left';
  }

  this.moveSlider();
  },
  isMaxLeft() {
  return this.offset <= -this.maxOffset;
  },
  isMaxRight() {
  return this.offset >= 0;
  },
  getCurrentPage() {
  if (this.offset < 0) {
  return (this.offset * -1) / 100;
  }

  return this.offset / 100;
  },
  getSignal() {
  return this.direction === 'left' ? -1 : 1;
  },
  onSliderTransitionEnd() {
  const signal = this.getSignal();
  const currentPage = this.getCurrentPage();

  this.sliderItemsEl.forEach(element => element.classList.remove(ANIMATING_CLASS));
  },
  moveSlider() {
  const signal = this.getSignal();
  const currentPage = this.getCurrentPage();

  this.offset = this.offset + (signal * 100);
  this.sliderItemsEl[currentPage].classList.add(ANIMATING_CLASS);
  this.sliderItemsEl[currentPage + (-1 * signal)].classList.add(ANIMATING_CLASS);
  this.slideInnerEl.style.setProperty('--slider-offset', `${this.offset}%`);
  }
};

const slider = Object.create(Slider);
slider.init();

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

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

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

Демонстрация
2019-02-05 Загрузок: 1 Просмотров: 447 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

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