Javascript
por juan rafael | Ago 6 | angular, ionic, javascript
Últimamente he estado desarrollando una aplicación con ionic 3, después de tratar con angular a nivel web , usar ionic resulta relativamente sencillo si quieres pasar tu App a mobile.
El tema es que todo va de maravilla hasta que te encuentras con los primeros problemas a solucionar ( como siempre ) , esta vez se trataba de la imagen de presentación que ionic nos ofrece mediante el plugin Splashscreen.
La imagen se mostraba y ocultaba bien, pero dejaba un letargo de 3 segundos, donde solo se ve un pantallazo en blanco hasta que se muestra la primera vista de mi aplicaron.
Esto que decir que no me gustaba nada y así que me puse a investigar por la red posibles soluciones.
Encontré una en la que cambiando algunas configuraciones referentes al SplashSreeen en el config.xml conseguimos que la imagen no se auto oculte antes de que la aplicación muestre su primera vista , ademas de algún efecto mas de “fade out” al salir.
Ahora si quedaba perfecta nuestra bienvenida, la pantalla de presentación se muestra y después se oculta justo antes de cargarse la UI.
El código que he usado y a mi me va perfecto, es este .No dudéis en trastear y probar posibles configuraciones que se ajusten más a tu aplicación:
config.xml:
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreen" value="screen" />
<preference name="ShowSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true" />
Espero que a los que tengáis problemas parecidos esto os ayude como hizo conmigo.
Un saludo.
por juan rafael | Ene 18 | javascript
Aos.js es una de mis preferidas , consigue animaciones estupendas por desplazamiento , como principales características puedes configurar los parámetros de animación de forma global desde su constructor o por medio de data atributos en el elemento html.
En su configuración nos da la opción de escoger animaciones ,ubicaciones de anclaje y funciones de temporizador.
Como desventaja se le podría atribuir el que no da opción de usar animaciones propias ni css externo estando todas las animaciones establecidas en la librería, aunque son bastantes y cubren bien las necesidades de muchos proyectos.
Srollreveal.js es una propuesta mas sencilla donde conseguir una muestra de nuestros elementos conforme vayan apareciendo con una animación suave de tipo fade-up.
Aunque nos da mas opciones como origen de la animacion , distancia , opacidad , etc … para mi parecer su mayor ventaja es la animacion de todos los elementos dentro de un elemento progresivamente.
Esto es muy útil para listas o galerias en grid ,incluso da soporte para peticiones ayax y mostrar animaciones conforme pintamos los items.
Una buena opción sin duda .
ScrollMagic v2.0.5
Para profesionales que quieran que su web sea una secuencia de animaciones entrelazadas que nos dejen boquiabiertos ,solo hay que ver ejemplos de webs que usan esta librería para saber a lo que me refiero.
Scroll magic es una opción muy completa y sofisticada con la que se pueden conseguir unos resultados de igual manera.
su curva de aprendizaje es un poco mas complicada ,su impelmentacion puede ser en diferentes marcos aunque los autores recominedan la plataforma GreenSook(GSA) y tambien Velocity.js , aunque tambien admite otras.
En su github nos da mas documentación y su en su web podemos ver su potencial en funcionamiento.
Waypoints.js
Waypoinsts es una librería que nos da opción de lanzar funciones en puntos determinados del desplazamiento , aunque no esta orientada solo a animaciones esto nos da muchas mas posibilidades de desarrollo , podemos jugar a mostrar modales o “popups” según el punto de la pagina que estemos ,animaciones y mil cosas mas .
De manera predeterminada y con módulos aparte no permite hacer anclaje de elementos de forma muy sencilla , como la típica barra de navegación que se pega a la parte superior cuando desplazamos hacia abajo y también con otro modulo podemos implementar “infinite scroll” para peticiones ajax o listas muy largas de forma sencilla.
Una opción con muchas posibilidades y no solo en el ámbito de animaciones si no que da de si mucho mas.
Esta es mas de lo mismo pero con la peculiaridad que funciona con la famosa libreria css animate.css muy apreciada por muchos a la hora de implementar animaciones en nuestros proyectos.
wow.js esta creada por la gente de uplabs y a diferencia de las otras propuestas gratuitas esta tiene una licencia comercial a precio asequible , puedes consultar precios en su sitio web.
Otra gran opción para tu web , todas son buenas pero tu decides cual se adapta mas a tus necesidades.