Brick Brick - 28 days ago 8
HTML Question

How to add more images to parallex image code

I came across a code that works fine on tumblr , I just wanted to know how to add more images to it ? It's a Parallax code where the image moves slightly w/ the movement of the mouse , but I wanted 3 images to be present instead of one . I've tried adding two images and playing with the Javascript , but instead one image wouldn't move and the other one would . I want all three images to move with the cursor and have a smooth movement to them . Like this :
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>

DBS DBS
Answer

The example you linked will work correctly for multiple images if you apply the bg class (you can rename that if you're not using the images as backgrounds).

This is bit messy as I hack'n'slashed the existing demo page, but it demonstrates 3 images all moving:

$(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>

Comments