Transformations css animées cross-browser avec jquery

Soyez le premier à donner votre avis sur cette source.

Vue 6 674 fois - Téléchargée 724 fois

Description

J'ai passé quelques heures à rendre se script compatible avec la plupart des grands navigateurs:

De façon native j'ai:
-- Firefox 3.5 et supérieurs
-- WebKit (Google Chrome et Safari)
-- Opera 10.50 et supérieurs

Avec une petite astuce (nommée TransformIE) même IE => 7.0 (j'ai pas pu tester sur la 6.0)
Comme l'indique le titre le script est basé sur jQuery et est en-fait une extension des fonctionnalités $.css() et $.animate() afin de permettre l'accès a la propriété css "transform", et plus particulièrement aux deux paramètre scale() (mise à l'échèle) et rotate() (rotation...)

Source / Exemple :


Dans le ZIP

Conclusion :


La base de mon script est le travail de Zachstronaut: http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

J'ai une page de projet correspondante (en anglais): http://playground.ygraphix.net/jq_opera_csstransform/

J'ai surtout rendu son travail compatible avec Opera, car j'ai voulu assurer la compatibilité des effets pour un projet en cours.

Encore un mot: n'abusez pas des transformations CSS ;)

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

pysco68
Messages postés
681
Date d'inscription
samedi 26 février 2005
Statut
Membre
Dernière intervention
21 août 2014
6
Merci pour ton test ;) Content que ça te plaise ^^

Bonne soirée,
Cordialement Pysco68
@karamel
Messages postés
1750
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2020
56
c'est bon sa marche j'ai telecharge sylvester a cette http://sylvester.jcoglan.com/#download mais c'est sur le rendu n'est pas extra mais c'est mieux que ce que j'avait imaginer et aussi j'ai fait le teste avec ie tester pour ie 6 et 7 et sa marche mais ce qui est étrange c'est que le rendu est meilleur qu'avec ie 8
pysco68
Messages postés
681
Date d'inscription
samedi 26 février 2005
Statut
Membre
Dernière intervention
21 août 2014
6
il te faut aussi sylvester (library js pour les calculs matriciels je crois), elle est nécessaire pour pouvoir faire les adaptations de coordonnées (les références de rotation ne ont pas les mêmes avec les filtres MS, qu'avec les transformations CSS....)

J'espère que ça t'aide! Mais comme dit, ne t'attends pas à un résultat parfait!
Cordialement Pysco68
@karamel
Messages postés
1750
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mars 2020
56
j'ai telechargé pb.transformie.js que j'ai inclu dans index.html mais ie me met des erreur aux lignes 84 et 91 ?
pysco68
Messages postés
681
Date d'inscription
samedi 26 février 2005
Statut
Membre
Dernière intervention
21 août 2014
6
Je n'ai pas "livré" transformeIE avec le ZIP, tu peux trouver le tout via le liens qui se trouve sur la page HTML dans le ZIP. Mais comme dit sur la page exemple, TransformIE n'est pas une solution propre, et tu verra qu'il y aura des sautillement etc qui ne sont pas sur la version d'origine.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.