Баннер для сайта с эффектом параллакса на JS

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

Шаг 1. HTML
Для начала нам необходимо вывести все слоя для отображения, для этого у нас есть следующие параметры:

Код
<div class='banner'>
  <div id="parallxWrapper">
<div class="parallxBackground" data-bind="attr: { style:'-webkit-transform:perspective(1000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg);transform:perspective(1000px) rotateY(' + relativeMouse.x() + 'deg) rotateX(' + relativeMouse.y() + 'deg)' }">
  <div class="parallxLayerLogo"></div>
  <div class="parallxLayerRStar"></div>
  <div class="parallxLayerShooter"></div>
  </div>
  </div>
  </div>

Шаг 2. CSS
С помощью стилей мы установим параметры наложения изображений для каждого слоя, для этого нам понадобится позиционирование и относительное перемещение изображений по двум основным осям:

Код
html { height:100%; }
body {
min-height: 100%;
height: auto !important;
margin:0px;
}
.banner {
background-color: black;
}
#parallxWrapper {
margin:auto;
height:540px;
width:1000px;
}
.parallxBackground {
height:100%;
background-image:url("GSqh8aA.jpg");
border-radius:10px;
padding:10px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallxLayerLogo {
width:300px;
height:225px;
margin-top:50px;
margin-left:50px;
background-image:url("9A9KbR8.png");
position:absolute;
-webkit-transform:translateZ(90px);
-webkit-transition: all 0.2s;
transform:translateZ(90px);
transition: all 0.2s;
}
.parallxLayer:hover {
-webkit-transform:scale(1.05);
-webkit-transform:translateZ(30px);
transform:scale(1.05);
transform:translateZ(30px);
cursor:pointer;
}
.parallxLayerRStar{
width:100px;
height:90px;
margin-left:880px;
margin-top:450px;
float:right;
background-image:url("Mh37eRt.png");
position:absolute;
-webkit-transform:translateZ(20px);
transform:translateZ(20px);
}
.parallxLayerShooter{
width:1000px;
height:694px;
float:right;
background-image:url("YWCpfik.png");
position:absolute;
-webkit-transform:translateZ(50px);
transform:translateZ(50px);
}
.parallxLayerRStar:hover {
-webkit-transform:scale(1.05);
-webkit-transform:translateZ(30px);
transform:scale(1.05);
transform:translateZ(30px);
cursor:pointer;
}
h2, .h2 {
font-size: 30px;
}
h1, h2, h3 {
margin-bottom: 10px;
margin-top: 20px;
}
.lead {
font-weight: 200;
line-height: 1.4;
margin-bottom: 20px;
}
body {
color: #333333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.col-md-8 {
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}

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

Шаг 3. JS
Последний шагом нам необходимо подключить управление курсивом и добавить несколько аспектов анимации для баннера:

Код
var parallx = null;
var demoCount = 0;
  function Parallx() {
  var self = this;
  $("body").mousemove(function(e) {
parallax.mouseX(e.pageX);
  parallax.mouseY(e.pageY);
});
  self.sensitivityMultiplier = ko.observable(0.03);
  self.wrapperOffset = $('#parallxWrapper').offset();
  self.wrapperCenter = {
  x:ko.computed(function() { return self.wrapperOffset.left + ($('#parallxWrapper').width()/2) }, this),
  y:ko.computed(function() { return self.wrapperOffset.top + ($('#parallxWrapper').height()/2) }, this)
  };
  self.mouseX = ko.observable(0);
  self.mouseY = ko.observable(0);
  self.relativeMouse = {
  x:ko.computed(function() { return (self.mouseX() - self.wrapperCenter.x()) * self.sensitivityMultiplier() }, this),
  y:ko.computed(function() { return ((self.mouseY() - self.wrapperCenter.y()) * -1) * self.sensitivityMultiplier()}, this)
  };
  self.origin = {
  x:ko.computed(function() { return ((self.mouseX())/$( window ).width()) * 100 }, this),
  y:ko.computed(function() { return ((self.mouseY())/$( window ).height()) * 100 }, this)
  };
  };
$(document).ready(function() {
  parallax = new Parallx();
  ko.applyBindings(parallax);
setInterval(function() {
  if(demoCount < 130){
  parallax.mouseX(parallax.mouseX() + 10);
  demoCount+=1;
  }
  }, 40);
});

Для данного баннера использовались изображения игры GTA V, но фантазия ограничивается лишь вами!

  • FalleN

  • 3252

  • 1

  • 263
Теги: jQuery, паралакс, 3D

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!