Все для веб-дизайнера
Как создать фон сайта с эффектом параллакса
В нынешнем веб-дизайне очень важна детализация элементов и четко сформированный дизайн. Это позволяет сделать ваш ресурс более читаемым, соответственно это привлекает посетителей, ведь хороший сайт делает сам себе рекламу. В последнее время стал широко популярным эффект параллакса, который позволяет создать иллюзию объемного дизайна не прибегая к моделированию специальных программах. В данном уроке мы рассмотрим как создать простой фон сайта с эффектом параллакса, который будет реагировать на манипуляциями мишки.
Данный фон отлично подойдет для стилизации шапки сайта, который не будет нагружать ресурс, но тем самым добавляя изюминку в дизайн. И так, приступим.
Шаг 1. HTML
Для начала нам необходимо создать простую разметку в которой формируется вложение DIV-ов (один в другой) с указанием в стилях размеров и фоновой картинки.
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <div id="main"> <div class="wrapper outer"> <div class="wrapper inner"> </div> </div> </div> </body> ... |
Для реализации задумки нам понадобится плагин jQuery Parallax 0.2. Преимущество в том, что данный плагин работает во всех последних, по моему мнению конечно, популярных браузерах:
- Chrome
- Firefox
- IE8
- Opera
Шаг 2. JavaScript
Теперь зададим параметры для слоем, и скорости манипуляции изображений, все изображения будут двигаться с разной скоростью, что добавит ощущение объемности:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$('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);
Вот и все. Готово!
Интересно:
| Опубликовал admin 25.07.2012 в 22:59, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...