Автор

Эффект параллакса для сайта на JQuery

Эффект параллакса для сайта на JQuery


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

 

ДЕМО
ИСХОДНИКИ

 

Мы получили параллакс, который реагирует на вертикальное передвижение мыши, при этом некоторые элементы будут немного спрятаны за полем зрения посетителя, при движении они будут появляться.

HTML

Для начала нам необходимо по очередности подключить слоя изображений, для этого мы присваиваем классы, каждый класс будет иметь свои параметры в стилях:

<body class="b-page b-page_holiday-face b-page_holiday-bg_2">
<div data-id="1" class="holiday-face holiday-face_parallax">
<div data-offset="50" class="holiday-face__item holiday-face__item_5"></div>
<div data-offset="70" class="holiday-face__item holiday-face__item_4"></div>
<div data-offset="30" class="holiday-face__item holiday-face__item_3"></div>
<div data-offset="20" class="holiday-face__item holiday-face__item_2"></div>
<div data-offset="50" class="holiday-face__item holiday-face__item_1"></div>
</div>

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

CSS

Для начала мы устанавливаем общие параметры для контейнера заливаем фон необходимым нам цветом и указываем интервалы трансформации, затем мы устанавливаем изображение, которое будет основой для нашей картины:

.b-page_holiday-face .holiday-face_parallax {
background-color: #3f2a20;
transform: translate3d(0px, 0px, 0px);
}
.b-page_holiday-bg_2 .holiday-face {
background-image: url("/euKxNRPgI8_zZrSmcEBzKb7_0.jpg");
}
.holiday-face {
background: none no-repeat scroll center center / cover #3f2a20;
bottom: 0;
left: 0;
min-height: 540px;
min-width: 875px;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}

.holiday-face_parallax .holiday-face__item_5 {
background-image: url("/wKRfV_hlcMYTwL0tLdTfkfD4s.jpg");
}
.holiday-face_parallax .holiday-face__item_4 {
background-image: url("/ryCqbMR3r4SS8ndABXAOfQ-0I.png");
}
.holiday-face_parallax .holiday-face__item_3 {
background-image: url("/bH6gkCAQB_X8LNVg3ilwwhG40.png");
}
.holiday-face_parallax .holiday-face__item_2 {
background-image: url("/iFWNN9Fl1VGxk8SI9LGljdhUQ.png");
}
.holiday-face_parallax .holiday-face__item_1 {
background-image: url("/RVWSpixldgXfBaQy0T5Y3vaUE.png");
}
.b-page_holiday-bg_2 .holiday-face-words {
background-image: url("/S5_Vzf8MO5aH8C-FJY_GwZCBU.svg");
}

Затем мы по очередности заливаем картину изображениями, в результате чего мы получаем готовую картинку, разделенную по слоям, но это еще не все, нам необходимо все оживить.

JS

Нам осталась маленькая деталь, это подключения параллакса и его привязке к движению курсора мыши, для этого нам понадобится небольшой скрипт:

$(window).on('mousemove', function(e) {
var w = $(window).width();
var h = $(window).height();
var offsetX = 0.5 - e.pageX / w;
var offsetY = 0.5 - e.pageY / h;

$(".holiday-face__item").each(function(i, el) {
var offset = parseInt($(el).data('offset'));
var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)";

$(el).css({
'-webkit-transform': translate,
'transform': translate,
'moz-transform': translate
});
});
});

В результате мы получаем интересную картинку. Которая будет отзывчивой на движение курсора.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

 

А я пошел дальше!!!

Не вижу смысла писать еще один урок, так как это просто разные варианты.

В первую очередь я не смог найти в инете ничего достойного!!!

Мне не понравилось, что в данном уроке используются картинки одинаковые размером, а точнее у них одна ширина и высота, тоесть маленький самолет к примеру 50Х50рх. Эта картинка размером 1400Х1050рх. И еще один факт для меня как для веб-дизайнера, это не адаптивность к мобильным устройствам!

В общем пришлось потратить пол дня и написать немного своё! На мой взгляд получилось очень даже неплохо!

Для тех кто зашел на эту страницу с главной страницы сайта, тот наверное успел оценит, а для тех кто не видел жми на кнопку:

Демо страница сайта

Давайте рассмотрим всё по порядку:

HTML

Вывод объектов производился class="holiday-face__item holiday-face__item_1" где holiday-face__item это положение объекта на экране, а holiday-face__item_1 это сам объект. Пришлось для каждого объекта прописывать своё положение, так как все картинки разного размера и для адаптивности к планшетам и тд.

<div class="b-page b-page_holiday-face b-page_holiday-bg_2">
<div data-id="1" class="holiday-face holiday-face_parallax">

<div data-offset="27" class="holiday-face__item holiday-face__item_0"></div>
<div data-offset="3" class="holiday-face__item__zvezdi holiday-face__item_zvezdi"></div>
<div data-offset="8" class="holiday-face__item__saturn holiday-face__item_saturn"></div>
<div data-offset="14" class="holiday-face__item__luna holiday-face__item_luna"></div>
<div data-offset="25" class="holiday-face__item__zemla holiday-face__item_zemla"></div>
<div data-offset="12" class="holiday-face__item__oblako_small_2 holiday-face__item_oblako_small_2"></div>
<div data-offset="10" class="holiday-face__item__oblako_small holiday-face__item_oblako_small"></div>
<div data-offset="20" class="holiday-face__item__oblako_big holiday-face__item_oblako_big"></div>
<div data-offset="70" class="holiday-face__item__robot holiday-face__item_robot"></div>
<div data-offset="1200" class="holiday-face__item__roket holiday-face__item_roket"></div>

