Используем Parallax для создания сайта

Использование parallax берёт своё начало ещё с 80-х годов, применялся в интерфейсах игр.

Parallax. Каков он в действии.
Ниже представлены примеры, которые во всей красе демонстрируют эффект parallax.

Так должна выглядеть структура папок:

Плагины необходимые для реализации данного эффекта:
Stellar.js

Waypoints

jQuery Easing

Вёрстка HTML:
Для начала необходимо в index.html прописать доктайп и создать секцию. В данной секции будит содержаться CSS Reset
и файл styles.css. Так же без использования дополнительной библиотеки jQuery не обойтись. Ещё не забыть про три плагина jquery.stellar.min.js, waypoints.min.js и jquery.easing.1.3.js.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Применение parallax при создании сайта от User-Net.ru</title> 

<link rel="stylesheet" type="text/css" href="http://user-net.ru/loadfiles/scriptscss/parallax/reset-min_user-net.ru.css"> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 

<script type="text/jаvascript" src="/loadfiles/js/ajax/jquery.min_user-net.ru.js"></script> 
<script type="text/jаvascript" src="js/js.js"></script> 
<script type="text/jаvascript" src="js/jquery.stellar.min.js"></script> 
<script type="text/jаvascript" src="js/waypoints.min.js"></script> 
<script type="text/jаvascript" src="js/jquery.easing.1.3.js"></script> 

</head>

Далее необходимо разместить логотип Envato, он будит зафиксирован. Создаём класс envatologo:

<img class="envatologo" src="images/envatologo.png">

Создание слайдов
Слайдов будит четыре, и все они имеют одинаковую разметку:

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5"> 
  <a class="button" data-slide="2" title=""></a> 
</div><!--End Slide 1-->

Для того чтобы задать стиль ко всем слайдам, используем класс slide. Каждому слайду задаётся уникальный порядковый id. Применяем data attribute HTML5 и назовем его data-slide. Необходим ещё data attribute – data-stellar-background-ratio.

Каждому из слайдов будит назначена кнопка, кроме последнего, это позволит нам переключаться между слайдами. Добавляем атрибут data-slide с значением следующего слайда...

<span class="slideno">Slide 1</span>

