Appliquer l'effet de zoom lisse aux images avec Zoomer

Il y a une citation qui dit «une image vaut mille mots». Dans le web design, cela devient encore plus pertinent. Surtout quand il s'agit de mettre en valeur des produits, comme dans un site de commerce électronique par exemple. Les gens doivent avoir une compréhension claire et être capables de regarder le produit d'une manière visuelle avant de faire un achat après tout.

Faire l'image la plus grande possible ne peut pas résoudre ce problème, car il faudra aussi une énorme quantité d'espace disponible. Par conséquent, le meilleur choix est de rendre l'image zoomable. Avec Zoomer, vous pouvez y arriver facilement.

Zoomer est une bibliothèque javascript gratuite qui permet à votre image d'être zoomable . Quand il est activé, il va ajouter son propre style et un bouton pour zoomer et dézoomer. Il prend également en charge plusieurs images, qui seront automatiquement transformées en une galerie d'images.

Initialisation

Avant de l'initialiser, incluez d'abord le script Zoomer (que vous pouvez obtenir depuis la page GitHub) dans votre projet comme ceci:

Zoomer entoure l'image avec son style et ajoute un bouton de zoom avant et arrière. Vous devez également inclure la feuille de style Zoomer avant la balise de fermeture de la head .

 ..  .. 

Zoom avant et arrière

Pour créer un nouveau Zoomer, incluez facilement une image dans un wrapper. N'oubliez pas de donner à l'emballage une hauteur et une largeur fixes, car tout le contenu disponible sera rempli par le nouveau balisage. Par exemple, je crée un wrapper avec le nom de .zoomable et définissez la hauteur à 500px et la largeur à 100% comme .zoomable :

 .zoomable {hauteur: 500px; largeur: 100%; } 

Puis j'enveloppe l'image que je veux faire zoomer, comme ci-dessous:

        

          
          

		  
Meilleures applications Time Lapse pour votre smartphone
            
Le tournage de vidéos en accéléré est la meilleure façon de capturer la beauté fascinante des choses lentes autour de nous que nos yeux (ou la patience) ne peuvent pas suivre. Grâce au faible taux de rafraîchissement et à la vitesse élevée de la vidéo, vous pouvez réaliser des vidéos épiques de fleurs en fleurs, de couchers de soleil, de nuages ​​en mouvement et de nombreuses autres scènes magnifiques.Fait intéressant, v
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
Comment faire pour supprimer les messages politiques de votre flux de nouvelles Facebook
            
Depuis les récentes élections présidentielles américaines, le fil d'actualité de votre Facebook peut ou non avoir été inondé par des articles de presse et des confrontations régulières entre des personnes ayant des opinions politiques différentes . Si vous, comme moi, souhaitez un répit de toute la politique, CBS News a fourni trois solutions qui vous permettent de filtrer le bruit de votre fil d'actualité .Si vous êtes
			
(Conseils techniques et de conception)
          
        
      

  
  
  



Des Articles Intéressants






			
	
				

					5 façons d'exécuter des applications de bureau et mobiles n'importe où
					

			
	
				

					Écoutez la radio de n'importe quel pays avec Radio Garden
					
						







			
	
				

					Freelancers historiques qui ont changé le monde - Partie 2
					

			
	
				

					Étiquette Facebook essentielle: 10 choses à faire et à ne pas faire