» »

Анимация при прокрутке страницы на JS и CSS

Анимация при прокрутке страницы на JS и CSS

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

Все происходит при прокрутке в низ, если изначально берем горизонтальную панель в одной гамме, где указана ширина, и по центру выставлен заголовок. Только начнем ее опускать в низ, как панель автоматически изменяется и становится меньше, а сам заголовок уходит в левую сторону, и гамма цвета меняется.

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

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

Анимация во время прокрутки страницы

2. Это мы прокрутили или немного опустили страницу, и вот с широкого элемента автоматически перешел в менее по размеру, но все же читабельный.

Как сделать анимацию при прокрутке страницы

Приступаем к установке:

HTML

Код
<header><h1>Zornet.Ru</h1></header>
<img src="https://image.prntscr.com/image/Z-w9cp01QJWSjzhPZOuMwQ.jpg" width="779" height="1995" />

CSS

Код
header {
  text-align: center;
  font-size: 80px;
  line-height: 115px;
  height: 115px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
   
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
header.souldelokineg {
  position: fixed;
  font-size: 23px;
  line-height: 50px;
  height: 50px;  
  width: 100%;
  background: #4eaf27;
  text-align: left;
  padding-left: 15px;
}

/* Вспомогательные стили */
* {
  margin: 0;  
  padding: 0;  
  border: 0;  
  font-size: 100%;  
  font: inherit;  
  vertical-align: baseline;
}
header { display: block; }

JS

Код
$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
  $('header').addClass("souldelokineg");
  }
  else{
  $('header').removeClass("souldelokineg");
  }
});

Теперь у вас появилась возможность создавать любые манипуляции с HTML элементами страницы, что будет происходить во время прокрутки.

Демонстрация
05.10.2018 Просмотров: 157 Комментарий: (0)

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

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

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