por Omar Benyakhlef | Ajax, Diseño Web, jQuery, Trucos CSS
Parallax-Slider
Hace unos meses, en este blog de diseño web, vimos unos ejemplos de las últimas tendencias de diseño, el Parallax.
Hoy vamos a ver un ejemplo más de cómo hacer un slider con Parallax, en el que podemos ver cómo los elementos del diseño aparecen y desaparecen con distintos efectos.
En este ejemplo vamos a ver cómo controlar el comportamiento de cada elemento, dándole una clase. Cuando queremos desplazarlo a la derecha, por ejemplo, utilizamos la clase “da-slide-toright”.
Las clases utilizadas son:
- .da-slide-fromright
- .da-slide-fromleft
- .da-slide-toright
- .da-slide-toleft
El efecto Parallax se crea moviendo el fondo en dirección opuesta al movimiento del objeto. Con bgincrement, podremos controlar la cantidad de píxeles que tiene que moverse.
A continuación os dejo el enlace para ver y descargar el código de Tympanus.net
por Omar Benyakhlef | Ajax, Diseño de páginas web, Diseño Web, HTML5, jQuery
Scroll Parallax
En este blog de diseño web, hemos visto como a lo largo de los años las tendencias del diseño web siguen sorprendiéndonos y alcanzando niveles que hace años eran difíciles de imaginar.
En esta última década hemos sido partícipes como diseñadores, de una constante evolución. Desde las web más básicas, que simplemente parecían un documento word metido en una pantalla, pasando por aquellas horrorosas webs, en las que todo parpadeaba y en las que era necesario llenar la web de botones con el mensaje «pulse aquí», para posteriormente pasar a una época en lo que todo parecía que iba a ser flash y acto seguido abandonar la idea al darnos cuenta de que lo que verdaderamente era importante, era el SEO y la USABILIDAD.
En todo este tiempo, hemos vivido muchas mejoras en las conexiones de los usuarios, lo cual se ha visto obviamente reflejado en los diseños. Esto nos permitió empezar a utilizar grandes imágenes y backgrounds, a no estar tan pendientes del peso de la página. Nuevos dispositivos desde los que visualizar las webs, como los smartphones, iPhones, iPads,… Y en los últimos años, la implantación de una tecnología que ha dado un vuelco al diseño web y que como diseñadores nos ha permitido abrir la imaginación para poder realizar diseños con los que nunca antes nos habríamos atrevido, todo gracias a la implantación del jQuery.
(más…)
por Omar Benyakhlef | Ajax, CSS, Diseño de páginas web, Diseño Web, jQuery
Efectos a imágenes con jQuery y CSS3
Diseño Web con jQuery y CSS3,… Una vez más, vamos a poder comprobar cómo cada día son más las facilidades que nos aportan estas dos herramientas a la hora de diseñar para web.
En este caso vais a poder ver cómo con CSS3 y jQuery, es posible aplicar toda clase de estilos a una imagen. Bordes, brillos, sombras, contornos, reflejos,…
Una gran variedad de efectos que además de facilitarnos el tiempo de trabajo, nos ayuda a controlar el peso de nuestra web.
Podéis ver todos estos efectos y el modo de aplicarlos en http://webdesignerwall.com
por Omar Benyakhlef | accesibilidad, Ajax, Cool Web Design, CSS, Diseño de páginas web, Diseño Web, HTML5, jQuery, Usabilidad
24 Ejemplos de HTML5 & jQuery & CSS3… Alucinante !!!
El diseño webestá en constante evolución.
La aparición hace unos años del jQuery y CSS3, unido a las mejoras introducidas (aunque todavía ridículas) en las velocidades de conexión, han supuesto un cambio radical en la concepción de diseños web.
Ahora con la implantación cada vez mayor de las webs hechas con HTML5, llegamos a un periodo en el que «todo es posible«.
Con un poco de imaginación y atractivos diseños, vamos a ver una total revolución en el diseño web, sobre todo en la usabilidad.
A continuación os dejo con 24 ejmplos de páginas web realizadas en HTML5, jQuery y CSS3, que me han sorprendido mucho, estamos entrando en una nueva fase de diseño y usabilidad, en la que ya no hace falta pulsar sobre un botón para realizar una acción, en la que podremos interactuar mucho más con la web y dejar de ser meros espectadores.
(más…)
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery, Usabilidad
simular iPhone en web
El diseño web es usabilidad y ¿qué hay más usable que el desplazamiento sobre la pantalla de un iPhone?. Un desplazamiento que además de facilitarnos la navegación por elementos mayores que la resolución de pantalla, nos hace tener la sensación de control absoluto sobre lo que estamos viendo, con una absoluta fluidez que nos permite fácilmente trasladarnos de un lado a otro del documento.
Pues bien, esto mismo ya está inventado para web, Overscroll es un plugin de jQuery que consigue el mismo efecto que el desplazamiento del iPhone.
En el siguiente enlace podréis ver una demo de su funcionamiento y descargaros gratuitamente el código fuente. Como véis en el ejemplo es una aplicación que asemeja el desplazamiento por pantalla del google maps.
por Omar Benyakhlef | Ajax, Diseño de páginas web, jQuery
Cargador de vídeos en jQuery
El diseño web con jQuery además de haber conseguido una mayor usabilidad y velocidad de navegación, nos proporciona una infinidad de soluciones a cuestiones que hasta ahora eran muy laboriosas y pesadas tanto de elaborar como a la hora de cargar la página. Hoy os dejo el dualSlider, otro slide en este caso utilizado como cargador de vídeos que además de ser muy vistoso, nos permite añadir acciones muy útiles a la vez que reproducimos nuestros vídeos (textos y titulares adicionales, reproducción automática…)
El paso de un vídeo a otro puede ser manual o automático, pudiendo además controlar fácilmente la velocidad de transición de uno a otro.
Por supuesto que código gratuito listo para funcionar. Podéis ver el funcionamiento y descargar todos los archivos necesarios en http://www.hugoandcat.com/DualSlider/index.html
Si queréis ver otros slides en este blog de diseño, visitad los siguientes post
