ZorNet.Ru — сайт для вебмастера » HTML и CSS » Невероятный слайдер с анимацией на CSS

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

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

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

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

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

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

HTML

Код

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%);
  }
}

Код

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

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

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

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

05 Февраля 2019 Загрузок: 1 Просмотров: 1642 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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