web-dev-qa-db-fra.com

Déplacez l'image d'arrière-plan de la souris sur (Parallax simple)

Je voudrais que l'image d'arrière-plan bouge légèrement sur les axes X et Y lorsque la souris est dans le DIV "contenu d'atterrissage", elle devrait bouger avec le mouvement de la souris. il devrait se déplacer en sens inverse. PAR EXEMPLE. La souris se déplace vers le bas, l'image "landing-content" se déplace vers le haut.

[~ # ~] 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/

Toute aide serait appréciée.

jqueryhtmlhtml5css3parallax
11
Simon

Vous pouvez utiliser l'événement mousemove, comme indiqué dans ce violon. 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');
});

Ce n'est qu'un exemple rapide, vous devrez jouer avec les chiffres vous-même. ;)

26
Tom Bowers

Vous pourriez y arriver comme ça

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

5
MLeFevre

Vérifiez ce violon. Je pense que vous trouverez ce que vous voulez. http://jsfiddle.net/Aveendra/uXPkE/

$('#landing-content').mousemove(function(e){
    $(this).css('background-position',''+e.pageX/10+'px '+e.pageY/10+'px');
});
2
Evo SL