Créer une page Web de zoom impressionnante avec jQuery (JavaScript)

Vous voulez créer un effet vraiment unique et accrocheur pour votre site? Que diriez-vous d'une animation qui fait un zoom sur une partie spécifique de la page lorsque vous cliquez dessus?

Cela peut sembler beaucoup de travail, mais avec jQuery et Zoomooz.js, c'est un jeu d'enfant! Je vous guiderai pas à pas tout au long du processus de création d'une superbe galerie de vignettes de zoom.

Ce que nous construisons

Démo en direct: Cliquez ici

Zoomooz.js: Introduction de base

Lorsque vous travaillez avec de nouvelles bibliothèques, il est toujours préférable de commencer avec un exemple simple et mort, afin que vous puissiez avoir une idée du fonctionnement de tout. Avec ce projet, nous allons créer une page de base pour tester la fonctionnalité de zoom du script, puis passer à un exemple plus pratique en créant une galerie de vignettes complète.

HTML: les inclusions

Ce projet a une tonne de choses à inclure dans la partie principale de votre code HTML. La première chose à faire est de vous rendre sur la page d’accueil de Zoomooz.js et de télécharger la bibliothèque. Vous verrez qu'il ne contient pas vraiment une, mais plusieurs bibliothèques JavaScript. Heureusement, dans le téléchargement, vous trouverez des instructions pour exécuter un script afin de tout combiner et de tout minimiser afin qu'il ne soit pas si gros et désordonné (je vous laisse cette étape).

Dans cet esprit, notre petite expérience nécessitera le code suivant pour commencer:

  Test de zoom

Le javascript

Ensuite, copiez et collez le script ci-dessous dans votre code HTML. Comme vous pouvez le constater, cela cible la classe? Zoom? et applique le? zoomTo? méthode de la bibliothèque. Ensuite, nous appliquons la même chose au corps, ce qui permet à l'utilisateur de cliquer en dehors de tout élément pour effectuer un zoom arrière sur le niveau normal.

 $ (document) .ready (fonction () {$ (". zoom"). clic (fonction (evt) {evt.stopPropagation (); $ (ceci) .zoomTo ();}); $ (fenêtre) .click (function (evt) {evt.stopPropagation (); $ ("body"). zoomTo ();}); $ ("body"). zoomTo ();});

Ne vous en faites pas trop si vous ne comprenez pas cela. Gardez simplement à l'esprit que nous devrons appliquer le? Zoom? classe aux éléments que nous voulons pouvoir zoomer. Ce même extrait de code sera appliqué aux deux projets actuels, alors n'hésitez pas à le copier.

Le HTML

Ensuite, nous voulons mettre en place un terrain d’essai de base. Pour ce faire, nous devons créer un conteneur, une div externe et une div interne. Le conteneur peut sembler arbitraire, mais en l'incluant et en définissant une largeur / hauteur, cela aide l'effet de zoom à fonctionner correctement sur l'élément le plus à l'extérieur.

     <p>Cliquez ici pour zoomer</p>

Notez également que nous avons appliqué le? Zoom? classe aux divs extérieur et intérieur. Le lien à ce stade est vraiment juste un élément factice pour aider à guider l'utilisateur. Le script fonctionne parfaitement sans lui.

Le CSS

Ensuite, nous appliquons des tailles et un positionnement à chaque élément. Là encore, une taille de conteneur définie permet au zoom de fonctionner correctement, de même que la position? Absolue:? déclaration sur le? intérieur? div. Le script peut être un peu bizarre alors assurez-vous que ces éléments sont corrects.

 #container {width: 800px; hauteur: 500px; marge: 0 auto; } #outer {width: 400px; hauteur: 200px; fond: #aaa; marge: auto 50px; rembourrage: 70px; } #inner {width: 400px; hauteur: 200px; fond: #eee; marge: 0 auto; position: absolue; }

Texte CSS

Enfin, ici, nous ajoutons simplement un style de texte de base pour le paragraphe avec un état de survol. Encore une fois, n'hésitez pas à abandonner complètement le lien.

 #inner p {text-align: center; police de caractère: 25px / 200px Helvetica, sans serif; } #inner p a {color: # 000; texte-décoration: aucun; } #inner p a: hover {text-decoration: underline; }

Démo

