|
Il ya beaucoup de technologies différentes sont disponibles pour la conception d'une page web. Un élément de style utilisée dans le Web est l' utilisation de la transparence , qui est contrôlée en ajustant l'opacité d'un élément. Un développeur peut obtenir cet effet si une variété de différents moyens, y compris l'utilisation du cadre MooTools . MooTools
MooTools est un framework JavaScript . JavaScript est le langage de script principal du Web , il est capable de créer des animations complexes ou des fonctionnalités Web simple. Le but de MooTools est de créer un moyen simplifié pour les développeurs d'utiliser JavaScript. Il prétend réduire la quantité de code qu'un développeur écrira , pour en faciliter la compatibilité cross-browser et fournir un cadre léger et fiable.
Opacité Utilise
Lorsque vous ajuster l'opacité d'un élément de contrôler sa transparence générale . Ceci peut être utilisé dans une variété de façons différentes , un développeur peut vouloir réduire l'opacité d' une image , en augmentant sa transparence , afin de créer une image d'arrière-plan plus approprié. Vous pouvez également ajuster l'opacité d'une image basée sur les actions d'un utilisateur , par exemple , si un utilisateur place son curseur sur une image , vous pouvez réduire l'opacité de l'image pour indiquer qu'elle a été sélectionnée. La transparence peut également être utilisé comme un élément de style . Offrant une variété de niveaux d'opacité sur une page Web peut améliorer la profondeur et la convivialité du produit final.
Simples opacité effet
MooTools a été conçu pour réduire la quantité de code nécessaire pour produire des effets JavaScript , et vous pouvez modifier l'opacité d' une image dans une page Web avec l'utilisation de la bibliothèque de l' MooTool . En créant une «classe» et en utilisant la méthode "set" vous pouvez indiquer les niveaux d'opacité variable, qui peut ensuite être utilisé simplement en identifiant la classe au sein de votre balise image HTML. Un exemple du code MooTools est ci-dessous:
window.addEvent ( 'domready' , function ( ) {
$ $ (' opacité .') Chacun (function ( Myel ) {< . br> MyEl.set (' opacité ', + MyEl.get ( 'rel ') '.') ;
});
});
Dans l'exemple ci-dessus vous avez créé une classe " opacité " et a indiqué que la transparence de l'image va changer lorsque vous ajustez les images balise "rel " . En plaçant " window.addEvent ( 'domready' , function ( ) {" dans le code vous demandez la fonction intitulée " Myel " au feu quand la page se charge HTML. Cela permettra d'assurer que le changement d'opacité est effectuée dès que le visiteur arrive sur votre site afin de mettre en œuvre le changement d'opacité ajoutez la ligne suivante de code HTML : .
Substitute " myImg.jpg » avec votre fichier image. Dans cet exemple " myImg.jpg " a une opacité de 50 pour cent.
opacité Animations
une façon d'améliorer l'effet de transparence est d' animer. utilisant MooTools vous pouvez régler l'opacité d'une image en fonction de la façon dont l'utilisateur interagit avec un objet. événements de souris sont le type le plus commun d'interaction . Utiliser MooTools , vous pouvez indiquer que vous voudriez l'ensemble de l'opacité sur un seul niveau " mouseenter " ( lorsque l'utilisateur mouses sur un objet ) et un autre niveau sur le thème " mouseleave " ( lorsque le curseur est supprimé de l'objet). Ce type de fonction est mis en œuvre de façon similaire à un changement d'opacité simple: . . créer une «classe» et appeler cette classe dans votre code HTML cette fonction utilise ensuite les événements de souris afin de modifier l'opacité de l'image
(function ( $ ) {
< p> window.addEvent ( 'domready' , function ( ) { var
opacité = 0,6 , toOpacity = 0,8; .
$ $ (' div.opacity ') set (' opacité ' , opacité) addEvents ({
mouseenter : de function () {
this.tween (« opacité », toOpacity ) ;
} , AB . cette fonction indique que la fenêtre doit passer à un niveau d'opacité de " 0.8" ou 80 pour cent lorsque la souris entre la fenêtre. Comme dans le premier exemple (section 3 ), la fonction initiale est fixée à charger une fois la fenêtre du navigateur s'ouvre, est indiqué par " domready . " la fonction " mouseenter " indique une image avec une classe de " l'opacité " pour changer de « l'opacité » à « toOpacity . " les valeurs de ces variables sont définies lors de la troisième ligne de code. en ajustant ces chiffres que vous allez régler le niveau d' opacité des fonctions lorsque la souris entre ou sort de l'image .
|
