begin process at 2012 05 27 20:39:51
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY

TRANSFORMATIONS CSS ANIMÉES CROSS-BROWSER AVEC JQUERY


 Information sur la source

Note :
Aucune note
Catégorie :Effets Classé sous :transformation, css, effet, rotation, scale Niveau :Initié Date de création :10/04/2010 Vu / téléchargé :3 429 / 269
Auteur : pysco68

Ecrire un message privé
Site perso
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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...)


 Conclusion

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

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

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 ;)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture BUG FIX PNG TRANSPARENT SOUS IE 6 (MOOTOOLS)
Toutes les sources de pysco68

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip ROTATION D'UNE IMAGE, ANIMATION par william voirol
Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip IMPRIMER UNE PARTIE DE PAGE NON SÉLECTIONNABLE par lecurieux41

Commentaires et avis

Commentaire de kazma le 11/04/2010 13:42:00 administrateur CS

malheureuse il ne fonctionne sur 8 sinon pour opera aucuns soucis

Commentaire de pysco68 le 11/04/2010 13:48:49

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.

Commentaire de kazma le 11/04/2010 20:19:15 administrateur CS

j'ai telechargé pb.transformie.js que j'ai inclu dans index.html mais ie me met des erreur aux lignes 84 et 91 ?

Commentaire de pysco68 le 11/04/2010 20:25:10

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

Commentaire de kazma le 11/04/2010 21:27:27 administrateur CS

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

Commentaire de pysco68 le 11/04/2010 22:54:37

Merci pour ton test ;) Content que ça te plaise ^^

Bonne soirée,
Cordialement Pysco68

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Effet progressif lors du déployement d'un menu déroulant en CSS [ par qntoinOo ] Bonjour,J'aimerais savoir comment il est possible de faire un effet progressif sur un menu déroulant en CSS (Je me sers balise <LI><UL> to Besoin d'aide pour CSS [ par PROTECTIONNISTE ] Bonjou,Je bloque sur un probleme en CSSj'ai un bloc conteneur d'une taille aleatoire.à l'interieur un sous conteneur lui fais 100% de la largeur du co slide et patch IE [ par JackNUMBER ] bonjour à tous !!alors voici mon petit problème : j'utilise un effet de slide avec la bibliothèque de script YUI (par Yahoo!) et l'effet ne rend pas l petit probleme css [ par gaucyril ] Bonjour, je suis en train de mettre en page un site internet en css. Mais j'ai une petite question. Donc voila j'ai une liste de résultat en php qui a Effet utilisé sur Facebook [ par thegeniusdexter21 ] Salut tout le monde !Je suis entrain de cherche un site ou g p trouver les effet et script utilisé sur Facebook par exemple l'interactivité pour l'enr CSS selon OS [ par Tredorgoth ] Bonsoir. Je suis sous Mac Os et la plupart de mes amis sous Windows. Mon site utilise la police Trebuchet MS qui rend extrêmement bien chez moi mais q Detecter resolution d'ecran et charger un .css en fonction [ par 0zar4 ] Yop !Alors voila j'ai une question, je suis actuelement entrain de développer mon site, j'ai de solides connaissances en HTML/CSS, j'attaque un peu de background-position-x + ie6 + jquery [ par sn4ch ] Bonjour a tous, Aider moi a survivre au week-end: J'ai un site, a base de css et de jquery - http://www.thegraphicdesignschool.eu - qui fonctionne a


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,530 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)