ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация CSS изображении с прокруткой

Анимация CSS изображении с прокруткой

Прекрасно выглядит функция оригинальной прокрутки для анимации изображений с бесконечной прокруткой, которая использует HTML CSS и JavaScript. Где в этой статье получим развернутый ответ по решению для создания анимированных изображений с прокруткой с помощью HTML и CSS. Может быть вам приходилось встречать анимированные снимки, которые по своим функциям скользят в заданном месте при установке. Из-за такого рода интернет проектов, которые создаются для практики, где вероятно очень мало людей используют.

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

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

Анимированные изображения прокрутки с HTML, CSS, JS

Анимированные изображения с прокруткой на HTML и CSS

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

Установочный процесс:

HTML

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

Также можете легко получить фиктивные и случайные фотографии, где установлено 8 разделов изображений, где идет 1 раздел, который имеет 4 изображения. Все изображение размещены в div, где в основной div прописан класс class="kasnuvop-kedesamub", который аналогично размещен под основу.

Код

CSS

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

Как вы можете видеть в предварительном просмотре, на слайде идет сверху вниз и еще один снизу вверх. Для создания этого был выбраны нечетные изображения div и анимированные его противоположное направление.

Код

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.kasnuvop-kedesamub {
  display: flex;
  overflow: hidden;
  height: 50vw;
  background: #333;
}

.kasnuvop-kedesamub img {
  max-width: 100%;
  vertical-align: middle;
  border: 2px solid white;
  box-sizing: border-box;
  transition: opacity .2s;
  width: 243px;
}

.kasnuvop-kedesamub:hover img {
  opacity: 0.3;
}

.kasnuvop-kedesamub img:hover {
  opacity: 1;
}

.kasnuvop-kedesamub .vepedavum-gekuladsun {
  animation: var(--animation, none) 16s infinite linear;
}

.kasnuvop-kedesamub .vepedavum-gekuladsun:hover {
  animation-play-state: paused;
}

.kasnuvop-kedesamub .vepedavum-gekuladsun:nth-of-type(odd) {
  align-self: flex-end;
  --direction: 50%;
}

@keyframes slide {
  to {
  -webkit-transform: translateY(var(--direction, -50%));
  transform: translateY(var(--direction, -50%));
  }
}

JS

Нечетный div, используя CSS :nth-of-type(odd), используя это свойство, вы можете выбрать нечетный дочерний элемент для любого объекта. Положите границы 2 пикселя на каждое изображение.

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

Код

[...document.querySelectorAll('.vepedavum-gekuladsun')].map(column => {
  column.style.setProperty('--animation', 'slide');
  column.style.setProperty('height', '200%');
  column.innerHTML = column.innerHTML + column.innerHTML;
});

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

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

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

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

07 Июля 2019 Загрузок: 1 Просмотров: 2372 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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