jQuery Girl
  1. jQuery Girl
  3. Comment faire pivoter une image lors du défilement à l’aide d’une transformation CSS?
Intereting Posts
Fichier JSON lu avec le plugin Select2 Service AngularJS Informer Les fonctions jquery ne fonctionnent pas sur les éléments dom chargés de manière asynchrone SCRIPT87: argument invalide Comment est-ce que je passe ce tableau js à mon contrôleur MVC 3? Renvoyer la réponse de PHP à Jquery en utilisant Ajax Bonjour tout le monde ne fonctionne pas correctement en HTML avec jointjs? Comment puis-je vérifier si une page est chargée complètement ou non dans le pilote Web? jQuery: Pourquoi append un $ à un nom de variable? SignalR client avec plusieurs connexions Les données de publication AJAX jQuery sont nulles dans le contrôleur api web c Accéder à la variable de vitesse avec javascript Problème de message de validation jQuery datepicker Ajax jquery async return value Comment append une classe en fonction de l’URL actuelle

Comment faire pivoter une image lors du défilement à l’aide d’une transformation CSS?

Je ne sais pas comment utiliser jQuery, mais j’ai une propriété CSS3: transform:

il pourrait être utilisé avec jQuery? 

transform:rotate; -ms-transform:rotate; -webkit-transform:rotate;

JSFIDDLE

Essayez ce violon:

http://jsfiddle.net/kDSqB/

Ce n’est pas précis à 100% de faire la rotation complète, mais je pense que la nuit sera l’environnement du violon.

Le code ici: 

 var $cog = $('#cog'), $body = $(document.body), bodyHeight = $body.height(); $(window).scroll(function () { $cog.css({ 'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)' }); });

Voici un exemple simple de jQuery, vérifiez le JSFiddle modifié:

http://jsfiddle.net/g3k6h/5/

CSS gérera les rotations> 360 et <0, donc je ne me suis même pas soucié de le faire et n'a pas ajusté la valeur de rotation en fonction de la distance parcourue. Je ne craignais pas non plus d'essayer de comptabiliser une rotation complète afin qu'elle soit mieux adaptée à la vitesse et à la distance parcourues. Cette solution dépend de jQuery mais pourrait facilement être réalisée sans elle. 

 $(function() { var rotation = 0, scrollLoc = $(document).scrollTop(); $(window).scroll(function() { var newLoc = $(document).scrollTop(); var diff = scrollLoc - newLoc; rotation += diff, scrollLoc = newLoc; var rotationStr = "rotate(" + rotation + "deg)"; $(".gear").css({ "-webkit-transform": rotationStr, "-moz-transform": rotationStr, "transform": rotationStr }); }); })

J’ai commencé avec la solution OneOfOne et y ai ajouté des animations. Lancez l’animation sur l’événement de scroll , mouseup la avec la mouseup . http://jsfiddle.net/g3k6h/4/ 

 var rotation = 0; var interval; var gear = $('.gear'); function animate() { gear.css('transform', 'rotate('+rotation+'deg)'); rotation += 10; rotation %= 360; } function startAnim() { if (!interval) { interval = setInterval(animate, 100); } } function stopAnim() { clearInterval(interval); interval = null; } $(document).scroll(startAnim).mouseup(stopAnim);

La réponse de jamesgauld est similaire à la mienne, sauf que le montant de la rotation est basé sur la position du défilement, la mienne continuant de tourner pendant que vous faites défiler, c’est ainsi que j’ai compris la question.

Quelque chose comme ça, jQuery devrait utiliser le bon préfixe css3. http://jsfiddle.net/g3k6h/2/ 

 $(function() { $('.gear').click(function() { $(this).css('transform', 'rotate(30deg)'); }); });