Arisman Webs - Diseño Web

Estamos cargando la página
sólo será un monento.

8 Feb 2019

Recursos WebPolymer 3

AW Effects - Polymer 3 - Efectos javascript

Los aw-effects son propiedades desarrolladas en javascript pensadas para hacer ciertas funcionalidades que necesitamos programar en las webs de forma continua.

Su principal función es evitar por completo el uso de *jQuery* si sólo utilizamos de éste para realizar animaciones simples como el "fadein", "fadeout", "slideup", "slidedown" y ese tipo de operaciones sencillas. De este modo tenemos un código mucho más liviano que utilizando la librería de *jQuery* la cual es muy pesada.

Los efectos disponibles son:

Estos efectos se pueden añadir de forma independiente, pero puedene incluirse todos importando el archivo:

<link rel="import" src="/aw_components/aw-effects/aw-effects.js">


aw-animate

Esta función aplica animaciones simples en javascript utilizando Polymer, es similar a *jQuery.animate()*.

Su uso es muy simple:

Polymer.Animate( el, props, settings, callback );

{
    "el [HTMLObject] (Obligatorio)": "Elemento HTML sobre el que queremos aplicar la animación",
    "props [Object] (Obligatorio)": "Las propiedades CSS que queremos aplicar a la animación.",
    "settings [Object] (Opcional)": {
        "speed": "Velocidad del efecto en milisegundos",
        "effect": "Efecto de animación, (ease, ease-out, cubic-bezier(.08,.84,.78,.2)...",
        "dealy": "La velocidad del efecto. Valores permitidos ( Números positivos ). A más alto el valor menor velocidad."
    },
    "callback [Function] (Opcional)": "Función de callback que se ejecutará tras la animación",
}

Animamos un elemento en sus propiedades "left" y "width".

var div = document.getElementById( "myDiv" );

Polymer.Animate( div, {
left: "100px",
width: "300px"
});

Animamos un elemento en sus propiedades "left" y "width" durante dos segundos.

var div = document.getElementById( "myDiv" );

Polymer.Animate( div, {
left: "100px",
width: "300px"
}, {
speed: 2000
});

Animamos un elemento en sus propiedades "left" y "width" con un callback.

var div = document.getElementById( "myDiv" );

Polymer.Animate( div, {
left: "100px",
width: "300px"
}, () => {
console.log( "La animación a terminado" );
});

Animamos un elemento en sus propiedades "left" y "width" durante dos segundos con un cubix-bezier y un callback.

var div = document.getElementById( "myDiv" );

Polymer.Animate( div, {
left: "100px",
width: "300px"
}, {
speed: 2000,
effect: "cubic-bezier(.08,.84,.78,.2)"  
}, () => {
console.log( "La animación a terminado" );
});


aw-colors

El efecto aw-colors permite trabajar con los colores de manera simple en javascript y tiene las siguientes funciones:
  • Colors.type()
  • Colors.toRGB()
  • Colors.toRGBA()
  • Colors.toHSL()
  • Colors.toHSLA()
  • Colors.toHEX()
  • Colors.constrast()

Polymer.Colors.type(): Devuelve el tipo de color que se ha pasado como parámetro. Los valores devueltos son: (HEX, RGB, RGBA, HSL, HSLA, false).

var color = "#FF0000";
var type = Polymer.Colors.type( color );

// type = "HEX"


Polymer.Colors.toRGB(): Convierte un color a RGB, devuelve false si no es posible.

var color = "#FF0000";
var rgbColor = Polymer.Colors.toRGB( color );

// rgbColor = rgb(255,0,0)


Polymer.Colors.toRGBA(): Convierte un color a RGBA, devuelve false si no es posible.

var color = "#FF0000";
var trans = 0.5;                        // (Opcional)
var rgbaColor = Polymer.Colors.toRGBA( color, trans );

// rgbaColor = rgba(255, 0, 0, .5)


Polymer.Colors.toHSL(): Convierte un color HSL, devuelve false si no es posible.

var color = "#FF0000";
var hslColor = Polymer.Colors.toHSL( color );

// hslColor = hsl(0, 100%, 50%)


Polymer.Colors.toHSLA(): Convierte un color a HSLA, devuelve false si no es posible.

var color = "#FF0000";
var trans = 0.5;                        // (Opcional)
var hslaColor = Polymer.Colors.toHSLA( color, trans );

// hslaColor = hsla(0, 100%, 50%, .5)


