Скачать для фотошопа и для создания сайта Четверг, 24.07.2025, 20:14
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Шаблоны для Ucoz
Шапки для Ucoz
Скрипты для Ucoz
Иконки для Ucoz
Кнопки для Ucoz
Уроки для Ucoz
Статьи для Ucoz
Прочее для Ucoz

Популярное

Мини-чат

Наш опрос
Оцените мой сайт
1. Отлично
2. Хорошо
3. Неплохо
4. Плохо
5. Ужасно
Всего ответов: 7

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


3D слайдер (карусель) для сайта на jQuery
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
19.10.2020, 22:19
3D слайдер (карусель) для сайта на jQuery




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

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

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

Рассматривая основной принцип работы слайдера с изображением, то здесь видно, где все картинки изначально равномерно размещены по кругу:



Останется только задать движение по одну или совершенно другую сторону.

Наглядные примеры:

Вид из трех фотографии:



Здесь вид представлен на шесть фото:



Все увеличиваем, где уже десять фотографий:



Аналогично с 10 картинками, только плюс промежуток 20px:



Ставим 12 снимков, где создаем промежуток на 20px со скрытым задним фоном:



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

HTML

Код
Код
<div class="kusinebec-domespace">
  <figure>
  <div><a href="/"><img src="Ссылка на изображение/800x533" alt=""></a></div>
  <div><a href="/"><img src="Ссылка на изображение/800x533" alt=""></a></div>
  <div><a href="/"><img src="Ссылка на изображение/800x533" alt=""></a></div>
  </figure>
  <nav>
  <button class="nav prev">Назад</button>
  <button class="nav next">Вперед</button>
  </nav>
</div>


CSS

Код
Код
.kusinebec-domespace {
  padding: 20px;
  -webkit-perspective: 495px;
  perspective: 595px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.kusinebec-domespace > * {
  flex: 0 0 auto;
}
.kusinebec-domespace figure {
  margin: 0;
  width: 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
}
.kusinebec-domespace figure img,
.kusinebec-domespace figure div {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}
.kusinebec-domespace figure div:not(:first-of-type),
.kusinebec-domespace figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
}
.kusinebec-domespace nav {
  display: flex;
  justify-content: center;
  margin: 15px 0 0;
}
.kusinebec-domespace nav button {
  flex: 0 0 auto;
  margin: 0 4px;
  cursor: pointer;
  color: #19619e;
  background: #b8daf7;
  border: 1px solid #175d98;
  padding: 7px 23px;
  font-weight: bold;
  transition: all .3s ease;
  border-radius: 3px;
}
.kusinebec-domespace nav button:hover {
  color: #f1f1f1;
  background: #236dad;
}


JS

Код
Код
window.addEventListener("load", () => {
  var carousels = document.querySelectorAll(".kusinebec-domespace");
  for (var i = 0; i < carousels.length; i++) {
  carousel(carousels[i]);
  }
});
function carousel(root) {
  var figure = root.querySelector("figure"),
  nav = root.querySelector("nav"),
  images = figure.children,
  n = images.length,
  gap = root.dataset.gap || 0,
  bfc = "bfc" in root.dataset,
  theta = 2 * Math.PI / n,
  currImage = 0;
  setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
  window.addEventListener("resize", () => {
  setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
  });
  setupNavigation();
  function setupCarousel(n, s) {
  var apothem = s / (2 * Math.tan(Math.PI / n));
  figure.style.transformOrigin = `50% 50% ${-apothem}px`;
  for (var i = 0; i < n; i++) images[i].style.padding = `0 ${gap}px`;
  for (i = 0; i < n; i++) {
  images[i].style.transformOrigin = `50% 50% ${-apothem}px`;
  images[i].style.transform = `rotateY(${i * theta}rad)`;
  }
  if (bfc)
  for (i = 0; i < n; i++) images[i].style.backfaceVisibility = "hidden";
  rotateCarousel(currImage);
  }
  function setupNavigation() {
  nav.addEventListener("click", onClick, true);
  function onClick(e) {
  e.stopPropagation();
  var t = e.target;
  if (t.tagName.toUpperCase() != "BUTTON") return;
  if (t.classList.contains("next")) {
  currImage++;
  } else {
  currImage--;
  }
  rotateCarousel(currImage);
  }
  }
  function rotateCarousel(imageIndex) {
  figure.style.transform = `rotateY(${imageIndex * -theta}rad)`;
  }
}


Чтоб создать промежуток между снимками, то нужно использовать атрибут data-gap.

Наглядный например:

Код
Код
<div class="kusinebec-domespace" data-gap="20">


Задается расстояние 20px:

Также скрываем тыловые картинки, здесь уже задействуем атрибут data-bfc.

Код
Код
<div class="kusinebec-domespace" data-bfc>


На представленный формат идет также файл, но вся установка находится на странице.

Демонстрация
Источник: www.sitepoint.com

3D Карусель: навигация при помощи SCSS

Здесь хотелось добавить, так как аналогичный слайдер идет на SCSS, что веб разработчику возможно такой формат нужен, так здесь в архиве предоставлена вторая папка на установку.



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

Демонстрация
Категория: Скачать Скрипты для Ucoz | Добавил: Marco
Просмотров: 149 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт

Поиск

Популярное
SLS-Склад Лайт 
Feedmaster 1.7.4.2 бесплатно. 
Atlantis Word Processor 1.6.2 Beta 
Mozilla Sunbird 0.9 RU 
Фото на документы Экспресс 1.51 Rus 

На форуме
Куплю, обмен шве...
Автор: roterb
Форум: Куплю/Продам
Дата: 26.12.2024
Ответов: 1
Файлообменник. З...
Автор: roterb
Форум: Куплю/Продам
Дата: 19.07.2024
Ответов: 0
Файлообменник Sh...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Заработок на фай...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Файлообменник Le...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1

Популярное

Партнеры сайта
Стать партнером Стать партнером Стать партнером Стать партнером

Copyright MyCorp © 2025