Transitions d’images 2.0


Original: http://www.brothercake.com/site/resources/scripts/transitions/

 

Version 2.0 — 8 mai 2011

 

Drapeau de CameroonClick pour une démo au hasard. Transitions d’images 2.0 est une collection élégante d’effets de transition, qui peut ajouter une touche de classe à tout échange d’image ! Version 2.0 introduit un tas de nouvelle transformation des effets étonnants, qui peuvent tordre, échelle et incliner l’image à toutes sortes d’angles funky !

Flag of Cameroon

Cette version ajoute également de nouvelles capacités de synchronisation, qui le rendent trivial aux transitions de séquence ensemble, diaporamas et autres automatismes. Un réaménagement complet de ce script répandu et populaire, Image Transitions 2.0 fonctionne dans tous les navigateurs modernes, y compris le support complet pour IE6 et plus. Quoi de neuf dans la Version 2.0

 

Click for a random demo. 2.0

 

Plusieurs démos et instantanée des exemples de Code
Utilisez le formulaire de la démo ci-dessous pour sélectionner une transition et expérimenter avec ses options, vous obtiendrez une démo instantanée du code échantillon et de l’effet de le recréer :

 

Flag of Germany

 

 

 

Obtenez le script

 

Télécharger le fichier zip [328K] et décompressez-le dans le répertoire de votre site, copiez le script dans votre page ; Il peut aller n’importe où :

 

 

Une fois que vous avez le script en place, vous serez en mesure d’utiliser ses méthodes (comme expliqué dans le manuel de Transitions d’Image). Les appels de méthode peuvent provenir de n’importe où sur la page et n’avez pas à attendre qu’onload — mais ils doivent évidemment être après les deux le script lui-même et l’ou les images que vous manipulez. Le plus simple et sans doute la meilleure chose à faire, est de mettre tous vos scripts à la fin de la section de <body>.

 

L’archive de téléchargement contient deux versions du script — un pour le développement et l’autre pour la production :

 

  • « transitions.debug.js »
Cette version du script peut être utilisée au cours du développement initial — il a la gestion d’erreur complet et convivial d’informations de débogage, vous donnant des détails sur toutes les données non valides passés à chacune des méthodes du script. Cette version est également abondamment commentée, pour votre intérêt et de la référence.
  • « transitions.js »
Il s’agit de la principale version de production — à utiliser lors du déploiement d’une application ou un site en ligne. Cette version est agressivement compressée pour en faire un beaucoup plus petit téléchargement et ne fournit aucune information de débogage ou de gestion des erreurs.

 

Vous pouvez également télécharger un script personnalisé, qui est optimisé afin d’inclure uniquement le code, vo

us devez exécuter les transitions souhaitée. Comme pour la version de production principale, les scripts personnalisés sont fortement compressés pour utilisation en production et ne fournissent pas les informations de débogage :

<  

Manuel de Transitions d’image

 

Dans un premier temps, vous devriez vérifier le manuel de base, appelé à l’aide du Script, qui vous montrera comment utiliser les méthodes de transition, comment utiliser le script pour précharger les images et de modifier sa configuration globale. Il y a aussi des informations pour vous aider à comprendre les que messages de débogage de script.

 

  1. Méthodes de transition
  2. Méthodes utilitaire
  3. Propriétés publiques
  4. Messages de débogage
Il y a également un guide plus avancé, un développement ultérieur, qui met l’accent sur la façon de synchroniser les transitions, comme déclenchant les uns des autres pour créer des effets intéressants de deux étages. Il vous montrera également comment synchroniser des séquences plus longues et plus complexes, pour des choses comme les diaporamas, les présentations et les scripts de rotation de l’image.
  1. Définir le rappel de transition
  2. Synchronisation de plusieurs transitions
Appui de navigateur

 

Le script fournit deux niveaux de prise en charge navigateur — celles qui soutiennent chaque transition et celles qui soutiennent tous sauf les transitions axée sur la transformation. Mais lorsqu’une transition axée sur la transformation est exécutée dans un navigateur qui ne les supporte pas, il le fera encore une base image-swap comme son comportement de secours (qui est aussi ce qui se passe lorsque les images sont désactivées).

 

Ceux-ci ou navigateur-versions ultérieures prend en charge chaque transition :
  • Opera 10.5
  • Firefox 3.5 (ou équivalent Gecko 1.9.1)
  • Safari 4 / Chrome 2 (ou équivalent Webkit 531)
  • Internet Explorer 5.5

Ces versions de navigateurs prennent en charge tout sauf les transformations :

  • Opéra 9 – 10.1
  • Firefox 3.0 (ou équivalent Gecko 1.9.0)

 

Quoi de neuf dans la Version 2.0

 

Transitions d’images 2.0 a été complètement ré-écrit de la terre vers le haut, avec de nombreuses améliorations, améliorations et corrections et une foule de nouvelles fonctionnalités intéressantes (pouce en haut) (thumb-up)

 

La mise à niveau majeure est la gamme de nouvelles transitions :
  • Grow() est une transition mise à l’échelle à la transformation-basée avec 15 différents effets.
  • Twist() est une transition axée sur la transformation de rotation avec 16 effets différents.
  • Skew() est une transition de distorsion géométrique transformation-basée avec 30 effets différents.
  • Slide() est une transition avec 13 différents effets de pousser ou d’axée sur la position coulissante.
  • bars() crée plusieurs barres à base de clip, places et transitions de damier avec 21 effets de base différentes et des centaines de permutations !
Il y a aussi des nouvelles méthodes utilitaire utile :
  • La méthode cache() peut précharger n’importe quel nombre d’images.
  • La méthode pictures() peut vous indiquer si les images sont activés dans le navigateur.
  • La méthode define() est utilisée pour configurer les comportements globaux.
Et tout un tas d’autres nouveautés et mises à jour :
  • Nouvelle fonction de rappel asynchrone pour toutes les méthodes de transition, le rend facile de synchroniser les transitions pour les diaporamas et autres automatismes.
  • Nouvel argument « fade en profondeur » pour tous les transitions (sauf disparaître d’elle-même), permet d’ajouter un fondu de l’opacité à toute transition, en plus de son effet principal. La profondeur du fondu est configurable de 0 à 100 %.
  • Nouveau « inverser » argument pour toutes les transitions (sauf fade), qui vous permet d’inverser l’effet de transition. Par exemple, au lieu d’essuyage de gauche à droite et portant sur l’image d’origine avec la nouvelle, il serait essuyer de droite à gauche et révéler la nouvelle image sous.
  • Nouvelle valeur « RND » pour le type d’animation, peut être passé à l’une des transitions (sauf fade) pour spécifier un effet aléatoire.
  • Autocorrectrice horloge produit temps de transition super précis, afin que la durée indiquée est dang-près exactement ce que vous obtenez. La calendrier dérive typique est seulement de 0,2 % (par exemple. une transition de deux secondes prendrait en fait 2.004s).
  • Super précis de positionnement pour les images superposées, évite les erreurs d’arrondi paraissant parfois dans la version précédente.
  • Automatiquement détecte lorsque les images sont désactivés dans le navigateur et ajuste son comportement en fonction de cette condition de secours.
  • Validation détaillée et rapport d’erreurs pour tous les arguments de méthode, lorsque vous utilisez la version debug du script.
  • Syntaxe universelle et le typage de données, le rend facile à apprendre et facile à générer par programmation.