Hay muchas tecnologías diferentes para el diseño de una página web . Un elemento de estilo utilizado a lo largo de la Web es el uso de la transparencia , que se controla mediante el ajuste de la opacidad de un elemento . Un desarrollador puede conseguir este efecto a través de una variedad de medios , incluyendo el uso del marco MooTools . MooTools
MooTools es un framework JavaScript . JavaScript es el lenguaje de programación principal de la Web , sino que es capaz de crear animaciones complejas o funcionalidades Web simple. El objetivo de MooTools es crear una forma simplificada para los desarrolladores el uso de JavaScript. Se pretende reducir la cantidad de código que un desarrollador escribir, permitir más fácil la compatibilidad entre navegadores y proporcionar un marco ligero, fiable .
Opacidad Usos
Cuando ajustar la opacidad de un elemento a controlar su transparencia total. Esto se puede utilizar en una variedad de maneras diferentes ; un desarrollador puede desear para reducir la opacidad de una imagen , aumentando su transparencia , con el fin de crear una imagen de fondo más adecuado. También puede ajustar la opacidad de una imagen basada en las acciones del usuario , por ejemplo , si un usuario coloca su cursor sobre una imagen , se puede reducir la opacidad de la imagen con el fin de indicar que se ha seleccionado . La transparencia también se puede utilizar como un elemento de estilo . Proporcionar una variedad de niveles de opacidad en una página Web puede aumentar la profundidad y la sensación de que el producto final.
Simples Opacidad Efecto
MooTools fue diseñado para reducir la cantidad de código necesario para producir efectos de JavaScript , y se puede modificar la opacidad de cualquier imagen en una página web con el uso de la biblioteca de la MooTool . Mediante la creación de una "clase " y el método "set ", se puede indicar que los niveles de opacidad variable, que puede ser utilizado por la simple identificación de la clase dentro de la etiqueta de imagen HTML. Un ejemplo del código de MooTools es a
window.addEvent ( ' domready ', function () {
$ $ (' opacidad '. ) Cada uno (function ( Myel ) {< . br>
MyEl.set ( ' opacidad ' , + MyEl.get ( 'rel ' ) '.') ;
} ) ;
} ) ;
< p > En el ejemplo anterior, se ha creado una clase de " opacidad " y señaló que la transparencia de la imagen cambiará al ajustar las imágenes etiqueta " rel" . Al colocar " window.addEvent ( ' domready ', function () {" en el código que está indicando la función titulada " Myel " para disparar cuando se carga la página HTML. Esto se asegurará de que el cambio de la opacidad se hará tan pronto como el visitante llega a su sitio web con el fin de implementar el cambio de opacidad añada la siguiente línea de código HTML: .
Substitute " myImg.jpg " con su archivo de imagen. En este ejemplo " myImg.jpg " tiene una opacidad del 50 por ciento.
opacidad Animación
una forma de mejorar el efecto de transparencia es animarlo. Usando MooTools puede ajustar la opacidad de una imagen basada en la forma en que el usuario interactúa con un objeto. los eventos del mouse es el tipo más común de interacción. Usando MooTools , puede indicar que desea que el conjunto de opacidad a un nivel de " MouseEnter " ( cuando el usuario coloca el ratón sobre un objeto) y otro nivel en " MouseLeave " (cuando el cursor se retira del objeto) . Este tipo de función se lleva a cabo de una forma similar a un cambio de opacidad simple: . . crear una "clase" y llamar a esa clase en el código HTML continuación, la función utiliza los eventos del ratón con el fin de modificar la opacidad de la imagen
(function ( $ ) {
< p> window.addEvent ( ' domready ', function () { var
opacidad = 0,6 , toOpacity = 0,8 , .
$ $ (' div.opacity ' ) set (' opacidad ' , la opacidad ) addEvents ( {
MouseEnter : function ( ) {
this.tween ( ' opacidad ' , toOpacity ) ;
} ,
. Esta función indica que la ventana debe cambiar a un nivel de opacidad de " 0,8 " o 80 por ciento cuando el ratón entra en la ventana . al igual que el primer ejemplo ( en la Sección 3 ) , la función inicial se establece para cargar una vez que se abre la ventana del navegador , la cual se indica mediante " domready . " la función " MouseEnter " indica cualquier imagen con una clase de " opacidad " para cambiar de " opacidad " a " toOpacity . " los valores de estas variables se encuentran en la tercera línea de código. ajustando estos números que se ajustará el nivel de opacidad funciones cuando el ratón entra o sale de la imagen .
