11

I would like to make the background image move slightly on the X and Y axis when the mouse is in the "landing-content" DIV, it should move with the movement of the mouse. it should move inverse. EG. Mouse move down, "landing-content" image moves up.

HTML

<div id="landing-content">
<section class="slider"> 
<img src="http://i.imgur.com/fVWomWz.png"></img>
</section>
</div>

CSS

#landing-content {
overflow: hidden;
background-image: url(http://i.imgur.com/F2FPRMd.jpg);
width: 100%;
background-size: cover;
background-repeat: no-repeat;
max-height: 500px;
border-bottom: solid;
border-bottom-color: #628027;
border-bottom-width: 5px;
}

.slider {
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding-top: 200px;
max-width: 1002px;
}

.slider img {
width: 80%;
padding-left: 10%;
padding-right: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}

JSFiddle http://jsfiddle.net/uMk7m/

Any help would be apprecated.

Simon
  • 653
  • 3
  • 14
  • 25

3 Answers3

27

You could use the mousemove event, as shown in this fiddle. http://jsfiddle.net/X7UwG/

$('#landing-content').mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 6);
    var amountMovedY = (e.pageY * -1 / 6);
    $(this).css('background-position', amountMovedX + 'px ' + amountMovedY + 'px');
});

It's just a quick example though, you'll have to play with the numbers yourself. ;)

Tom Bowers
  • 4,951
  • 3
  • 30
  • 43
  • Thankyou, but the image does not 'cover' the div anymore. any way to fix this? – Simon Oct 17 '13 at 10:57
  • For a movable background image you will need it to be say 20-30% bigger than the div I would think. – Tom Bowers Oct 17 '13 at 11:09
  • 1
    can this be done and "background-size: cover;" still be applied? – Simon Oct 17 '13 at 11:10
  • I don't see why not, but I'd definitely test it in some different browsers to be sure. – Tom Bowers Oct 17 '13 at 11:14
  • Any idea how you would do this? – Simon Oct 17 '13 at 11:25
  • It's possible that "background-size: cover" will scale down a larger image. You may not be able to use it. If the native size of the image is larger than the background though, you might be able to do without it. – Tom Bowers Oct 17 '13 at 11:40
  • background-size: should be set to 110%. is it bossable to make the laptop move a few px when the background does? – Simon Oct 17 '13 at 12:17
  • Yes. The CSS may need changing for the laptop image though. For instance with position absolute, or relative. You'd need to select the laptop, and adjust it's position as required. E.g. `$('.slider img').css('left', amountMovedX + 'px');` – Tom Bowers Oct 17 '13 at 12:23
  • Thanks tom, is there a way to make it move with ease? – Simon Oct 17 '13 at 13:51
  • I'm not sure what you're asking. Modifying the css left and top properties is a good and easy way to move DOM elements. – Tom Bowers Oct 17 '13 at 14:02
  • You can still use background-size:cover if you scale that element simultaniously (`transform:scale(1.05)` or alike). Also consider using `transform:translate3d(...)` for the actual moving as it forces hardware acceleration on many modern browsers – Jonathan Aug 09 '15 at 14:36
5

You could achieve it like this

$(document).ready(function(){
  $('#landing-content').mousemove(function(e){
    var x = -(e.pageX + this.offsetLeft) / 20;
    var y = -(e.pageY + this.offsetTop) / 20;
    $(this).css('background-position', x + 'px ' + y + 'px');
  });    
});

http://jsfiddle.net/uMk7m/2/

SubjectCurio
  • 4,702
  • 3
  • 32
  • 46
  • Thankyou, but the image does not 'cover' the div anymore. any way to fix this? – Simon Oct 17 '13 at 10:58
  • @Simon Make the div smaller, or use a bigger image. You're using the property `background-size: cover;` which makes the image fit the container, you could just remove that like this http://jsfiddle.net/uMk7m/3/, but it depends on what you're after. – SubjectCurio Oct 17 '13 at 11:05
  • This is the update fiddle http://jsfiddle.net/X7UwG/2/ - Any way i can center the image in the middle on the x and y axis? – Simon Oct 17 '13 at 11:43
  • @Simon not easily I don't think. You can have the original css state `background-position:center;`, and then I think you'd manually have to add the center offset during mousemove, like so http://jsfiddle.net/X7UwG/3/ – SubjectCurio Oct 17 '13 at 12:19
2

Check this fiddle. I think you will find what you want. http://jsfiddle.net/Aveendra/uXPkE/

$('#landing-content').mousemove(function(e){
    $(this).css('background-position',''+e.pageX/10+'px '+e.pageY/10+'px');
});
N8FURY
  • 9,490
  • 3
  • 14
  • 14
  • sorry, I forgot to add the jquery library. http://jsfiddle.net/Aveendra/uXPkE/2/. this one should work. – N8FURY Oct 17 '13 at 12:57