Alinear dos cajas una al lado de la otra

Normalmente cuando tenía que alinear dos cajas horizontalmente hacía lo que todos: display inline-bock y con widths de un 47%… Pero existe una manera mejor para tener resultados mucho mejores.
Seguir leyendo +

Video de fondo a pantalla completa

Está muy de moda poner videos de fondo en las webs pero a menudo se hace un poco duro que se adapte a la pantalla ya que el tag de video mantienen proporciones, no es cómo poner una imagen de fondo y poner un background-size: ...
Seguir leyendo +

Insertar mapas de Google con Gmap3

Cuando hacemos una web para una empresa (o similar) no suelen pedir un apartado de contacto y lo que no puede faltar en esta página es un mapa de situación. Google Maps siempre es la mejor opción pero ¿cuál es la mejor manera de ponerlo? ...
Seguir leyendo +

Eventos on scroll

Hubo un tiempo en que estaba muy de moda el parallax. Pues aún está de moda pero algo más importante que estos efectos puede ser la transformación de los elementos en base al scroll, cómo podría ser un menu que se vuelve fixed. Para ello ...
Seguir leyendo +

Cómo insertar un video de youtube con Javascript

A veces simplemente insertamos un video en nuestro blog sólo copiando y pegando el código embed de youtube. Pero ese código no nos deja manejar mucho el propio vídeo una vez insertado A continuación os dejo una muestra de cómo se cargaría un video mediante javascript ...
Seguir leyendo +

“Copy to clipboard”, conocido para flash y desconocido para javascript, hasta ahora

Flash siempre ha sido la herramienta por excelencia para desarrollar un botón de clipboard, es que hacemos cada día de copiar/pegar. Hasta hoy que un desarrollador llamado Zeno Rocha ha creado un javascript que lo soluciona con mucha elegancia y versatilidad así como con una ...
Seguir leyendo +

Hacer un elemento de comportamiento transparente

Cuando realizamos proyectos creativos de animaciones, parallax, infografías… los elementos se superponen y a veces no nos interesa que los elemntos decorativos que quedan por encima tengan ciertos privilegios de comportamiento que los de debajo. Aunque un div que tiene árbol esté en primer plano ...
Seguir leyendo +

Igualar el largo de dos líneas de texto

Para hacer este blog entro otro a menudo necesito investigar y encontrar plugins escondidos por la web. Me molestaba mucho no poder tener unos título bonitos con dos líneas de texto si hacía falta pero no de cualquier manera sino compensados de peso. Pero gracias ...
Seguir leyendo +

Cómo fijar un menu cuando llega arriba de la pantalla

Cuando navegamos, hay ciertos comportamientos de los elementos de una web que nos ayudan a poder acceder rápidamente a otro contenido. Este es el caso del menu fijo. En este post enseñaremos cómo hacer que un menu que se mueve con el scroll quede fijo ...
Seguir leyendo +

Método alternativo para que el .pageYOffset funcione hasta en IE8

Com esto de las webs en parallax estoy utilizando un montón el método window.onscroll = scroll;. Para coger el valor del scroll normalmente uso .pageYOffset, pero me he dado cuenta que en IE8 e inferiores no funciona.
Seguir leyendo +

Un scroll que nunca acaba

Hoy, navegando un poco por webs premiadas por awwwards, he encontrado esta web. Me ha gustado mucho el hecho de que una vez llega al final empalma otra vez con el principio lo que hace que la web no tenga nunca fin.
Seguir leyendo +

Cómo añadir animaciones y efectos a los elementos mientras haces scroll (parallax sencillo)

Últimamente se ha puesto muy de moda las webs de una sólo página, sobretodo para páginas de portfolio, de empresas o microsites. Hay numerosos plugins para hacer efectos espectaculares pero a menudo son muy complicados de modificar. Personalmente me gusta mucho más trabajar con transiciones ...
Seguir leyendo +

Smooth scrolling

Se ha puesto muy de moda las páginas que scrollean a lo largo de una gran y única página principal, pero a menudo nos encontramos con que el scroll no lo hace moviendo sino saltando. Pues bien os presento el plugin para hacer smooth. Lo ...
Seguir leyendo +

Transformar elementos a través del valor de scroll

Recientemente se ha puesto de moda los elementos de una web que se transforman a través del scroll. Eso quiere decir que cuando haces scroll hay ciertos elementos, como el menú o el logo que se vuelven pequeños se recolocan para ofrecer una experiencia web ...
Seguir leyendo +

Cómo hacer un parallax sencillo

A menudo nos resulta muy complicado explicar y aprender cómo funciona un parallax. Pues bien os voy a presentar una opción más cutre del efecto de parallax. Se trata de mover el fondo de la web en el sentido contrario al de la navegación, ahí ...
Seguir leyendo +

Detectar iPhones, iPod touch y Androids para redirigirlos a una versión móvil

Muchas veces nos encontramos que nuestra web no está preparada para una versión móvil (ya sea porque tiene flash o porque el diseño se ve muy pequeño…). Pues tenemos la solución muy sencilla:
Seguir leyendo +