Déplacer l'image de fond au survol de la souris (Seule la Parallaxe)
Je tiens à rendre l'arrière-plan de l'image se déplacer légèrement sur l'axe X et Y lorsque la souris est dans la "landing-contenu" DIV, il doit se déplacer avec le mouvement de la souris.
il devrait aller de l'inverse. Par exemple. Déplacement de la souris vers le bas, "l'atterrissage-contenu" de l'image 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 apprecated.
OriginalL'auteur Simon | 2013-10-17
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser l'événement mousemove, comme le montre ce violon. http://jsfiddle.net/X7UwG/
C'est juste un exemple rapide, cependant, vous aurez à jouer avec les chiffres vous-même. 😉
Merci, mais l'image n'est pas "couvrir" les div de plus. de toute façon de résoudre ce problème?
Pour un mobile de l'image de fond que vous aurez besoin pour être en dire de 20 à 30% plus grand que la div je pense.
cela peut-il être fait et "background-size: cover;" encore être appliqué?
Je ne vois pas pourquoi pas, mais je serais certainement le tester dans certains navigateurs différents pour être sûr.
OriginalL'auteur Tom Bowers
Vous pourriez obtenir comme ceci
http://jsfiddle.net/uMk7m/2/
Faire de la div petits, ou utiliser une image plus grande. Vous êtes à l'aide de la propriété
background-size: cover;
qui rend l'image fit le conteneur, vous pouvez simplement le supprimer comme ceci jsfiddle.net/uMk7m/3, mais cela dépend de ce que vous êtes après.C'est la mise à jour de violon jsfiddle.net/X7UwG/2 - de Toute façon, je peux centrer l'image dans le milieu sur les axes x et y?
pas facilement, je ne pense pas. Vous pouvez avoir l'original css état
background-position:center;
, et puis je pense que vous feriez manuellement ajouter le centre du décalage en mousemove, comme jsfiddle.net/X7UwG/3OriginalL'auteur MLeFevre
Vérifier ce violon. Je pense que vous trouverez ce que vous voulez.
http://jsfiddle.net/Aveendra/uXPkE/
désolé, j'ai oublié d'ajouter la bibliothèque jquery. jsfiddle.net/Aveendra/uXPkE/2. celui-ci devrait fonctionner.
OriginalL'auteur Evo SL