К div`у slide, на третий и четвёртый слайд добавим парочку изображений. Данные изображения помогут создать эффект погружения в parallax. Убедитесь в том что изображения будут корректно отображаться на мониторах абсолютно разных размеров.

<div class="wrapper"> 

  <img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt=""> 
  <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt=""> 
  <img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt=""> 
  <img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt=""> 
  <img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt=""> 
  <img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt=""> 

</div>

CSS

К css необходимо прикрепить шрифт BEBAS, используя @font-face. После чего необходимо задать ширину и высоту html и body на 100%.

@font-face { 
  font-family: 'BebasRegular'; 
  src: url('font/BEBAS___-webfont.eot'); 
  src: url('font/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'), 
  url('font/BEBAS___-webfont.woff') format('woff'), 
  url('font/BEBAS___-webfont.ttf') format('truetype'), 
  url('font/BEBAS___-webfont.svg#BebasRegular') format('svg'); 
  font-weight: normal; 
  font-style: normal; 
  }  

html,body{ 
  font-family: 'BebasRegular'; 
  width:100%; 
  height:100%; 
}

Навигационное меню

Для навигации назначена позиционирование - fixed. Т.е. положение меню зафиксировано на одном месте. Оно сдвинуто на 20px вниз, а так же применили z-index на 1, чтобы данная панель была наверняка поверх всего прочего.

.navigation { 
  position:fixed; 
  z-index:1; 
  top:20px; 
} 
.navigation li { 
  color:#333333; 
  display:block; 
  padding: 0 10px; 
  line-height:30px; 
  margin-bottom:2px; 
  font-weight:bold; 
  -webkit-transition: all .2s ease-in-out; 
  border-bottom:1px solid black; 
  text-align:left; 
  width:53px; 
} 
.navigation li:hover, 
.active { 
  font-size:25px; 
  cursor:pointer; 
  width:100px!important; 
}

Логотип envato выравнивается по центру монитора и поверх всего сайта.

.envatologo { 
  position:fixed; 
  top:50%; 
  left:50%; 
  width:446px; 
  margin-top:-41px; 
  margin-left:-223px; 
  z-index:1; 
}

Для слайдов назначим параметр background-attachment fixed. Применялись обои Philipp Seiffert. Скачать их можно здесь
.

.slide { 
  background-attachment: fixed; 
  width:100%; 
  height:100%; 
  position: relative; 
  box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3); 
} 
.wrapper { 
  width:960px; 
  height:200px; 
  margin:0 auto; 
  position:relative; 
} 
.slideno { 
  position:absolute; 
  bottom:0px; 
  left:0px; 
  font-size:100px; 
  font-weight:bold; 
  color:rgba(255,255,255,0.3); 
}

Для кнопки внизу сайта применяется класс .button, кнопка осуществляет переход к следующему слайду. Размещается снизу, по центру каждого слайда.

.button{ 
  display:block; 
  width:50px; 
  height:50px; 
  position:absolute; 
  bottom:0px; 
  left:50%; 
  background-color:#333333; 
  background-image:url(../images/arrow.png); 
  background-repeat:no-repeat; 
} 
.button:hover{ 
  background-color:#494949; 
  cursor:pointer; 
}

Для изображения второго слайда требуется селектор nth-child(n).
Задаётся правило для каждой картинки, по мере их появления на мониторе.

/****************************** 
  SLIDE 1 
*******************************/ 
#slide1{ 
  background-color:#5c9900; 

} 
/****************************** 
  SLIDE 2 
*******************************/ 
#slide2{ 
  background-color:#005c99; 

} 
#slide2 img:first-child{ 
  position:absolute; 
top: 700px; 
left: -150px; 
} 
#slide2 img:nth-child(2){ 
  position:absolute; 
  top:300px; 
  left:100px; 
} 
#slide2 img:nth-child(3){ 
  position:absolute; 
  top:600px; 
  left:300px; 
} 
#slide2 img:nth-child(4){ 
  position:absolute; 
  top:400px; 
  left:300px; 
} 
#slide2 img:nth-child(5){ 
  position:absolute; 
  top:600px; 
  right:300px; 
} 
#slide2 img:nth-child(6){ 
  position:absolute; 
  top:600px; 
  right:300px; 
} 
#slide2 img:nth-child(7){ 
  position:absolute; 
  top:400px; 
  right:100px; 
} 
#slide2 img:nth-child(8){ 
  position:absolute; 
  top:100px; 
  right:300px; 
}

Следующий слайд - третий, имеет схожую структуру, что и предыдущий:

/****************************** SLIDE 3 *******************************/ 
#slide3 { 
  background-color:#b6c10b; 
} 
#slide3 img:first-child { 
  position:absolute; 
  top: 700px; 
  left: 300px; 
} 
#slide3 img:nth-child(2){ 
  position:absolute; 
  top:100px; 
  left:100px; 
} 
#slide3 img:nth-child(3){ 
  position:absolute; 
  top:150px; 
  left:300px; 
} 
#slide3 img:nth-child(4){ 
  position:absolute; 
  top:450px; 
  left:300px; 
} 
#slide3 img:nth-child(5){ 
  position:absolute; 
  top:200px; 
  right:300px; 
} 
#slide3 img:nth-child(6){ 
  position:absolute; 
  top:100px; 
  right:300px; 
}

Для четвёртого слайда мы назначим только фоновое изображение, в отличии от предыдущих. Используем параметр background-size:cover.

/****************************** 
  SLIDE 4 
*******************************/ 

#slide4{ 
  background-image:url(../images/Slide4/desktop4.jpg); 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover; 
} 
#slide4 .parallaxbg{ 
  position:absolute; 
  right:40px; 
  top:40px; 
  font-size:28px; 
  color:rgba(51,51,51,0.3); 
}

jQuery
За счёт jQuery и оживают всё то, что мы хотим воплотить. Код прокомментирован:

jQuery(document).ready(function ($) { 

  //инициализация Stellar.js 
  $(window).stellar(); 

  //Кэш некоторых переменных 
  var links = $('.navigation').find('li'); 
  slide = $('.slide'); 
  button = $('.button'); 
  mywindow = $(window); 
  htmlbody = $('html,body'); 

  //Установка плагина waypoints 
  slide.waypoint(function (event, direction) { 

  //кэш переменной параметра data-slide  
  dataslide = $(this).attr('data-slide'); 

  //Если пользователи переходят вверх по сайту, то изменять внешний вид навигации 
  if (direction === 'down') { 
  $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active'); 
  } 
  // else Если пользователи переходят вниз по сайту, то изменять внешний вид навигации and 
  else { 
  $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active'); 
  } 

  }); 

  //Отменяем waypoints для первого слайда 
  mywindow.scroll(function () { 
  if (mywindow.scrollTop() == 0) { 
  $('.navigation li[data-slide="1"]').addClass('active'); 
  $('.navigation li[data-slide="2"]').removeClass('active'); 
  } 
  }); 

  //Анимация перехода между слайдами 
  function goToByScroll(dataslide) { 
  htmlbody.animate({ 
  scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top 
  }, 2000, 'easeInOutQuint'); 
  } 

  //Когда пользователь нажимает на ссылку в навигации, получаем значение параметра data-slide слайда и передаем его функции goToByScroll 
  links.click(function (e) { 
  e.preventDefault(); 
  dataslide = $(this).attr('data-slide'); 
  goToByScroll(dataslide); 
  }); 

  //Когда пользователь нажимает на кнопку перехода, получаем значение параметра data-slide кнопки и передаем его функции goToByScroll 
  button.click(function (e) { 
  e.preventDefault(); 
  dataslide = $(this).attr('data-slide'); 
  goToByScroll(dataslide); 

  }); 

});

[attachment=13:110_user-net.ru_src1.rar]

ArtsWar
17.07.2014
199
1

Скачать бесплатно 10 русских декоративных шрифтов для дизайнеров

30-03-2019, 17:29, Шрифты

Модуль упрощенного заказа 1.0.0

29-03-2019, 23:44, OpenCart 3.0 модули

10 онлайн сервисов для создания логотипов

30-01-2019, 14:33, Сервисы

Цветовые решения для баннерной шапки uCoz

22-09-2014, 22:10, Скрипты для uCoz

Модуль нанесения водяных знаков iWatermark

23-07-2014, 00:27, OpenCart модули

[not-allow-comm]

Комментарии к статье отключены администрацией.

Комментарии отключены..

[/not-allow-comm]

Яндекс Апдейты

File engine/modules/yandex_update.php not found.

Используем Parallax для создания сайта

Скачать бесплатно 10 русских декоративных шрифтов для дизайнеров

Модуль упрощенного заказа 1.0.0

10 онлайн сервисов для создания логотипов

Цветовые решения для баннерной шапки uCoz

Модуль нанесения водяных знаков iWatermark

Комментарии к статье отключены администрацией.

Твой комментарий..

Яндекс Апдейты

Комментарии

Полезные ссылки

Информация

Услуги/Работа