Чтение RSS каналов

Статьи

Статьи

Категории

Устройство
Устройство
Обучающее руководство
Темы
Темы
Оформление и компоненты дизайна
Модули
Модули
Использование и изготовление модулей
Блоки
Блоки
Использование и изготовление блоков
Документация
Документация
Описание функций и модулей
Информация
Информация
Полезная информация для администратора

Общее количество: 59 страниц в 8 категориях

Создаём простой Parallax эффект в теме сайта

Оформление и компоненты дизайна
В последнее время стал очень популярным параллакс эффект прокрутки страницы. Суть заключается в том, что содержание страницы прокручивается с разной скоростью, создавая ощущение перспективы и следовательно глубины. В этой статье показан основной принцип создания такого эффекта для тем и шаблонов оформления CMS.


Разметка HTML
Для начала нам понадобятся некоторая разметка 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;
}

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>

В архиве каталога файлов проекта лежит модифицированная тема Parallax от olevpa, установка как обычно: распаковать содержимое архива в папку с темами на сервере и в администрации проекта выбрать её.
4.6
5
Назад

Дополнительно по данной категории

Нет комментариев. Почему бы Вам не оставить свой?
Вы не можете отправить комментарий анонимно, пожалуйста войдите или зарегистрируйтесь.
Хотите опробовать SLAED CMS в действии?

Технологии

PHP MySQL HTML 5 CSS 3 jQuery jQuery UI

Контакты

  • D-49179, Deutschland
    Ostercappeln, Im Siek 6
  • +49 176 61966679

  • https://slaed.net
Идеи и предложения
Обратная связь