Изменить изображение при прокрутке на JS
 | |
| В статье представлено классное изменение background-image свойства на CSS, и также задействованы функций с помощью нескольких строк JavaScript. Некоторые в сите интернет задаются вопросом, это как можно сделать так, чтоб изменить фиксированное фоновое изображение при прокрутке. Многие современные ресурсы применяют эффект параллакса, где можно добиться некоторых динамических результатов, где задействовано CSS, что совершенно не повлияет на производство сайта. Перейдя на страницу демонстрация, то можно рассмотреть этот эффект, где мы видим картинку, виде шапки, но только стоит опустить страницу в низ, как это изображение автоматически меняется на совершенно другое. Но главное, которое поменялась картинка, то она остается по умолчанию, это хоть поднять страну или аналогично опустить. Цель изображение идет на веб-сайте, которое корректно покрывается на все размеры окон браузера. Сама логика состоит в том, что при переходе на страницу, то мы наблюдаем шапку, где идет изображение. Но только стоит немного прокрутить ее в них, как автоматически происходит смена изображение. Тут главное, это безусловно сам эффект, но и что находится на снимках, где не мало важно, так как можно разместить информацию. Установочный процесс: HTML Код <div id="perekhod" class="perekhod-1"></div> CSS Код .perekhod-1, .perekhod-2 { position: relative; background-size: cover; background-image: url('http://zornet.ru/ABVUN/Abaavag/zornet_ru_011.jpg'); background-position: center; min-height: 670px; transition: all 1s ease; } .perekhod-2 { background-image: url('http://zornet.ru/ABVUN/Abaavag/zornet_ru_022.jpg'); } JS Код <script> var perekhod = document.getElementById('perekhod'); window.addEventListener('scroll', function() { if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) { perekhod.classList.remove('perekhod-1'); perekhod.classList.add('perekhod-2'); } }); </script> Приведенный выше JavaScript просматривая событие прокрутки, где автоматически происходит удаление perekhod-1 класс и заменяет его perekhod-2 классом, где сами ставите, те картинки, что соответствуют теме. Демонстрация Второй пример: HTML Код <div id="smena-snimka" class="smena-snimka-1"></div> CSS Код .smena-snimka-1, .smena-snimka-2 { position: relative; background-size: cover; background-image: url('http://zornet.ru/ABVUN/Abaavag/zornet_ru_011.jpg'); background-position: center; min-height: 670px; transition: all 1s ease; } .smena-snimka-2 { background-image: url('http://zornet.ru/ABVUN/Abaavag/zornet_ru_022.jpg'); } JS Код <script> var mid = document.getElementById('smena-snimka'); var mid_off = mid.offsetTop - 150; window.addEventListener('scroll', function() { if (document.body.scrollTop > mid_off || document.documentElement.scrollTop > mid_off) { mid.classList.remove('smena-snimka-1'); mid.classList.add('smena-snimka-2'); } else { mid.classList.remove('smena-snimka-2'); mid.classList.add('smena-snimka-1'); } }); </script> Этом пример использует свойство offsetTop , которое возвращает расстояние элемента относительно значения offsetParent, которое идет только только для чтения, что происходит возвращение расстояние текущего элемента относительно вершины offsetParent узла. В самом CSS можете многое сделать оригинальное оформления фона, который отлично подойдет под контент. В этом мануале как раз подробно описано про актуальные расширенные функции, такие как множественные фоновые изображения, что меняется с прокруткой страниц на сайте. На счет адаптивности элемента, который идет виде картинки, то здесь все корректно выводит на большом мониторе, с переходом на самый малый мобильный экран, где просматривая демонстрацию, то больше похоже на шапку на отдельно созданную страницу. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |