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

Разместил ArtsWar, 17-07-2014, 17:25 / Просмотров: 914 / Комментариев: 1

Использование 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/javascript" src="/loadfiles/js/ajax/jquery.min_user-net.ru.js"></script> 
<script type="text/javascript" src="js/js.js"></script> 
<script type="text/javascript" src="js/jquery.stellar.min.js"></script> 
<script type="text/javascript" src="js/waypoints.min.js"></script> 
<script type="text/javascript" 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); 

  }); 

});

110_user-net.ru_src1.rar [399,09 Kb] (cкачиваний: 3)

Материалы по теме

комментарий

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

User-Net.RU » Веб мастеру » HTML » HTML5 » Используем Parallax для создания сайта

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

Материалы по теме

Интересное