Transformations css animées cross-browser avec jquery
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...)
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 ;)
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
- Transformations css animées cross-browser avec jquery
- Cross-database references are not implemented: ✓ - Forum Visual Basic 6
- Css map ✓ - Forum PHP
- Rogner image css ✓ - Forum Javascript / DHTML
- Exemple de page d'accueil html et css ✓ - Forum Graphisme/design
- Css div - Forum Javascript / DHTML
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.