Plus de 20 démonstrations montrant des effets JQuery avancés
Il y a peu de temps, Flash était l'une des principales technologies utilisées par les concepteurs Web pour ajouter de l'interactivité à un site Web.
Depuis l'introduction de l'iPad, avec l'absence de Flash Player, le monde du développement accélère l'utilisation de technologies alternatives à Flash, telles que jQuery, Ajax et autres.
Bien que Flash reste un outil très puissant et utile, qui fonctionne très bien dans de nombreux cas, plusieurs des effets que les concepteurs Web sont habitués à créer dans Flash peuvent être tout aussi facilement implémentés à l'aide de jQuery.
Voici 21 démonstrations en ligne qui montrent la puissance de jQuery pour créer des effets avancés et une interactivité pouvant rivaliser avec Flash.
1. Flip! Un plugin jQuery
Cette démo imite la technique de retournement de carte populaire qui peut faire pivoter un élément sur 360 degrés autour de son propre axe x ou y.
2. plugin jQuery Quicksand
Ceci est un excellent plugin pour trier un tableau d'éléments / icônes sur une page avec de jolis effets de fondu entrant / sortant et d'animation.
3. ImageFlow
Cette visionneuse d'images est similaire à l'interface CoverFlow d'Apple qui est devenue si familière dans leurs différents produits et applications.
4. Construire une carte interactive avec jQuery au lieu de Flash
Cette démo rejoint la puissance de jQuery avec Ajax pour vraiment créer une interface engageante.
5. Conseils de mise en place avec jQuery & CSS3
En cliquant sur les symboles "+", vous obtenez des informations supplémentaires avec un bel effet d’animation.
6. Galerie Zoomer
Dans cette démo, ce qui semble être un statique Galerie d'images est doté d'une interactivité supplémentaire en utilisant un effet de zoom multicouche lors du survol d'une image.
7. jQuery Circulate
Cette démo montre l’effet Flash très utilisé qui consiste à encercler une image autour d’une page - le tout en utilisant jQuery.
8. Effet Zoom arrière photo
Cette démo est d'une simplicité trompeuse, mais après un examen plus approfondi, vous constaterez qu'il existe plusieurs couches de la complexité de l'effet de zoom arrière.
9. Boîtes coulissantes et légendes avec jQuery
Ici, nous pouvons voir comment des transitions puissantes peuvent être créées avec jQuery, une technique autrefois réservée aux développeurs Flash.
10. CSS3 Lightbox Gallery
Ce plugin semble avoir été écrit spécifiquement pour les médias sociaux. Glisser et déposer une photo par-dessus la "zone de partage" ouvrira une fenêtre modale qui peut être l'interface permettant d'appeler une API via AJAX, permettant à l'utilisateur de partager une photo sur Flickr, Twitter, Facebook et d'autres sites.
11. Faire un effet de photoshoot avec jQuery & CSS
Bien que cette démo puisse sembler étonnante à première vue, elle pourrait être un outil très puissant pour travailler avec de grandes images lorsqu'elle est associée à un stockage local AJAX ou HTML5.
12. Navigation à bulles impressionnante
Ici, le développeur fait bon usage des transitions de couleurs et de l’animation pour produire un menu très attrayant et interactif.
13. Belle navigation dans l'image de fond
Dans cette démonstration, chaque action utilisateur déclenche plusieurs transitions qui agissent toutes pour immerger complètement l'utilisateur dans l'interface.
14. AviaSlider
AviaSlider utilise des effets de transition classiques de type Flash pour améliorer ce qui semble être une interface de curseur standard.
15. Diaporama image de fond
Les arrière-plans animés sont l’un des domaines où Flash dominait la conception Web. Voici un exemple d'utilisation de jQuery à la place.
16. Diaporama panoramique
Une autre approche unique de l'interface de diaporama typique. Ici, l'auteur ajoute une navigation en diagonale pour pimenter l'interface et la faire ressortir.
17. jqFancyTransitions
Ce plugin peut être utilisé pour afficher vos photos sous forme de diaporama avec des effets de transition de type Flash.
18. iCarousel - Curseur d'images horizontales
Un autre diaporama qui ajoute une touche de facilité pour faire ressortir les transitions. Il n'est pas étonnant qu'ils aient choisi de présenter des produits Mac sexy dans cette démo.
19. Faire une image interactive avec jQuery
Cette démo peut être utilisée pour tirer parti des sites Web où il y a beaucoup d'espace à l'écran. En cliquant sur une section du site Web, vous découvrez une boîte modale qui affiche plus d'informations sur la section cliquée.
20. Cloud Zoom
Un plugin qui semble avoir été conçu pour le commerce électronique. Cloud Zoom est facile à mettre en œuvre et peut réellement améliorer l'expérience de l'utilisateur.
21. Effet Retina semblable à Apple
Quiconque a utilisé un iPhone, un iPod touch ou un iPad connaît la "vue Retina" qui agrandit une petite zone à l'écran lorsque vous touchez la zone pendant une période prolongée. Cette démo implémente cet effet pour le bureau.
Compilé exclusivement pour WDD par Flotte Kalim . Il est un web designer professionnel et un blogueur avec plus de 6 ans d'expérience. Le web est sa passion car il partage son temps entre l'écriture de blogs, le développement de logiciels et les médias sociaux. Il aime utiliser et développer de nouvelles applications pour le Web, le mobile et le bureau.
Connaissez-vous d'autres excellents exemples d'effets jQuery pouvant rivaliser avec la puissance de Flash? Avez-vous déjà suggéré des effets jQuery sur Flash lorsque vos clients les demandent? S'il vous plaît partager vos points de vue et exemples ci-dessous!