» »

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

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

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

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

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

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

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

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

Код
<link rel="stylesheet" href="https://dl.dropbox.com/s/w9ywuzlvqvv7kln/codepen-template.scss">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

JS

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

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

Демонстрация
2019-12-30 Загрузок: 2 Просмотров: 615 Комментарий: (1)

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

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

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

Комментарий: 1
Kosten
Kosten 2019-12-30 21:211
0
Другой метод , это использовать свойство background-size, где изображение вашего героя является фоновой заливкой на контейнере. Возможно, вам придется пойти по этому пути, если вы хотите разрешить динамический контент внутри области заголовка, такой как заголовки или мета-пост.

Свойство background-size имеет значение начальные 100%. Мы будем постепенно увеличивать это, когда страница прокручивается с использованием фрагмента jQuery, так же, как мы увеличили ширину изображения относительно его родительского элемента в первом методе.

Hero Zoom на свитке с использованием размера фона
Увеличить изображение с прокрутки страницы
avatar