Fondu, et masquage d’éléments HTML coulissante avec le Cadre GX JavaScript animation

Création d’animations s’engager sur vos pages web ne signifie pas toujours que vous devez mettre vos poches (ou votre carte de crédit), sous contrainte d’acheter un logiciel coûteux comme Flash ou Swift 3D. Merci à la générosité de nombreux développeurs dans le monde entier, vous pouvez ramasser un framework JavaScript gratuitement parmi les nombreuses disponibles sur le web, et commencer à transformer vos divs, paragraphes et listes en éléments dynamiques.

En réalité, à l’heure actuelle il ya une telle variété de cadres d’animation disponible que l’on choisir qui convient à vos besoins sans exagération peut être une tâche difficile. Heureusement, la bonne décision n’a pas à être une expérience douloureuse. Cela est particulièrement vrai si vous êtes un grand fan de jQuery, vous pouvez essayer GX, un puissant plug-in qui vous permettra de mettre en œuvre toutes sortes de accrocheur effets sur vos documents (X) HTML, sans avoir à déranger une seule portion de votre balisage propre.

Naturellement, si vous avez été un fidèle disciple de cette série d’articles et ont déjà lu tous les tutoriels précédents à celui-ci, vous avez maintenant une solide expérience dans la façon d’utiliser la bibliothèque GX pour créer différents types d’effets, allant de modifier les dimensions d’un élément HTML et en variant son opacité, pour qu’il monte et descend à travers le navigateur.

Alors qu’il est juste de souligner que dans la plupart des cas, ces effets ont été effectuées via le cheval de bataille de GX, qui est sa pratique « gx () » méthode, la bibliothèque est livrée avec quelques autres, des méthodes pratiques qui peuvent être utilisés pour des animations telles que fade-in et fade-outs, des diapositives et même des éléments cachés entièrement. Par conséquent, si vous êtes intéressé à apprendre comment mettre ces méthodes pour travailler pour vous, dans cette avant-dernière partie de la série je vais être de s’intéresser de près à eux.

Commençons à explorer les fonctionnalités de ces méthodes d’animation très bien.

Peaufiner la opacité d’un élément HTML

Comme je viens exprimé dans l’introduction, la bibliothèque GX est capable d’effectuer des transitions en douceur dans l’opacité des éléments d’une page web grâce à un ensemble complémentaire de méthodes spécifiques, il n’est pas surprenant appelé « fadeIn () » et « Fadeout (). » En accord avec la courbe d’apprentissage de la bibliothèque plat, travailler avec ces méthodes est un processus assez simple. Le fragment de code ci-dessous illustre ce en un mot. Regardez-le, s’il vous plaît:

Dans cet exemple concret, le fameux «fadeIn () » et « Fadeout () » méthodes ont été enchaînés pour produire un effet simple, où l’opacité de la div cible est d’abord réduite à 0 (zéro) et les rendit à sa valeur initiale. Rien ne vous empêche, cependant, d’utiliser les méthodes séparément ou même dans l’ordre inverse, surtout si vous avez besoin de faire disparaître un élément spécifique gracieusement de l’affichage.

En plus de l’échantillon de code précédents, voici un schéma simple qui montre comment la séquence fade-in/fade-out pertinentes est effectuée sur les div cible:

Je ne veux pas paraître trop excité, mais puisque utilisant les méthodes précédentes devrait être un jeu d’enfant, même pour un designer inexpérimenté, il est temps d’explorer deux méthodes plus livré avec la bibliothèque GX. Par conséquent, dans la section suivante je vais montrer comment faire glisser un élément HTML facilement via deux nouvelles méthodes, appelées « slideIn () » et « slideOut (). »

Pour en savoir plus sur ce sujet, cliquez sur le lien ci-dessous et continuez à lire.

Coulissante choses à l’écran avec le slideIn () et slideOut () méthodes

Une autre facette intéressante de la bibliothèque GX intéressant de regarder dans sa capacité à glisser des éléments HTML dans et dehors, qui peut être réalisé via un ensemble de méthodes, appelée « slideIn () » et « slideOut () », respectivement. Dans le jargon de la bibliothèque GX, le terme «mobile» est utilisée pour implémenter un effet où la hauteur de l’élément cible est modifié dans une certaine forme, donc l’invocation séquentielle des méthodes précédentes causerait l’élément à être alternativement élargi et contracté .

C’est exactement ce que l’extrait de code suivant tente de démontrer. Check it out:

Cela a été facile à coder et lire, n’est-ce pas? Comme je viens de dire, en appelant la « slideIn () » et « slideOut () » méthodes dans une séquence prédéfinie feront l’élément sélectionné alternativement réduire ou agrandir sa hauteur. Comme dans l’exemple montré fade-in/fade-out dans le segment précédent, les méthodes coulissantes ont été enchaînés, mais naturellement il est possible de les utiliser séparément ou dans la séquence qui correspond le mieux à vos besoins.

Un schéma devrait vous aider à comprendre plus facilement comment le processus fonctionne sliding-in/sliding-out, donc j’ai inclus ci-dessous pour vous. La voici:

Eh bien, en supposant que vous avez maintenant compris la logique derrière travailler avec le « slideIn () » et « slideOut () » méthodes, je voudrais prendre quelques instants pour explorer une autre paire pratique de méthodes complémentaires offerts par GX . Ces vous permettent de masquer et d’afficher un élément HTML dans une rupture. Sans surprise, ces méthodes sont appelées «cacher () » et « show () », et dans la dernière section de ce tutoriel, je vais vous montrer comment travailler avec eux à un niveau de base.

Maintenant, sauter en avant et de lire les quelques lignes qui suivent.

Masquage et affichage des éléments de page Web avec la peau () et show () méthodes

Certes, on les effets les plus communs qui peuvent être vus aujourd’hui sur de nombreuses pages web est la manipulation programmatique de la visibilité de plusieurs éléments HTML. Comme on pouvait s’y attendre, le GX est également livré avec un couple de méthodes, appelée «cacher () » et « show () », qui rend ce processus simple.

Pour illustrer comment utiliser ces méthodes simples, voici un autre exemple trivial qui alterne appelant chacun Jetez un coup d’oeil.:

Fidèle à la forme, le fragment de code ci-dessus est auto-explicatif. Il cache simplement et montre, en séquence, un div cible. Encore une fois, c’est valable de souligner que les méthodes peuvent être invoquées séparément, donc gardez cela à l’esprit lors de l’implémentation de ce type de masquer / afficher effet sur vos propres pages Web.

Et avec ce dernier exemple, nous sommes arrivés à la fin de ce tutoriel. Comme toujours, n’hésitez pas à modifier l’ensemble des extraits de code indiqué précédemment, vous pouvez donc vous armer avec une meilleure mise à la terre en utilisant ces méthodes fines qui viennent avec le cadre GX.

Dernières pensées

Au cours de cette avant-dernier chapitre de la série, je vous présentions à l’utilisation de quelques méthodes supplémentaires fournis par la bibliothèque GX. Comme vous l’avez vu par vous-même il ya un instant, ils viennent dans utiles pour effectuer fade-ins/fade-outs, diapositives et même de manipuler la visibilité des éléments de page Web.

Néanmoins, la liste de ces méthodes ne s’arrête pas là. GX est livré avec un peu plus qui peut être utilisé pour l’extension et le déplacement des éléments HTML à l’écran. Ainsi, la dernière tranche de la série portera sur l’utilisation de ces méthodes supplémentaires, la conclusion de notre aperçu de cette bibliothèque d’animation puissant.

Ne manquez pas le dernier épisode!