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

Увеличение картинки при прокрутке JavaScript

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

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

Установка:

HTML

Код
<div class="uvelichena">
  <img src="Ссылка на изображение под увеличение" alt="">
  </div>

CSS

Код
.uvelichena img{
  max-width: 500px;
  border: 6px solid white;
}
@media only screen and (max-width: 600px) {
  body {
  font-size: 1rem;
  padding: 1rem;
  }
}

JS

Код
const zoomScreen = document.querySelector(".uvelichena");
let zoom = 1;
const zoomingSpeed = 0.1;

document.addEventListener("wheel", (e)=> {
  if (e.deltaY > 0) {
  zoomScreen.style.transform = `scale(${(zoom += zoomingSpeed)})`;
  } else {
  zoomScreen.style.transform = `scale(${(zoom -= zoomingSpeed)})`;
  }
})

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

Демонстрация
2022-04-27 Загрузок: 1 Просмотров: 263 Комментарий: (0)

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

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

Оставь свой отзыв

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