Новогодний параллакс-эффект с jQuery
Karina | 11.12.2014
Параллакс-эффект сегодня необычайно популярен и обсуждаем. Мы не останемся в стороне и сегодня покажем вам, как можно легко украсить сайт таким эффектом, а в преддверии Нового года тематика выбрана соответствующая. Вы запросто сможете использовать этот пример для реализации собственных идей, которые не обязательно должны быть посвящены новогодней тематике. Приступим!
Демо Загрузить архив RAR (240 kB)
Часть HTML
HTML здесь очень простой – всего один блок div
с классом forest
и вложенные в него шесть блоков с элементами, которым, в свою очередь, также присвоены классы и указан коэффициент смещения.
<div class="forest"> <div data-offset="80" class="snowflakes parallax"></div> <div data-offset="40" class="snowflakesback parallax"></div> <div data-offset="50" class="trees parallax"></div> <div data-offset="30" class="treesback parallax"></div> <div class="snow"></div> <div class="ground"></div> </div>
Часть CSS
Добавляем стили: размещаем все объекты на странице так, как нам надо, устанавливаем фон. Обратите внимание, что все файлы картинок, которые применяются для параллакс-эффекта, должны иметь прозрачный фон, а не заполненный.
body { background: url(../img/background.png); overflow:hidden; } .forest { position:absolute; bottom:0; right:0; left:0; border-bottom: 50px solid #EEEDED; height:900px; overflow:hidden; } .forest > div { position:absolute; bottom:0; } .ground { width:100%; height:30px; background:#FFF; z-index:999; } .forest div.snow { width:1400px; height:37px; left:50%; bottom:20px; margin-left:-710px; background:url(../img/snow.png) no-repeat center; z-index:999; } .forest div.snowflakes { width:1400px; height:800px; left:50%; top:5px; margin-left:-710px; background:url(../img/snowflakes.png) no-repeat center; z-index:999; } .forest div.snowflakesback { width:1400px; height:800px; left:50%; top:1px; margin-left:-710px; background:url(../img/snowflakes-back.png) no-repeat center; z-index:1; } .forest div.trees { width:763px; height:285px; left:50%; margin-left:-398px; background:url(../img/christmas-trees.png) no-repeat center; z-index:100; } .forest div.treesback { width:763px; height:285px; left:50%; margin-left:-398px; background:url(../img/christmas-trees-back.png) no-repeat center; z-index:2; }
Часть jQuery
Третий шаг – скрипт анимации, которая будет срабатывать при движении курсора. Не забудьте подключить библиотеку jQuery.
$(window).on('mousemove', function(e) { var wh = $(window).width(); var ht = $(window).height(); var offsetX = 0.5 - e.pageX / wh; var offsetY = 0.5 - e.pageY / ht; $(".parallax").each(function(i, el) { var offset = parseInt($(el).data('offset')); var translate = "translate3d(" + Math.round(offsetX * offset) + "px," + Math.round(offsetY * offset) + "px, 0px)"; $(el).css({ '-webkit-transform': translate, 'transform': translate, 'moz-transform': translate }); }); });
Вот и всё колдовство. Применять такой параллакс-эффект можно для оживления веб-страницы, когда вы чувствуете, что ей не хватает изюминки. Желаем удачных экспериментов!
-
Такие клевые танцующие елочки))
Комментарии