ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация при прокрутке страницы на 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; }

Код

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

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

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

05 Октября 2018 Просмотров: 1757 Комментариев: (0)

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

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

Kosten

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