ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Эффект параллакса верхней и нижней части

Эффект параллакса верхней и нижней части

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

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

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

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

Библиотека:

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

HTML

Код
<div id="scroll-animate">
  <div id="scroll-animate-main">
  <div class="wrapper-parallax">
  <header>
  <h1>ZORNET.RU</h1>
  </header>

  <section class="content">
  <h1>Content</h1>
  </section>

  <footer>
  <h1>Footer</h1>
  </footer>
  </div>
  </div>
</div>

CSS

Код
#scroll-animate {
  overflow: hidden;
}

#scroll-animate-main{
  width: 100%;
  left: 0;
  position: fixed;
}

#heightPage, #heightScroll{
  width: 10px;
  top: 0;
  position: absolute;
  z-index: 99;
}

#heightPage{
  left: 0;
}

#heightScroll{
  right: 0;
}

header{
  width: 100%;
  height: 100%;
  background: url(http://zornet.ru/ABVUN/Aba/detunis/bg-header.jpg) no-repeat 50% 50%;
  top: 0;
  position: fixed;
  z-index: -1;
}

footer {
  width: 100%;
  height: 300px;
  background: gray;
  bottom: -300px;
  position: fixed;
  z-index: -1;
}

.content{
  height: 1000px;
  min-height: 1000px;
  background: #ededed;
  position: relative;
  z-index: 1;
}

.wrapper-parallax {
  margin-top: 100%;
  margin-bottom: 300px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

h1{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica;
  font-size: 150px;
  color: #fff;
}

header h1{}

.content h1{
  line-height: 1000px;
  color: #999;
}

footer h1
{
  line-height: 300px;
}

header,
footer,
#scroll-animate-main
{
  -webkit-transition-property: all;
  -moz-transition-property: all;
  transition-property: all;

  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;

  -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

JS

Код
function scrollFooter(scrollY, heightFooter)
{
  console.log(scrollY);
  console.log(heightFooter);

  if(scrollY >= heightFooter)
  {
  $('footer').css({
  'bottom' : '0px'
  });
  }
  else
  {
  $('footer').css({
  'bottom' : '-' + heightFooter + 'px'
  });
  }
}

$(window).load(function(){
  var windowHeight = $(window).height(),
  footerHeight = $('footer').height(),
  heightDocument = (windowHeight) + ($('.content').height()) + ($('footer').height()) - 20;

  // Definindo o tamanho do elemento pra animar
  $('#scroll-animate, #scroll-animate-main').css({
  'height' : heightDocument + 'px'
  });

  // Definindo o tamanho dos elementos header e conteúdo
  $('header').css({
  'height' : windowHeight + 'px',
  'line-height' : windowHeight + 'px'
  });

  $('.wrapper-parallax').css({
  'margin-top' : windowHeight + 'px'
  });

  scrollFooter(window.scrollY, footerHeight);

  // ao dar rolagem
  window.onscroll = function(){
  var scroll = window.scrollY;

  $('#scroll-animate-main').css({
  'top' : '-' + scroll + 'px'
  });
   
  $('header').css({
  'background-position-y' : 50 - (scroll * 100 / heightDocument) + '%'
  });

  scrollFooter(scroll, footerHeight);
  }
});

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

Что такое параллакс?

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

Демонстрация
16 Сентября 2019 Загрузок: 1 Просмотров: 1022 Комментариев: (0)

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

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

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

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