Web corporativa con WOW.js

Web corporativa con WOW.js / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Web corporativa con WOW.js

SPC Plast, fue una de las primeras webs corporativas que he realizado del lado front. En los primeros trabajos se pulen los errores y se mejora con cada línea de código.

Fue realizada en la empresa webpac, con un template propio, uno de los cometidos por los que fui contratado, fue para ampliar y mejorar una plantilla anterior y convertirlo en el template estándar de la empresa. Valorando todas las opciones para que futuros front trabajasen rápido y convertirla en la base de su trabajo. Realizando el código desde cero.

Maquetada y desarrollada con HTML5, CSS3, jQuery y javascript, con responsive.

Destaca en el front la aplicación de "WOW.js", que crea animaciones con CSS3 que se desarrollan mientras hacemos scroll.

Es una librería para crear efectos animados a todos los elementos que deseemos de la web al momento de hacer scroll, para su correcto funcionamiento, necesitamos "animate.css", otra librería, con numerosos efectos realizados con CSS3; esto permite que las animaciones que se ejecuten en el navegador tengan un mejor rendimiento y fluidez. Esta librería sirve para configurar el tipo de animación, el retardo y número de repeticiones.

Como usar estas librerias en el HTML:

    <div class="wowExample">
        <div class="wow fadeInDown animated"></div>
        <div class="wow fadeInDown animated" data-wow-duration=".5s" data-wow-delay=".5s"></div>
        <div class="wow fadeInDown animated" data-wow-duration="1s" data-wow-delay="1s"></div>
        <div class="wow fadeInDown animated" data-wow-duration="1.5s" data-wow-delay="1.5s"></div>
        <div class="wow fadeInDown animated" data-wow-duration="2s" data-wow-delay="2s"></div>
        <div class="wow fadeInDown animated" data-wow-duration="2.5s" data-wow-delay="2.5s"></div>            
    </div><!-- wowExample -->

Primero hay que añadir la class "wow", segundo el tipo de movimiento, en este caso "fadeInDown"

data-wow-duration: Es la duración de la animación.

data-wow-delay: Es el retraso con el que se muestra el elemento.

En la sección Vision es donde lo podemos ver en funcionamiento.

Puedes ver la web completa en SPC plastic

Como usar "wow.js":

Descarga y ejemplos:

Mariano J

Escribe un comentario

Tu email no se hará visible