Как добавить дополнительные изображения в код parallax image

Я наткнулся на код, который отлично работает на tumblr, я просто хотел узнать, как добавить больше изображений к нему ? Это код параллакса, в котором изображение слегка перемещается с движением мыши , но я хотел, чтобы вместо одного изображения было 3 . Я пытался добавить два изображения и играть с Javascript , но вместо этого один образ не будет двигаться, а другой будет . Я хочу, чтобы все три изображения перемещались с помощью курсора и имели плавное движение к ним . Вроде этого:
http://www.jqueryscript.net/demo/Interactive-Background-Parallax-Effect-With-jQuery-CSS3/

<div style='height:30px;clear:both;text-align:center;'>Mouse over image area.</div>
<div style='height:400px;width:400px;text-align:center;'>
<img id='myImage' src='http://img516.imageshack.us/img516/7355/icon.png' style='position:absolute' />

<script>
var tempX = 0;
var tempY = 0;
var oldTempX = 0;
var oldTempY = 0;
var IE =  !!(window.attachEvent&&!window.opera);

function shiftImageXY(e) {
 if (IE) { 
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
 } else {  
tempX = e.pageX;
tempY = e.pageY;
 }  
 img = document.getElementById('myImage');
 speedFactorDamping = 0.1; // change this for faster movement
 xdir = (tempX - oldTempX) ;
 ydir = (tempY - oldTempY) ;
 parallexX = -xdir*speedFactorDamping;
 parallexY = -ydir*speedFactorDamping;
 currX = parseInt(img.offsetLeft);
 currY = parseInt(img.offsetTop);

 img.style.left = (currX + parallexX) + 'px';
 img.style.top = (currY + parallexY) + 'px';
 oldTempX = tempX;
 oldTempY = tempY;
 return true;
}

 document.onmousemove = shiftImageXY;


</script>

1 ответ

  1. Пример, который вы связали, будет работать правильно для нескольких изображений, Если вы применяете bgкласс (вы можете переименовать его, если вы не используете изображения в качестве фона).

    Это немного грязно, как я hack’n’slashed существующей демо-страницы, но он демонстрирует 3 изображения все перемещение:

    $(document).ready(function() {
      var lFollowX = 0,
        lFollowY = 0,
        x = 0,
        y = 0,
        friction = 1 / 30;
    
      function moveBackground() {
        x += (lFollowX - x) * friction;
        y += (lFollowY - y) * friction;
    
        translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
    
        $('.bg').css({
          '-webit-transform': translate,
          '-moz-transform': translate,
          'transform': translate
        });
    
        window.requestAnimationFrame(moveBackground);
      }
    
      $(window).on('mousemove click', function(e) {
        var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
        var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
        lFollowX = (20 * lMouseX) / 100;
        lFollowY = (10 * lMouseY) / 100;
      });
    
      moveBackground();
    });
    .wrapper {
      width: 200px;
      height: 200px;
      position: absolute;
      z-index: -1;
      overflow: hidden;
    }
    .wrapper1 {
      top: 20px;
      left: 20px;
    }
    .wrapper2 {
      top: 300px;
      left: 20px;
    }
    .wrapper3 {
      top: 20px;
      left: 300px;
    }
    .bg {
      top: -20px;
      left: -20px;
      width: 240px;
      height: 240px;
      position: absolute;
      z-index: -1;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
    .bg1 {
      background-image: url("https://unsplash.it/1800/1600?image=1000");
    }
    .bg2 {
      background-image: url("https://unsplash.it/1800/1600?image=1001");
    }
    .bg3 {
      background-image: url("https://unsplash.it/1800/1600?image=1002");
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div class="wrapper wrapper1">
      <div class="bg bg1"></div>
    </div>
    <div class="wrapper wrapper2">
      <div class="bg bg2"></div>
    </div>
    <div class="wrapper wrapper3">
      <div class="bg bg3"></div>
    </div>