» »

Анимация 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", который аналогично размещен под основу.

Код
<div class="kasnuvop-kedesamub">
   
  <div class="vepedavum-gekuladsun">
  <a href="#"><img src="http://zornet.ru/_fr/20/7313272.jpg" alt="Снимок №"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/8189944.jpg" alt="Снимок №1"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/2849643.jpg" alt="Снимок №2"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/4632977.jpg" alt="Снимок №3"></a>
  </div>
  <div class="vepedavum-gekuladsun">
  <a href="#"><img src="http://zornet.ru/_fr/20/1496017.jpg" alt="Картинка #1"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/9351980.jpg" alt="Картинка #2"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/8486534.jpg" alt="Картинка #3"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/6874070.jpg" alt="Картинка #4"></a>
  </div>
  <div class="vepedavum-gekuladsun">
  <a href="#"><img src="http://zornet.ru/_fr/20/4958526.jpg" alt="Фото #1"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/8691488.jpg" alt="Фото #2"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/9433521.jpg" alt="Фото #3"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/5392493.jpg" alt="Фото #4"></a>
  </div>
  <div class="vepedavum-gekuladsun">
  <a href="#"><img src="http://zornet.ru/_fr/20/2046704.jpg" alt="Изображение №1"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/3172644.jpg" alt="Изображение №2"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/0446481.jpg" alt="Изображение №3"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/1294666.jpg" alt="Изображение №4"></a>
  </div>
  <div class="vepedavum-gekuladsun">
  <a href="#"><img src="http://zornet.ru/_fr/20/8412241.jpg" alt="Снимки изображений 1"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/4401493.jpg" alt="Снимки изображений 2"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/9927415.jpg" alt="Снимки изображений 3"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/3178183.jpg" alt="Снимки изображений 4"></a>
  </div>
  <div class="vepedavum-gekuladsun">
  <a href="#"><img src="http://zornet.ru/_fr/20/3309934.jpg" alt="Ключевое слово 1"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/3741285.jpg" alt="Ключевое слово 2"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/1482619.jpg" alt="Ключевое слово 3"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/6600261.jpg" alt="Ключевое слово4"></a>
  </div>
  <div class="vepedavum-gekuladsun">
  <a href="#"><img src="http://zornet.ru/_fr/20/2018268.jpg" alt="Ключи сайта 1"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/6612889.jpg" alt="Ключи сайта 2"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/1238960.jpg" alt="Ключи сайта 3"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/3452978.jpg" alt="Ключи сайта 4"></a>
  </div>
  <div class="vepedavum-gekuladsun">
  <a href="#"><img src="http://zornet.ru/_fr/20/6914470.jpg" alt="#1"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/7783211.jpg" alt="#2"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/8571060.jpg" alt="#3"></a>
  <a href="#"><img src="http://zornet.ru/_fr/20/7102840.jpg" alt="#4"></a>
  </div>
</div>

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

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

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

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

Демонстрация
2019-07-07 Загрузок: 1 Просмотров: 293 Комментарий: (0)

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

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

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