All geek questions in one place

Parallax with 1 image

I want to use the parallax effect with only one image. It can be done?

Actually, this is really not parallax, I have one big image in the center of the screen, so when I move the mouse to the left, I want the image to move slightly to the right, move the mouse to the right, the image moves slightly to the left, moving the mouse upwards the image moves down, moving the mouse down the image moves up.

I think I saw this effect before, but I forgot where I see it. I really appreciate the help. Thanks

+3
source share
5 answers

Here's how to do it, you can customize and improve it. Not tested in all browsers, works well on firefox. Hooray!

jsFiddle.

<html>
<head>
<script>
document.onmousemove = shiftImageXY;

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;
}

</script>

</head>
<body>
<div style='height:300px;clear:both;text-align:center;'></div>
<div style='height:800px;width:800px;text-align:center;'>
<img id='myImage' src='http://img516.imageshack.us/img516/7355/icon.png' style='position:absolute' />
</div>

</body>

+3

, github :

https://github.com/cameronmcefee/plax

:

$('#plax-octocat').plaxify({"xRange":40,"yRange":40});
$('#plax-earth').plaxify({"xRange":20,"yRange":20,"invert":true});
$('#plax-bg').plaxify({"xRange":10,"yRange":10,"invert":true});
$.plax.enable();

invert:true , .

+2

, :

, , . ,

----------
|image   |
|--------|


then you draw it in two parts

-------
age   |im
------|
      ^
      |

      this being the start of the second draw.

.

, .

0

jQuery, , .

Image parallax can create depth-like parallax using a single image or image collection

http://plugins.jquery.com/project/imageparallax

But I think that maybe Background Parallax is what you really want - so the background moves at a different speed in a scroll, for example, on Android home screens ...

http://plugins.jquery.com/project/backgroundparallax

0
source

A small link is always better than a long discussion;)

Check out the github 404 page!

0
source

Source: https://habr.com/ru/post/1790623/

More articles:


All Articles