Регистрация

[CSS, HTML, JavaScript] Элементарный автоматический слайдер на основе библиотеки RevolveR :: 10 строчек кода

Ответить на тему
Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
19-Окт-2020 15:31
Цитировать

В кой-то веки, году в 2013, я постепенно перестал использовать jQuery в пользу native ECMAScript. У меня ни осталось ни каких инструментов, сахарного API и нужных в повседневной верстке плагинов. Создавать код библиотеки пришлось с самого нуля и она постепенно обзавелась всем необходимым для быстрой и комфортной работы. У меня не было даже слайдера, а идея не брать jQuery и любые другие библиотеки привела к созданию своей кодовой микро базы.

Самый простой и маленький в мире слайдер
Я, как верстальщик на то время, прекрасно понимал как работают плагины и неоднократно ковырял front-end пытливым умом, пытаясь добиться минификации кода и оптимизации работы с CSS или той же версткой.
Слайдер родился после нескольких экспериментов с z-index и, на мое удивление, программа составила всего 10 строчек. Я не стал трансформировать изображения в background-image и оставил возможность листать даже блоки верстки.
Вот HTML код контейнера сцены:
<figure>
  <img src="./graphics/R-1.png" alt="RevolveR Labs" />
  <img src="./graphics/R-2.png" alt="RevolveR Labs" />
  <img src="./graphics/R-3.png" alt="RevolveR Labs" />
  <img src="./graphics/R-4.png" alt="RevolveR Labs" />
</figure>

Добавим CSS, который сгрузит теги изображений в одну колоду по X:0 и Y:0(top: 0px и left:0px):
figure {
  background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
  box-shadow: inset 0 0 1vw #000;
  outline: .2vw solid #b1917fbd;
  border: .1vw dashed #999;
  display: inline-block;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 36.46vw;
  height: 22vw;
}
  figure img {
    position: absolute;
    width: 36.46vw;
    height: 22vw;
    opacity: 1;
    left: 0;
    top: 0;
  }

Я уже не использую в верстке статические величины такие как PX из-за появления мониторов 8К и более, а делаю все на масштабируемых единицах view port что позволяет мне избежать лестниц на media-queries и дизайнить интерфейсы под любые разрешения экранов.
Теперь напишем обработчик JavaScript, который будет просто листать колоду без каких либо эффектов с временным интервалом:
var e = document.querySelectorAll('figure img');
let i = 0;
void setInterval(() => {
    if(e) {
      e[i].style.zIndex = 0;
      i++;
      i = (i - 0) === e.length ? 0 : i - 0;
      e[i].style.zIndex = 1;
    }
  }, 3000);

Мы используем setInteval проваливающийся в вакуум при инициализации на 3 секунды и реализуем сбрасываемый итератор на псевдо цикле. При каждом следующем тиканьи таймера меняем z-index нужного изображения по порядку. Происходит постоянный сброс z-index предыдущего изображения на 0, а текущий элемент цикла выходит на передний план за счет установки z-index в положение 1.
Все. Самый простой в мире и малогабаритный слайдер готов, надежный и элементарный как автомат Калашникова. Теперь вся колода тикает и текущий элемент псевдо цикла выходит на первый план. Работает это все без third party на чистом JavaScript.
Добавим эффектов
Rotor(так я его назвал) вышел слишком простяцкий и мне захотелось добавить каких-то эффектов перехода. Для этого уже приходится зайдействовать библиотеку умеющую анимации CSS с клевыми easing эффектами(их в RevolveR целых 43).
Вот листинг:
let launch = RR.browser;
RR.allowSlide = true;
var e = RR.sel('figure img')
let i = 0;
void setInterval(
  () => {
    if( e && RR.allowSlide ) {
      RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {
        e[ i ].style.zIndex = 0;
        i++;
        i = (i - 0) === e.length ? 0 : i - 0;
        RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {
          e[ i ].style.zIndex = 1;
        });
      });
    }
  },
3000);

Здесь реализована последовательность callback на завершение состояния анимации, которая суммарным временем умещается во время типа таймера setInterval и мы получаем классные переходы с затуханием и проблеском.
Все прекрасно, но мы еще добавим задержку перелистывая флагом, когда pointer указатели мыши находится над сценой:
RR.event('figure img', 'mouseenter', () => {
  RR.allowSlide = null;
  RR.event('figure img', 'mouseleave', () => {
    RR.allowSlide = true;
  });
});

Rotor by RevolveR Labs в действии
Посмотреть Rotor в действии можно здесь.
Как вы видите кода здесь тоже не так и много и можно реализовать более сложные и интересные эффекты. Но это уже на ваше усмотрение.
 ===========
 Источник:
habr.com
===========
Похожие новости: Теги для поиска: #_css, #_html, #_javascript, #_javascript, #_html, #_css, #_css, #_html, #_javascript
Профиль  ЛС 
Показать сообщения:     
Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 10:37
Часовой пояс: UTC + 5