Mousemove effet de parallaxe se déplace de la position de la div
Je suis en train de créer un léger effet de parallaxe (je ne sais pas si vraiment il constitue la parallaxe, mais c'est une idée similaire). Où il y a quatre couches qui tous se déplacer légèrement différents taux lorsque la souris se déplace.
J'ai trouvé un excellent exemple qui propose quelque chose de similaire à ce que je veux:
http://jsfiddle.net/X7UwG/2/
Il réalise cela en changeant l'arrière-plan position sur la #landing-content
div lorsque la souris se déplace.
$(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');
});
});
Cependant, je ne suis pas un moyen pour obtenir que cela fonctionne pas sur un background-position
maj, mais sur un div
position de changement. E. g position:relative;
et top:x
de sorte que la div elle-même se déplace autour d'un peu.
Mon raisonnement est que la div contenant les animations CSS éléments de sorte qu'il doit être un div avec le contenu à l'intérieur, pas une image d'arrière-plan.
Toutes les solutions pour cela, utilisez le code ci-dessus?
oui, le fond de la div doit se déplacer, mais la diapositive couche doit rester statique.
voici un exemple avec trois couches. Cependant, ils sont encore des images de fond. J'ai besoin d'eux pour être divs avec le contenu à la place. jsfiddle.net/X7UwG/851
Quelqu'un peut-il m'expliquer pourquoi cette question est marqué "Cette question ne semble pas être sur la programmation"
OriginalL'auteur Francesca | 2015-06-10
Vous devez vous connecter pour publier un commentaire.
Comment sur l'utilisation de jQuery.offSet() à la place? Vous pouvez ajuster la math/valeurs, mais je pense que ça devrait vous mettre dans la bonne direction.
JSFiddle: http://jsfiddle.net/X7UwG/854/
Salut, merci pour cette. Il a fonctionné à merveille. Cependant, je vais avoir un petit problème. Le
#bottom-layer
semble être de façon large en comparaison à la#top-layer
et il fait un irritant "snap" et les sauts de 300 pixels. Vous pouvez le voir ici: digitalshowcase.somethingbigdev.co.royaume-uni/#contact - lorsque la souris est centrée à l'écran de la couche supérieure des spectacles autour de 0,5 px de chaque voie. Mais le bas de la couche de spectacles autour de 250px chaque chemin! Les valeurs de décalage sont de 0,1 et 0,3, ce qui ne devrait pas sauterIl ne voulait pas le faire sur ma version de test. Je ne peux pas savoir pourquoi en bas de la couche est de sauter autant? digitalshowcase.somethingbigdev.co.uk/cats-test.html
Voici un exemple pour montrer l'extrême différence. bas de décalage est de 0,1. le dessus est compensée à 0.3. La souris est presque centré dans la page. Couche supérieure montre raisonnable de décalage. Couche de fond montre massive offset: i.imgur.com/wsPGR5o.png
Je suis de l'affichage de votre lien de contact en Chrome et ça fonctionne bien (ce qui semble être sympa quand même), sauf lorsque la souris est sur la forme. L'événement n'est pas déclenché. Il commence à tirer encore une fois la souris en feuilles de forme rectangle et en raison de l'écart de l'endroit où elle dernier de feu et où la souris est maintenant, il en résulte un "saut". Si c'était moi, je n'aurais pas le mousemove sur chaque élément avec la .par classe, mais plutôt un élément qui couvre l'ensemble de la zone que vous souhaitez la parallaxe de se produire. Qui vont se retrouver avec de meilleures performances au moins.
OriginalL'auteur Josh Bilderback