Создаём простой Parallax эффект в теме сайта
В последнее время стал очень популярным параллакс эффект прокрутки страницы. Суть заключается в том, что содержание страницы прокручивается с разной скоростью, создавая ощущение перспективы и следовательно глубины. В этой статье показан основной принцип создания такого эффекта для тем и шаблонов оформления CMS.
Разметка HTML
Для начала нам понадобятся некоторая разметка HTML, содержимое страницы будет помещено в section, а также понадобится еще div, который будет содержать фон.
На разметке особо внимание не заостряем, так как она нужна лишь для прокрутки страницы. Переходим к CSS.
Правила CSS
Правил CSS, необходимых для создания эффекта параллакса, на самом деле мало. В первую очередь необходимо установить фоновое изображение в div и зафиксировав, потому что действия прокрутки будут применяться с помощью JQuery. Затем мы устанавливаем ширину 100% и высоту 300%, чтобы div был больше, чем высота страницы. Мы позиционируем его в верхнем левом и, наконец, дать ему Z-индекс -1 убедиться, что она оказывается под текстом.
jQuery
От JQuery мы хотим добиться прокрутки фона на более низкой скорости, чем прокрутка основного контента. Для этого создадим функцию которая будет вызываться во время прокрутки страницы:
Сначала помещаем в переменную количество пикселей прокрутки от начала страницы. Теперь, чтобы сделать прокрутку фона с меньшей скоростью, добавляем к свойству top блока div значение переменной умноженное на коэффициент (чем ближе к 0 тем медленнее).
И последний штрих, эта функция вызывается во время прокрутки страницы.
Добавляем кнопки вниз-вверх
В архиве каталога файлов проекта лежит модифицированная тема Parallax от olevpa, установка как обычно: распаковать содержимое архива в папку с темами на сервере и в администрации проекта выбрать её.
Для начала нам понадобятся некоторая разметка HTML, содержимое страницы будет помещено в section, а также понадобится еще div, который будет содержать фон.
<div class="bg"></div>
На разметке особо внимание не заостряем, так как она нужна лишь для прокрутки страницы. Переходим к CSS.
Правила CSS
Правил CSS, необходимых для создания эффекта параллакса, на самом деле мало. В первую очередь необходимо установить фоновое изображение в div и зафиксировав, потому что действия прокрутки будут применяться с помощью JQuery. Затем мы устанавливаем ширину 100% и высоту 300%, чтобы div был больше, чем высота страницы. Мы позиционируем его в верхнем левом и, наконец, дать ему Z-индекс -1 убедиться, что она оказывается под текстом.
.bg {
background: url('bg.jpg') repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}
background: url('bg.jpg') repeat;
position: fixed;
width: 100%;
height: 300%;
top:0;
left:0;
z-index: -1;
}
jQuery
От JQuery мы хотим добиться прокрутки фона на более низкой скорости, чем прокрутка основного контента. Для этого создадим функцию которая будет вызываться во время прокрутки страницы:
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*0.2)+'px');
}Сначала помещаем в переменную количество пикселей прокрутки от начала страницы. Теперь, чтобы сделать прокрутку фона с меньшей скоростью, добавляем к свойству top блока div значение переменной умноженное на коэффициент (чем ближе к 0 тем медленнее).
И последний штрих, эта функция вызывается во время прокрутки страницы.
$(window).scroll(function(e){
parallax();
});Добавляем кнопки вниз-вверх
<script>
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*0.2)+'px');
}
</script>
<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="templates/simple/images/parallax/go_up.png" alt="UP" title="Up">
</a>
<a style='position: fixed; bottom: 15px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="templates/simple/images/parallax/go_down.png" alt="Down" title="Down">
</a>
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*0.2)+'px');
}
</script>
<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="templates/simple/images/parallax/go_up.png" alt="UP" title="Up">
</a>
<a style='position: fixed; bottom: 15px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="templates/simple/images/parallax/go_down.png" alt="Down" title="Down">
</a>
В архиве каталога файлов проекта лежит модифицированная тема Parallax от olevpa, установка как обычно: распаковать содержимое архива в папку с темами на сервере и в администрации проекта выбрать её.
