Lab
Técnicas que probamos antes de usarlas.
Experimentos con marcas ficticias, para enseñar el proceso sin usar la marca de nadie sin su permiso. Cada uno con su técnica, contada en pocas líneas.
01
Antes y después
Solera es una marca ficticia de café: la misma marca con una web de plantilla y rehecha por xstdio. Arrastra la x o usa las flechas del teclado.
Técnica · clip-path con una línea inclinada que sigue al puntero
stdin · antesstdout · después02
Texto que se ilumina
Baja despacio: cada palabra se enciende según avanzas.
Técnica · opacidad por palabra atada al scroll (scrub)
El texto está en el HTML desde el principio. La animación solo decide cuándo lo ves.
03
La x que se abre
La x del logo es una máscara SVG con la forma exacta de la letra. Al bajar crece con una escala logarítmica (para que el ritmo se note igual al principio y al final) hasta descubrir el trabajo que hay debajo.
04
Zoom continuo
Una sola foto que crece con el scroll del plato entero al grano de arroz. Solo se anima transform, así el móvil no tiene que repintar la página.
05
Volver al mismo punto
Cada entrada del historial guarda su posición de scroll. Entra en un servicio y vuelve atrás: apareces donde lo dejaste, no arriba.
Cuéntanos tu proyecto
Entra tu negocio.Sale tu web.
Dinos qué haces y qué web tienes. Te contestamos lo antes posible con una primera idea.