Polymer.Colors.toHEX(): Convierte un color a hexadecimal, devuelve false si no es posible.

var color = "rgb(255, 0, 0)";
var hexColor = Polymer.Colors.toHEX( color );

// hexColor = #FF0000


Polymer.Colors.contrast(): Devuelve el contraste de un color, los valores devueltos son: (light, dark, false).

var color1 = "#FFFFFF";
var color2 = "#000000";
var constrast1 = Polymer.Colors.contrast( color1 );
var constrast2 = Polymer.Colors.contrast( color2 );

// constrast1 = light
// constrast2 = dark


aw-fade

Realiza un efecto de desaparición o aparición de un elemento. Similar a jQuery.fadeInjQuery.fadeOut`Polymer.Fade` dispone de tres funciones para realizar el efecto.

Polymer.Fade.in( el, settings, callback );
Polymer.Fade.out( el, settings, callback );
Polymer.Fade.toggle( el, settings, callback );

{
    "el [HTMLObject] (Obligatorio)": "Elemento HTML sobre el que queremos aplicar la animación",
    "settings [Object] (Opcional)": {
        "speed": "Velocidad del efecto en milisegundos",
        "effect": "Efecto de animación, (ease, ease-out, cubic-bezier(.08,.84,.78,.2)..."
    },
    "callback [Function] (Opcional)": "Función de callback que se ejecutará tras la animación",
}

Ejemplo:
var div = document.getElementById( "myDiv" );
Polymer.Fade.out( div, () => {
console.log( "Animación completada" );
});


aw-listen-dom

Pone a la escucha eventos para los elementos del DOM del mismo modo que lo hace el jQuery.on, de este modo nos permite escuchar eventos en elementos que no se declaran en el DOM desde la carga de la página o cuando trabajamos en aplicaciones con AJAX.

El funcionamiento es similar al de jQuery:

Polymer.ListenDom.on( event, element.selctor, callback );

Ejemplo:
Polymer.ListenDom.on( "click", ".myElement > div", ()=> {
console.log( "Se ha hecho click sobre la división hija de .myElement" );
});

Del mismo modo también podemos dejar de escuchar los eventos que están a la escucha usando la función *.off()*

Esta función acepta tres parámetros pero solo son obligatorios dos de ellos. Si solo pasamos el evento y el selector, se quitarán todos los eventos asociados a ese o esos elementos.

Polymer.ListenDom.off( "click", ".myElement > div" );

Pero también podemos eliminar solo una función para el evento de las que le hayamos asignado:

Ejemplo:
function myFunc() {
console.log("Entra el ratón con función myFunc");
}

Polymer.ListenDom.on( "mouseenter", "#myDiv", myFunc);

Polymer.ListenDom.on( "mouseenter", "#myDiv", function() {
console.log("Entra el ratón");
});

Como observamos en el ejemplo superior, el elemento #myDiv, tiene dos funciones asociadas al evento `mouseenter`. Una una función asignada directamente y otra la función `myFunc`.

Si queremos dejar de escuchar solamente `myFunc`, tan solo hay que hacer esto:

Polymer.ListenDom.off( "mouseenter", "#myDiv"m myFunc );


aw-parallax

Con esta función conseguimos el famoso efecto Parallax en algún elemento de nuestra página.

var div = document.getElementById( "myDiv" );
Polymer.Parallax.init( element, settings );

{
    "element [HTMLObject] (Obligatorio)": "Elemento HTML sobre el que queremos aplicar la animación",
    "settings [Object] (Obligatorio)": {
        "cssProperty": "El estilo CSS sobre el que queremos el efecto. (top, margin-top, background-position)",
        "parallaxDir": "La dirección del efecto Parallax. Valores permitidos ( 'up', 'down' ).",
        "speed": "La velocidad del efecto. Valores permitidos ( Números positivos ). A más alto el valor menor velocidad.",
        "topStart": "El alto en píxeles donde empezará el efecto. Valores permitidos ( Números enteros positivos ).",
        "topLimit": "El alto donde el efecto dejará de animar. Valores permitidos ( Números enteros positivos )."
    }
}

Ejemplo:
var div = document.getElementById( "myDiv" );
Polymer.Parallax.init( div, {
cssProperty: "background-position",
speed: 2.5,
topLimit: 500
} );

En el ejemplo superior, lograremos este efecto en una imagen de fondo del elemento DIV y el efecto dejará de producirse cuando el top del scroll supere los 500px.


