hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment zoomer des images comme moyen

La plateforme de blogging Medium utilise un effet de zoom sur les pages de son blog. Chaque fois que l'utilisateur clique sur une image, il agrandira automatiquement sa taille.

C'est un excellent effet et certainement unique à Medium, mais ce n'était jamais quelque chose qui pouvait facilement être copié.

Maintenant, avec le script MediumLightbox, c'est plus facile que jamais. Ce script JS est léger et facile à ajouter sur n'importe quel site ou blog.

Si vous souhaitez voir comment cela fonctionne, vous pouvez visiter la page de démonstration en direct hébergée par le créateur Davide Calignano.

Il a passé un certain temps à clouer la transition exacte et l'effet d'animation personnalisé pour créer une image miroir du zoom de l'image de Medium . La bibliothèque entière est écrite en JavaScript pur, de sorte qu'elle ne repose sur aucun script tiers tel que jQuery.

Vous aurez besoin de connaître un peu JS pour le configurer, mais vous n'avez certainement pas besoin d'être un expert.

Chaque image peut prendre des attributs data- * pour définir la hauteur et la largeur en taille réelle, toutes tirées dynamiquement du plugin lightbox. Le code d'installation est très simple et peut cibler les images elles - mêmes, ou des conteneurs comme le

élément .

Voici l'extrait de code unique dont vous avez besoin pour exécuter le plug-in:

 MediumLightbox ('figure.zoom-effect'); 

À l'intérieur de la fonction, vous passerez un sélecteur pour tous les éléments (par exemple

) avec la classe d' .zoom-effect . Cette classe est spécifiquement définie dans la feuille de style MediumLightbox, il est donc préférable de l'utiliser sur votre page.

Et, une fois que cela est mis en place, vous êtes tous ensemble!

Dans la zone de contenu de votre page, vous pouvez envelopper toutes les images dans un
tag utilisant cette classe. Ils obtiendront automatiquement cet effet "click-to-zoom" bien-aimé moyen pour les utilisateurs de bureau et mobiles .

Pour télécharger une copie de ce script et commencer, visitez le dépôt principal de GitHub. Ici, vous trouverez également de la documentation ainsi que des extraits de code que vous pouvez copier pour vous installer rapidement.

Conception de cartes de visite: 80 exemples créatifs et modèles gratuits

Conception de cartes de visite: 80 exemples créatifs et modèles gratuits

Dans le monde d'aujourd'hui centré sur Internet, les propriétaires d'entreprises utilisent fréquemment différents supports en ligne pour la promotion de leurs marques. Mais ce qui ne sort jamais de la mode, ce sont de bonnes cartes de visite. Les cartes de visite sont l'un des meilleurs outils pour que les gens se souviennent de votre entreprise et vous contactent s'ils ont besoin de vos services.Et

(Conseils techniques et de conception)

Vitrine de beaux thèmes WordPress avec barres latérales gauches

Vitrine de beaux thèmes WordPress avec barres latérales gauches

La barre latérale est une zone supplémentaire sur le site, où vous pouvez placer des informations pour vos visiteurs. Vous pouvez utiliser la barre latérale pour naviguer sur un site, faire de la publicité, comme un moyen d'attirer de nouveaux abonnés et abonnés, de mettre en valeur ou de mettre en valeur un contenu spécifique. Comme

(Conseils techniques et de conception)