Как создать фон сайта с эффектом параллакса

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Данный фон отлично подойдет для стилизации шапки сайта, который не будет нагружать ресурс, но тем самым добавляя изюминку в дизайн. И так, приступим.

Шаг 1. HTML

Для начала нам необходимо создать простую разметку в которой формируется вложение DIV-ов (один в другой) с указанием в стилях размеров и фоновой картинки.

...
 <body>
 <div id="main">
 <div class="wrapper outer">
 <div class="wrapper inner">
 </div>
 </div>
 </div>
 </body>
...

...

<body>

</div>

</body>

...

Для реализации задумки нам понадобится плагин jQuery Parallax 0.2. Преимущество в том, что данный плагин работает во всех последних, по моему мнению конечно, популярных браузерах:

Chrome
Firefox
IE8
Opera

Как создать фон сайта с эффектом параллакса | RUDEBOX

Шаг 2. JavaScript

Теперь зададим параметры для слоем, и скорости манипуляции изображений, все изображения будут двигаться с разной скоростью, что добавит ощущение объемности:

$('div.parallax').parallax({
 'elements': [
 {
 'selector': 'body',
 'properties': {
 'x': {
 'background-position-x': {
 'initial': 0,
 'multiplier': 0.1,
 'invert': true
 }
 }
 }
 },
 {
 'selector': 'div.outer',
 'properties': {
 'x': {
 'background-position-x': {
 'initial': 50,
 'multiplier': 0.02,
 'unit': '%'
 }
 }
 }
 },
 {
 'selector': 'div.inner',
 'properties': {
 'x': {
 'background-position-x': {
 'initial': 0,
 'multiplier': 0.3
 }
 }
 }
 }
 ]
});

$('div.parallax').parallax({

'elements': [

{

'selector': 'body',

'properties': {

'x': {

'background-position-x': {

'initial': 0,

'multiplier': 0.1,

'invert': true

}

{

'selector': 'div.outer',

'properties': {

'x': {

'background-position-x': {

'initial': 50,

'multiplier': 0.02,

'unit': '%'

}

{

'selector': 'div.inner',

'properties': {

'x': {

'background-position-x': {

'initial': 0,

'multiplier': 0.3

}

]

});

div.parallax – главный контейнер, его можно тоже двигать;
initial – начальная позиция;
multiplier – множитель или скорость движения;
invert – инвертировать движение или нет;
unit – еденица измерения (по умолчанию в px);

Вот и все. Готово!

Интересно:

Print article

Опубликовал admin 25.07.2012 в 22:59, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

Yura Nebykov

Цікаво 🙂
Naimanski

Спасибо. Очень помогло.
Bulldog

Здравствуйте. Я сайт по вашим урокам леплю, но иногда не совсем понятно. Хотела спросить где именно эти коды прописывать? Первый между body /body стили понятно, а сам скрипт куда втыкать??
- Salam
  
  Между тегами body, только заключить скрипт в теги
  - Олег
    
    чтоб не спутать пихай скрипт перед «», а лучше всего создать файлик с названием ну, допустим, somescript.js и в прописать
Дмитрий

Здравствуйте.

А не подскажете, как можно реализовать такое:
Надо, чтобы изображения на фоне не двигались относительно друг друга, а просто одна картинка сменялась на другую, но именно по скроллу или по движению мыши. Т.е. сами картинки должны быть неподвижными.
Всего три кадра.
- Smotritel
  
  Здравствуй, на сайте был урок уже про то что ты говоришь, смотри прокрутка с эффектом параллакса.
  - Дмитрий
    
    Спасибо. Я просмотрел все посты про параллакс. Но там не то. В принципе, мне сам эффект трехмерности или наложения вообще не нужен. Нужно только, чтобы действие происходило от движения мыши или от скролла.
    Никакая анимированность не нужна. Допустим, установлен изначально на фоне 1 кадр, двигаем мышью влево — появляется кадр 2 (ни сверху, ни снизу, просто вместо кадра 1). Двигаем вправо — появляется кадр 3, вместо кадра 2.
    В какую сторону двигать мышь — не важно. Можно вообще скроллом.
Евгений

Здравствуйте, очень эффектно. А на ПрестаШоп вна нестандартном шаблоне реально реализовать такое?
- Сергей
  
  Здравствуйте, вполне, единственное, что нужно учесть, это версии jQuery, из-за разных версий, может получится конфликт, нужно выбирать оптимальную, чтобы все работало.
  - Евгений
    
    Да, наверное у меня знаний не хватит дл этого. Придется «наслаждатся» белым фоном). Очень понравилась ваша статья. У меня шаблон зеленый, с вашим фоном смотрелся бы отлично. Спс за ответ.
Матвей

Добрый день! Как сделать расположение фона не сверху а снизу?
Лев Тигренко

ни чего не готово.
Статья на 50 % неполная.
Подключение CSS и JQuery где?
Сама структура CSS где?
- Варс
  
  Если ты не знаешь как сделать то что ты написал, то лучше закрой ноут и никогда не занимайся веб-дизайном) или читай уроки для начинающих

Как создать фон сайта с эффектом параллакса

Шаг 1. HTML

Шаг 2. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Опрос блога

Наши партнеры

Популярные статьи

Как создать фон сайта с эффектом параллакса

Шаг 1. HTML

Шаг 2. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Опрос блога

Наши партнеры

Популярные статьи