Используем 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>


К divslide, на третий и четвёртый слайд добавим парочку изображений. Данные изображения помогут создать эффект погружения в 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)



комментарий
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
  1. Sallador пишет: | 13 сентября 2014 18:32 Последний раз был: -- | 1

    Проще верстать в Adobe\Adobe Muse. Да есть лишний код но для одностраничников к примеру это не особо критично


Интересное