ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Колода смены карт с изображением по клику

Колода смены карт с изображением по клику

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

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

При проверки на работоспособность:

Колода меняющихся карт на картинки с CSS и JS

Установка:

Подключаем библиотеку

Код

HTML

Код

CSS

Код

.karkastnus-blok {
  margin: 20px 0;
  position: relative;
}
.kavtuna {
  height: 400px;
  width: 300px;
  position: absolute;
  top: 0;
  left: calc(50% - 150px);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.1);
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid #337AB7;
  padding: 10px;
  z-index: 100;
  background-color: #BFE2FF;
}
.kavtuna:nth-child(1) {
  transform: rotate(-3deg);
  position: relative;
}
.kavtuna:nth-child(2) {
  transform: rotate(4deg);
}
.kavtuna:nth-child(3) {
  transform: rotate(10deg);
}
.kavtuna:nth-child(4) {
  transform: rotate(-6deg);
}
.kavtuna:nth-child(5) {
  transform: rotate(-2deg);
}
.kavtuna:nth-child(6) {
  transform: rotate(7deg);
}
.kavtuna img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bottom {
  z-index: 50;
  animation: move ease-in-out 1s;
}
.bottom_last {
  z-index: 30;
  animation: move_last ease-in-out 1s;
}
@keyframes move {
  0% {
  left: calc(50% - 150px);
  z-index: 150;
  }
  50% {
  left: calc(50% + 220px);
  }
  100% {
  left: calc(50% - 150px);
  z-index: 50;
  }
}
@keyframes move_last {
  0% {
  left: calc(50% - 150px);
  z-index: 150;
  }
  50% {
  left: calc(50% + 220px);
  z-index: 50;
  }
  100% {
  left: calc(50% - 150px);
  z-index: 30;
  }
}

Код

$(function () {
  let count = 1;
  let click = true;
  let num = $(".kavtuna").length;
  $(".kavtuna").click(function() {
  if(!click) {
  return;
  }
  click = false;
  let card = $(this);
  if(count < num) {
  $(this).addClass("bottom");
  count++;
  } else {
  $(this).addClass("bottom_last");
  count++;
  }
  if(count == num + 1) {
  setTimeout(function () {
  $(".kavtuna").removeClass("bottom").removeClass("bottom_last");
  count = 1;
  }, 1000);
  }
  setTimeout(function () {
  click = true;
  }, 1000);
  });
});

Если решили изменить количество фотографий, то здесь необходимо будет задать их поворот, а точнее добавить класс.

Код

.kavtuna:nth-child(номер_фото) {
transform: rotate(радиус);
}

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

Демонстрация
Источник: atuin.ru

19 Июля 2021 Загрузок: 2 Просмотров: 1290 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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