</div>
</div>

 

Ну и само сабой стили стали тоже более расширены:

CSS

.b-page_holiday-face .holiday-face_parallax {
    background-color:#0a2649;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
}
.holiday-face {
    background-color:#0a2649;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    display: block;
	overflow: hidden;
}

.holiday-face_parallax .holiday-face__item_zemla {
    background-image: url("../img/zemla.png");
}
.holiday-face_parallax .holiday-face__item_roket {
    background-image: url("../img/roket.png");
}
.holiday-face_parallax .holiday-face__item_robot {
    background-image: url("../img/robot.png");
}
.holiday-face_parallax .holiday-face__item_oblako_small {
    background-image: url("../img/oblaka_small.png");
}
.holiday-face_parallax .holiday-face__item_oblako_small_2 {
    background-image: url("../img/oblaka_small.png");
}
.holiday-face_parallax .holiday-face__item_saturn {
    background-image: url("../img/saturn_2.png");
}
.holiday-face_parallax .holiday-face__item_0 {
    background-image: url("../img/bg.jpg");
}
.holiday-face_parallax .holiday-face__item_zvezdi {
    background-image: url("../img/particles.png");
}
.holiday-face_parallax .holiday-face__item_luna {
    background-image: url("../img/luna.png");
}
.holiday-face_parallax .holiday-face__item_oblako_big {
    background-image: url("../img/oblaka_big.png");
}

.holiday-face-words__link {
    height: 100%;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
   
}
.holiday-face-words {
    background: none no-repeat scroll center top rgba(0, 0, 0, 0);
    height: 69px;
    left: -30px;
    position: absolute;
    right: -30px;
    top: 20%;
	width:100%;
}
.b-page_holiday-face .holiday-face_parallax .holiday-face__item {
    opacity: 1;
}
.holiday-face__item__oblako_big {
    background-repeat: no-repeat;
    position: absolute;
    bottom: -30px;
    right: 0px;
    width: 800px;
    height: 199px;
}
.holiday-face__item__oblako_small {
    background-repeat: no-repeat;
    position: absolute;
    bottom: 40px;
    right: 550px;
    width: 236px;
    height: 105px;
}
.holiday-face__item__oblako_small_2 {
    background-repeat: no-repeat;
    position: absolute;
    bottom: 90px;
    right: 30px;
    width: 236px;
    height: 105px;
}
.holiday-face__item__roket {
    background-repeat: no-repeat;
    position: absolute;
    bottom: -710px;
    right: 30px;
    width: 162px;
    height: 958px;
}
.holiday-face__item__robot {
    background-repeat: no-repeat;
    position: absolute;
    width:308px;
	height:384px; 
	right: 210px;
	bottom: 80px;
}
.holiday-face__item__zvezdi {
    background-repeat: no-repeat;
    position: absolute;
    width:100%;
	height:100%; 
	bottom: 10px;
	right: 10px;
	opacity: 0.9;
}
.holiday-face__item__luna {
    background-repeat: no-repeat;
    position: absolute;
    width:257px;
	height:259px; 
	top: 10px;
	left: 30%;
}
.holiday-face__item__zemla {
    background-repeat: no-repeat;
    position: absolute;
    width:900px;
	height:805px; 
	bottom: -30px;
	right: 0px;
}
.holiday-face__item__saturn {
    background-repeat: no-repeat;
    position: absolute;
    width:658px;
	height:517px; 
	bottom: -30px;
	left: -10px;
}

 

JS

И если вы посмотрите в содержимое скрипта, то там прописан class .holiday-face__item.

$(".holiday-face__item").each(function(i, el) {
var offset = parseInt($(el).data('offset'));
var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)";

Дополняем для работы скрипта на все объеты через запятую наши новые классы:

$(".holiday-face__item, .holiday-face__item__oblako_big, .holiday-face__item__roket, .holiday-face__item__robot, .holiday-face__item__oblako_small, .holiday-face__item__oblako_small_2, .holiday-face__item__zvezdi, .holiday-face__item__luna, .holiday-face__item__zemla, .holiday-face__item__saturn") .each(function(i, el) {
    var offset = parseInt($(el).data('offset'));
    var translate = "translate3d(0px," + Math.round(offsetY * offset) + "px, 0px)";

 

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

Всем удачи! И надеюсь мой урок пойдет Вам на пользу!!!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Эффект параллакса для сайта на JQuery

Если перед вами встала задача реализовать эффект вращения изображения на 360 градусов то вам будет полезен следующий плагин jQueryThreesixty - достаточно универсальный плагин который позволяет достичь эффект вращения изображений под любым углом. Такие эффекты вращения стали весьма популярны в интернет-магазинах, ведь позволяют дать полное представление о товаре. Кроме этого плагин является кроссбраузерным, а это весьма упрощает жизнь при разработке.


Эффект параллакса для сайта на JQuery

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


Эффект параллакса для сайта на JQuery

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


Эффект параллакса для сайта на JQuery

Еще одна полезная для сайтов вещь - вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript, вставить дату на страницу сайта можно очень просто. Я его очень часто применяю! На картинке (скриншот с действующего сайта)  усадьбы «Сказка»!


75 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close