ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Увеличение картинки при прокрутке 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)})`; } }) Надеемся вам все понятно, так как не чего сложного по сути нет, и вам понятен данный эффект, это как создать масштабируемое изображение при прокрутке. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |