Эффект параллакса мыши на фоне полного видового экрана - PullRequest
Новая
       0

Эффект параллакса мыши на фоне полного видового экрана

0 голосов
/ 01 ноября 2018

, поэтому я хочу создать фон, полностью заполняющий область просмотра, например: https://css -tricks.com / perfect-full-page-background-image /

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

Я просто немного застрял в том, как загрузить эти изображения - я загружаю их в теле HTML или CSS? И как мне сделать так, чтобы они накладывались друг на друга (я пробовал некоторые z-index, но безрезультатно).

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

div.home5 {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://www.w3schools.com/howto/img_avatar.png') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -5;
}

div.home4 {
  z-index: -4;
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNSvAuOC-j9NLym8Duah8cGaA_6vhov8KGH8E29j2HeHszAO1k') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

div.home3 {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqCM25IBWmfkxQ3Kg_q8_SxQlBIckh-alD0sf2GDwgjN0XUm9u') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -3;
}

div.home2 {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('https://www.soccercric.com/uploads/news/images/1309164275952e2e897191.png') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -2;
}

div.home1 {
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('http://www.gclogistics.ca/wp-content/uploads/2015/02/stefan-1-270x270.png') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}
<!-- 'Pages' -->
<div id="page1">
  &nbsp;
</div>
<div class="home5">
  &nbsp;
</div>
<div class="home4">
  &nbsp;
</div>
<div class="home3">
  &nbsp;
</div>
<div class="home2">
  &nbsp;
</div>
<div class="home1">
  &nbsp;
</div>

1 Ответ

0 голосов
/ 02 ноября 2018

Вы должны зафиксировать все div в position:fixed, а затем добавить все изображения в каждый div как background-image, это объединит все изображения друг в друга.

Теперь вы хотите добавить событие mousemove, которое перемещает все изображения, как эффект параллакса.

Вот код, который описывает. 

var currentX = '';
var currentY = '';
var movementConstant = 0.010;


$(document).mousemove(function(e) {
  if(currentX == '') 
    currentX = e.pageX;
  var xdiff = e.pageX - currentX;
  currentX = e.pageX;
  if(currentY == '') 
    currentY = e.pageY;
  var ydiff = e.pageY - currentY;
  currentY = e.pageY; 
  $('.parallax div').each(function(i, el) {
    var movement = (i + 1) * (xdiff * movementConstant);
    var movementy = (i + 1) * (ydiff * movementConstant);
    var newX = $(el).position().left + movement;
    var newY = $(el).position().top + movementy;
    $(el).css('left', newX + 'px');
    $(el).css('top', newY + 'px');
  });
});
html{
  overflow:hidden;
}
div{
  width:100vw;
  height:100vh;
  position:fixed;
  
}
.h1{
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_bg.jpg');
  background-repeat:no-repeat;
  background-size:cover;
}
.h2{
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_02.png');
  background-repeat:no-repeat;
  background-size:cover;
}
.h3{
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_man.png');
  background-repeat:no-repeat;
  position:fixed;
  margin-left:80%;
  top:80%;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="parallax">
      <div class="h1"></div>
      <div class="h2"></div>
      <div class="h3"></div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...