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 | CSS, Diseño Web, HTML5, Trucos CSS
Notificaciones tipo iPhone con HTML5
El diseño web está muy ligado al resto de diseños tecnológicos, sobre todo al diseño realizado para smartphones. Hoy os dejo algo que seguro que os gusta. Se trata de la notificación que aparece en el iPhone (por ejemplo), cuando tenemos mensajes pendientes de leer.
Realizado en CSS3 y HTML5, aquí os dejo una demo y el código listo para descargar. Espero que os sea útil.
por Omar Benyakhlef | Diseño Web
Casa Rural en Sevilla. El Pedroso
Acabo de entregar un Diseño Web, una web para unas casas rurales en El Pedroso, Sevilla.
Toda la web está realizada con WordPress. La web es un tres en uno, se trata de tres casas rurales en una misma web, cada una con su galería de fotos, su calendario de ocupación e incluso con su mapa Google Maps para ubicarla.
Por supuesto, al ser WordPress, la web entera es autogestionable desde su gestor de contenidos.
por Omar Benyakhlef | Diseño Web
Internet un espacio libre
«Somos una legión, no perdonamos, no olvidamos, espéranos.»
por Omar Benyakhlef | CSS, Diseño Web, jQuery
Buscador elástico con jQuery y CSS
Seguramente más de uno se habrá fijado en el buscador de Apple. Nada más pinchar sobre él se hace más ancho para dar mayor cabida al texto de búsqueda, pocas cosas hay que haga Apple que luego no marquen tendencia en el diseño web y en todo tipo de diseños.
Hoy os dejo un buscador que hace lo mismo, se expande y además incorpora la famosa «x» que también podemos ver en los buscadores de iPhone o iPad.
Me ha parecido muy interesante, visualmente me parece extraordinario, pero luego además la CSS es muy completa, usa degradados e incorpora también la integración de fuentes externas a las de sistema.
Os dejo aquí la dirección para poder ver la demo y descargaros los archivos.
MÁS EJEMPLOS JQUERY EN BOXTUFFS.COM
Una vez que entréis en Boxtuffs, os aconsejo que echéis un vistazo a todos el material que os ofrece, hay cosas realmente útiles y vistosas.
por Omar Benyakhlef | CSS, Diseño Web, jQuery
Efectos jQuery para textos
Este es un efecto que venimos viendo en los nuevos diseños web.
En el artículo «Tendencias Diseño Web para 2012. SCROLL PARALLAX«, podéis ver varios ejemplos con imágenes y textos, que toman vida al hacer scroll sobre la página.
Hoy os dejo el código para realizar efectos con textos, podéis descargar el ejemplo y ver cómo se realizan los distintos efectos de zoom, rotate, fade, … Luego queda la imaginación y aplicar esto en vuestros diseños, el resultado es por lo menos «vistoso y sorprendente», espero que os sirva.