aw-scroll

Este componente nos permite deslizar el scroll de la página hacia un punto concreto creando una animación. Los métodos permitidos son:
  • scroll.top()
  • scroll.bottom()
  • scroll.to()
  • scroll.toElement()

Polymer.scroll.top(): Mueve el scroll al top de la ventana o el elemento.

Polymer.scroll.top( duration, element );

{
    "duration [integer] (Opcional)": "El tiempo que se desea dure la animación",
    "element [HTMLObject] (Opcional)": "Elemento HTML sobre el que queremos animar el scroll, por defecto, la ventana"
}

Polymer.scroll.bottom(): Mueve el scroll al fondo de la ventana o el elemento.

Polymer.scroll.bottom( duration, element );

{
    "duration [integer] (Opcional)": "El tiempo que se desea dure la animación",
    "element [HTMLObject] (Opcional)": "Elemento HTML sobre el que queremos animar el scroll, por defecto, la ventana"
}

Polymer.scroll.to(): Mueve el scroll a una altura concreta de la ventana o el elemento.

Polymer.scroll.to( to, duration, element );

{
    "to [integer] (Obligatorio)": "La altura en píxeles a la que queremos dirigir el scroll",
    "duration [integer] (Opcional)": "El tiempo que se desea dure la animación",
    "element [HTMLObject] (Opcional)": "Elemento HTML sobre el que queremos animar el scroll, por defecto, la ventana"
}

Polymer.scroll.toElement(): Mueve el scroll a un elemento concreto de la página.

Polymer.scroll.toElement( el, margin, duration, element );

{
    "el [HTMLObject] (Obligatorio)": "El elemento al que queremos desplazar el scroll",
    "margin [integer] (Opcional)": "El margen que queremos dejar sobre el elemento",
    "duration [integer] (Opcional)": "El tiempo que se desea dure la animación",
    "element [HTMLObject] (Opcional)": "Elemento HTML sobre el que queremos animar el scroll, por defecto, la ventana"
}


aw-slide

Este componente nos permite crear un efecto persiana sobre algún elemento de la página para hacerlo desaparecer o aparecer. El funcionamiento de este elemento es similar al de aw-fade.


{
    "el [HTMLObject] (Obligatorio)": "Elemento HTML sobre el que queremos aplicar la animación",
    "settings [Object] (Opcional)": {
        "speed": "Velocidad del efecto en milisegundos",
        "effect": "Efecto de animación, (ease, ease-out, cubic-bezier(.08,.84,.78,.2)..."
    },
    "callback [Function] (Opcional)": "Función de callback que se ejecutará tras la animación",
}

aw-slider-element

Con esta componente creamos un elemento deslizante dentro de un contenedor. Debemos asegurarnos que el elemento que queremos que deslice dentro de otro elemento contenedor sea hijo directo del mismo y no haya más elementos dentro.

Para aplicar este efecto tan solo debemos instanciar el init() del componente Polymer pasándole el elemento que queremos sea deslizante y la configuración deseada:

var element = document.getElementById( "myElement" );

var settings = {
headFixHeight: 80,
marginStart: 50
}

Polymer.SliderElement.init( element, settings );

{
    "element [HTMLObject] (Obligatorio)": "Elemento HTML sobre el que queremos aplicar la animación",
    "settings [Object] (Opcional)": {
        "headFixHeight [Integer]": "En el caso que tenga una cabecera fija, damos la altura de esta",
        "footerFixHeight [Integer]": "En el caso que tenga un pie fijo, damos la altura de éste",
        "minWidth [Integer]": "Un ancho mínimo que queremos que se cumpla para que el elemento se deslice.",
        "marginStart [Integer]": "Un margen superior que queremos que tenga el elemento."
    }
}

aw-textarea-adjust

Este componente nos convierte un elemento textarea en ajustable en altura. Para crear este efecto tan solo hay que llamar a la funcion:

Polymer.TextareaAdjust.init( textarea, settings );

{
    "textarea [HTMLObject] (Obligatorio)": "Elemento textarea sobre el que queremos aplicar el auto ajuste",
    "settings [Object] (Opcional)": {
        "maxHeight [Integer]": "Altura máxima que queremos aplicar al textarea"
    }
}

var textarea = document.getElementById( "myTextarea" );
var settings = {
maxHeight: 300
}

Polymer.TextareaAdjust.init( textarea, settings );