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

Увеличение изображение при прокрутке CSS

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

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

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

Вид с проверки на мобильных аппаратах, где все выводит корректно:

Параллакс с эффектом увеличения с помощью JS

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

На странице в HEAD выставляем

Код

HTML

Код

<header class="kesignes">
  <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/amipsakilad/sadeculopas.jpg">
</header>
<main role="main">
  <div class="kaucon-benum">
  <h1>Заголовок</h1>
  <a href="http://zornet.ru/load/145" alt="Zoom on Scroll" target="_blank">Раздел предназначен для вебмастера</a>
  <p>Здесь краткое или первое описание под материал.</p>
  <p>Продолжение тематического описание.</p>
  <footer>
<p><a href="http://zornet.ru/" alt="Интересные решения для вебмастера" target="_blank">ZorNet.Ru — сайт для вебмастера</a></p>
</footer>
  </div>
</main>

CSS

Код

h1{
  font-size: 2.6rem;
  line-height: 2.6rem;
}
.kaucon-benum{
  margin: 0 auto;
  max-width: 90%;
  width: 735px;
}
main{
  padding: 1% 0;
  position: relative;
  background: #f5f5f5;
  box-shadow: 0px -10px 60px rgba(14, 14, 14, 0.25);
  height: 100%;
}
footer p{
  font-size: .8rem;
  font-weight: bold;
  color: #bdbaba;
}
footer a{color: #bdbaba;}
/* --- Important Pen Styles --- */

.kesignes{
  overflow: hidden;
  padding-bottom: 55%;
}
.kesignes img{
  position: fixed;
  top: 0%;
  left: 50%;
  max-width: 200%;
  width: 100%;
  transform: translateX(-50%);
}
@media (max-width: 667px) {
  h1{
  font-size: 1.8rem;
  line-height: 2.6rem;
  text-align: left;
  }
  .kaucon-benum{
  margin: 0 auto;
  max-width: 90%;
  width: 100%;
  height: 100%;
  text-align: justify;
  }
  .kesignes{
  overflow: hidden;
  padding-bottom: 75%;
  }
}

Код

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  $(".kesignes img").css({
  transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
  });
});

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

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

30 Декабря 2019 Загрузок: 3 Просмотров: 3388 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Похожие материалы

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

Комментарии: 1
Порядок вывода комментариев: Kosten 30 Декабря 2019 21:21¹ 0 Другой метод , это использовать свойство background-size, где изображение вашего героя является фоновой заливкой на контейнере. Возможно, вам придется пойти по этому пути, если вы хотите разрешить динамический контент внутри области заголовка, такой как заголовки или мета-пост. Свойство background-size имеет значение начальные 100%. Мы будем постепенно увеличивать это, когда страница прокручивается с использованием фрагмента jQuery, так же, как мы увеличили ширину изображения относительно его родительского элемента в первом методе. Hero Zoom на свитке с использованием размера фона Увеличить изображение с прокрутки страницы