Sur ce, notre simple démo est terminée. Lancez la page de démonstration pour la voir en action. Notez que cliquer sur chaque div vous donne un niveau de zoom différent et que cliquer dans le corps vous permet de faire un zoom avant.

Zoomooz.js: Galerie de vignettes

En utilisant cette même technique, nous pouvons créer une superbe galerie de vignettes avec un effet de zoom avant. Il est important de noter cependant que ce plugin fonctionne probablement mieux pour les éléments rendus avec le navigateur. Lorsque nous l'utilisons pour des images, comme nous le verrons ci-dessous, la triste réalité est que vous devez tout charger dans sa taille agrandie.

Ainsi, malgré le fait qu'une page soit pleine de petites vignettes, nous chargeons une page pleine d'images volumineuses, ce qui peut prendre plusieurs secondes en fonction de la vitesse de connexion de l'utilisateur.

Malgré cette limitation, il est toujours amusant de pousser les choses au maximum et de voir ce qui est possible.

HTML

Le code HTML de ce projet sera en réalité très simple. Je commence avec une div contenant du texte descriptif, essentiellement un en-tête rapide et une balise de paragraphe pour expliquer ce qui se passe. Ensuite, j'ai créé une grande liste non ordonnée contenant les images. C'est à peu près ça!

Notez que j'ai appliqué le? Zoom? classe à la fois la? galerie? div dans son ensemble et à chaque image dans la div. Cela nous donnera deux niveaux de zoom pour jouer avec. La bibliothèque est suffisamment intelligente pour gérer automatiquement les niveaux de zoom relatifs en fonction des relations parent / enfant.

Assurez-vous également de récupérer le code principal et le code JavaScript de l'exemple précédent. J'utilise la même configuration exacte, seuls mon corps HTML et CSS seront modifiés.

   <h1>Galerie Zoom</h1> <p>Cliquez sur une image ci-dessous pour l'agrandir, puis cliquez sur l'extérieur pour effectuer un zoom arrière. Assez chouette hein?</p>   <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/create-an-awesome-zooming-web-page-with-jquery_3.jpg"> <h3>Galerie CSS</h3> <p>Il est maintenant temps d'achever notre projet en nommant la galerie. Tout d’abord, nous voulons n’appeler que la galerie? div, qui sert de conteneur pour nos vignettes. Je lui ai donné une largeur de 720px, une hauteur de 370px et une couleur de fond grise.J'ai également inclus un peu de rembourrage pour que les vignettes ne se heurtent pas contre les bords et une marge de? 0 auto? pour centrer la div horizontalement (cela ne fonctionne que si vous spécifiez une largeur).</p>     <textarea wrap="soft" readonly=""> / * Styles de galerie * / #gallery {width: 720px; hauteur: 370px; marge: 0 auto; rembourrage: 10px; arrière-plan: # 383131; }

Une fois que vous avez fini de styler le conteneur de la galerie, il est temps de rendre notre grande liste d'images conforme à une grille. Pour ce faire, déclarez? Aucun? en tant que type de liste et faites flotter les éléments? li 'à gauche. Notez également le contexte de positionnement et l'effet de survol. Pour ces derniers, j'ai laissé tomber les marges lors du survol afin que la bordure n'affecte pas la mise en page. Donc pour commencer, chaque vignette a une marge de 10px, puis en survol une vignette a une marge de 7px et une bordure de 3px (7 + 3 = 10).

 / * Styles de liste * / ul {list-style-type: none; position: absolue; largeur: 720px; } #gallery ul li {float: left; marge: 10px; fond blanc; hauteur: 100px; largeur: 100px; } #gallery ul li: hover {border: 3px blanc solide; marge: 7px; } #gallery ul li img {hauteur: 100px; largeur: 100px; }

Avec ça, nous avons tous fini! Cliquez sur l'image ci-dessous pour lancer la démo.

Conclusion

Aujourd'hui, nous avons utilisé HTML, CSS et JavaScript en synergie pour créer une galerie Web délirante permettant de zoomer sur une vignette lorsque vous cliquez dessus. Comme nous l'avons montré dans la démonstration, ce même effet peut fonctionner sur n'importe quel élément!

Nous avons à peine effleuré la surface de ce que Zoomooz.js peut faire. Arrêtez-vous à la page du projet pour voir comment faire encore plus avec ce plugin génial.