Ramos
Armados el mismo día
Cada efecto está funcionando aquí mismo. Baja despacio y mira para qué negocio sirve, cuánto pesa y qué hace si el celular tiene activado "reducir movimiento". Si te gusta uno, pídelo por su número.
01. Titular que entra
Las palabras del título suben una a una al abrir la página.
- Sirve para
- El titular principal de cualquier web. Va una sola vez por página, porque es el momento de entrada.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- El titular aparece completo y quieto.
Es el titular de arriba. Cada palabra sube desde una ranura con un pequeño retraso, y el texto se puede leer desde el primer instante.
02. Texto que se enciende
Las palabras de una frase se iluminan una por una mientras bajas.
- Sirve para
- La frase que resume tu forma de trabajar: consultorios, estudios, marcas personales, restaurantes con historia.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- La frase se ve completa desde el principio.
Una buena web no se mueve todo el tiempo. Se mueve justo cuando te ayuda a entender algo, y el resto del tiempo te deja leer tranquilo.
03. Cinta que corre
Una fila de palabras pasa sin fin y se detiene al poner el mouse encima.
- Sirve para
- Servicios, barrios donde llegas, marcas que vendes o tipos de clientes que atiendes.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- Las palabras se acomodan quietas en varias líneas.
04. Lista con foto flotante
Al pasar el mouse por cada fila aparece su foto, que sigue al cursor.
- Sirve para
- Portafolios, proyectos de arquitectura, cartas cortas o servicios con foto real.
- Peso
- Menos de 1 KB de JavaScript.
- Con "reducir movimiento"
- La foto aparece junto al cursor, sin retraso. En celular cada fila lleva su foto pequeña.
Masa BravaPanadería de masa madre CeibaConsultorio odontológico Hilo NorteCamisetas oversize Taller AndinoConstrucción y remodelación Tres FogonesRestaurante santandereano
Son conceptos que diseñamos para negocios ficticios. Pasa el mouse por los nombres.
05. Historia por pasos
El texto avanza con el scroll y la imagen de al lado se queda fija y cambia en cada paso.
- Sirve para
- Un proceso, una receta, la historia del negocio o un antes y después.
- Peso
- Menos de 1 KB de JavaScript.
- Con "reducir movimiento"
- Las imágenes cambian sin animación. En celular cada paso lleva su imagen.
01 / 04 Nos cuentas tu negocio
Llenas un formulario corto desde el celular: qué vendes, a quién y cómo quieres que te escriban. El logo y las fotos nos los compartes en una carpeta.
Formulario para contar el negocio, abierto en un celular02 / 04 Diseñamos con tu marca
Tus colores, tus fotos y lo que te hace distinto. Cada web tiene su propia cara, no una plantilla repetida.
Página de inicio de un consultorio odontológico en un navegador03 / 04 La revisas en tu celular
Te mandamos un enlace de prueba. La abres, se la muestras a quien quieras y nos dices qué cambiar.
La misma página abierta en un celular04 / 04 Sale publicada
Con tu dominio, rápida y lista para que te encuentren en Google y te escriban por WhatsApp.
Página de un restaurante publicada, vista en un navegador
06. Recorrido de lado
La sección se queda quieta y sus paneles pasan de lado mientras bajas.
- Sirve para
- Obras, colecciones o portafolios con pocas piezas grandes.
- Peso
- El movimiento es solo CSS; menos de 1 KB de JavaScript, que solo mide el largo de la fila.
- Con "reducir movimiento"
- Se vuelve un carrusel que se desliza con el dedo.
Son los mismos conceptos del 04, recorridos de otra manera.
07. Foto que se destapa
La foto se abre desde el centro cuando entra en pantalla.
- Sirve para
- La foto más importante: el plato estrella, el local, la obra terminada.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- La foto se ve completa desde el principio.
08. Fondo con profundidad
La imagen de fondo se mueve más despacio que la página.
- Sirve para
- Fotos amplias detrás de una frase corta: el local, una finca, una cocina, un paisaje.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- La imagen se queda quieta.
La imagen se queda atrás y el texto pasa por delante.
09. Cifras que ruedan
Cada dígito gira como un odómetro mientras la cifra sube por la pantalla y frena en su número, las unidades primero. También puede contar de cero a su valor (estilo "contar").
- Sirve para
- Cifras reales del negocio: años, sedes, pedidos entregados. Solo con datos que se puedan sostener.
- Peso
- El giro al bajar es solo CSS; menos de 1 KB de JavaScript para la cifra que ya se ve al abrir, que gira una vez por tiempo para no quedar a medio camino.
- Con "reducir movimiento"
- Las cifras se ven quietas con su valor final.
21 de 44
efectos de esta página funcionan solo con CSS, sin una línea de JavaScript.
20 KB
pesa, comprimido, todo el JavaScript de esta página: ninguno de los efectos carga una librería.
44 de 44
se calman solos si el celular tiene activado "reducir movimiento".
Son cifras medidas de esta misma página. En tu web usamos las tuyas: años, sedes, pedidos. Nunca ponemos números que no se puedan sostener.
10. Paso suave entre páginas
Al cambiar de página, la foto viaja a su nuevo lugar en vez de aparecer de golpe.
- Sirve para
- Sitios de varias páginas: de la lista de productos al producto, del portafolio al proyecto.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- La página cambia normal, sin animación.
11. Tarjetas que se apilan
Cada tarjeta se queda arriba y la siguiente la tapa, dejando ver el borde de las anteriores.
- Sirve para
- Pasos de un proceso, servicios o planes: de tres a seis tarjetas, cada una con un título y dos o tres líneas.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- Las tarjetas se apilan igual, sin achicarse.
Aquí van los pasos para pedir un efecto. Baja despacio.
Mira los efectos
Baja por esta página en tu celular. Cada efecto está funcionando de verdad y tiene su número.
Escoge dos o tres
Uno fuerte para la entrada y uno o dos pequeños para el resto. Más que eso cansa.
Escríbenos los números
Por WhatsApp, con el enlace "Quiero este en mi web" de cada efecto o con el botón del final.
Míralos en tu web
Van en el enlace de prueba, con tus fotos y tus colores. Si alguno no te convence, lo cambiamos antes de publicar.
12. Sello que gira
Una frase en círculo que da vueltas mientras bajas, como un sello de la casa.
- Sirve para
- Una frase corta de la marca junto al titular o sobre una foto, o un botón redondo para escribir.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- El sello se queda quieto y se lee igual.
Sobre la foto gira mientras bajas. Como botón gira despacio todo el tiempo y se detiene al pasar el mouse:
Ver los efectos13. Algo que vuela al bajar
Un parapente, un ave o un avión de papel cruza la sección mientras bajas y deja detrás un rastro de puntos.
- Sirve para
- Marcas con algo que vuela o hace un recorrido: turismo de aventura, viajes, domicilios y mensajería, apicultores, drones. Va sobre un dibujo o una foto amplia, una vez por página.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- Se queda quieto en su sitio, sin rastro.
Baja despacio: el parapente entra por un lado, cruza el cañón y deja su rastro. En tu web puede ser lo que vuele en tu marca, sobre un dibujo como este o sobre una foto.
14. Tablero que se enciende
Como al girar la llave: la aguja llega hasta el final y vuelve, y los testigos se prenden y se apagan uno a uno. La página puede dejar prendido el que la persona escoja.
- Sirve para
- Talleres, centros de diagnóstico, lubricentros, lavaderos, almacenes de repuestos, concesionarios y escuelas de conducción. En el hero o junto al cotizador, una vez por página.
- Peso
- Menos de 1 KB de JavaScript, que lo enciende cuando se ve y le responde a la página.
- Con "reducir movimiento"
- Se queda en el ralentí con los testigos apagados; el que se escoge se prende sin titilar.
Así puede empezar la web de un taller. Toca el testigo que se le prendería a tu carro:
15. Video de fondo
Un video corto y sin sonido se mueve en la portada. Primero se ve su foto y el video entra encima con un fundido, sin salto al volver a empezar.
- Sirve para
- Restaurantes, hoteles, glamping, tours y gimnasios: donde el ambiente vende más que una foto quieta. Con un video real del negocio de 8 a 12 segundos.
- Peso
- Menos de 1 KB de JavaScript y un video de 0,5 a 0,8 MB que se pide cuando la página ya cargó.
- Con "reducir movimiento"
- Se queda la foto, y un botón deja ver el video a quien quiera.
Este se armó con dos fotos de la demo de una floristería; en tu web va un video de tu negocio, aunque sea grabado con el celular. Lo dejamos corto, sin sonido y liviano, y el botón de la esquina lo pausa.
16. Pase de fotos
Las fotos de la portada se cambian solas con un fundido suave, y cada una se acerca o se aleja despacio mientras está.
- Sirve para
- Para quien tiene buenas fotos y no tiene video: hoteles, glamping, restaurantes, floristerías, salones de eventos. De 2 a 5 fotos.
- Peso
- Solo CSS; unas líneas de JavaScript para el botón de pausa. La primera foto carga primero y las demás después.
- Con "reducir movimiento"
- Se queda la primera foto, quieta.
Tres fotos de la demo de una floristería, cada una seis segundos. En tu web van tus fotos: con tres buenas basta, y quedan nítidas también en el celular.
18. Nombre de lado a lado
El nombre del negocio ocupa todo el ancho, justo de borde a borde, en cualquier celular o computador. Puede llevar una foto dentro de las letras que se corre al bajar.
- Sirve para
- El cierre de la página, antes del pie, o la portada de una marca con nombre corto. Una vez por web.
- Peso
- Solo CSS; una línea de JavaScript lo deja exacto cuando carga la letra.
- Con "reducir movimiento"
- Es igual: no se mueve, y la foto dentro de las letras queda quieta.
Cambia el ancho de la ventana o gira el celular: el nombre siempre llega justo a los dos bordes. El segundo lleva una foto dentro de las letras que se corre mientras bajas. En tu web va el nombre de tu negocio, con su letra.
19. Texto que rueda
Al pasar el mouse por un botón o un enlace, el texto sube y llega otro igual desde abajo.
- Sirve para
- El botón principal y el menú de una web premium. Un detalle que se nota sin distraer.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- El texto se queda quieto. En el celular tampoco se mueve, porque no hay mouse.
Pasa el mouse por los botones. Los textos son de ejemplo.
20. Encabezado que se esconde
El encabezado se queda arriba con un fondo translúcido: se esconde mientras bajas y vuelve apenas subes.
- Sirve para
- Páginas largas de una sola hoja: restaurantes, hoteles, servicios con muchas secciones. El menú y el botón de WhatsApp quedan siempre a un gesto.
- Peso
- Solo CSS para el fondo; unas líneas de JavaScript para saber si bajas o subes.
- Con "reducir movimiento"
- Se queda fijo arriba, sin esconderse.
Es el de esta página: baja un poco y vuelve a subir. Con el teclado también aparece apenas llegas a él.
21. La cuadra dibujada
La sección de cómo llegar dibuja tu cuadra desde la dirección: las manzanas aparecen, el punto cae sobre tu calle y late tres veces.
- Sirve para
- Todo negocio al que la gente llega: restaurantes, consultorios, talleres, tiendas. Va junto a los botones de Google Maps y Waze, sin cargar el mapa de Google.
- Peso
- Solo CSS; unas líneas de JavaScript esperan a que se vea.
- Con "reducir movimiento"
- La cuadra aparece completa, con el punto en su sitio.
Con una dirección de ejemplo, Calle 52 # 31-20: el 20 dice que queda a unos 20 metros de la esquina con la Carrera 31. Con tu dirección la cuadra sale sola, y al lado van los botones para abrirla en Google Maps y en Waze.
22. Foto que se abre
La foto llega como un cuadro con márgenes y, al bajar, se abre hasta llenar la pantalla; se queda un momento con su título encima y la página sigue.
- Sirve para
- La foto que tiene que sentirse en grande: el salón de un restaurante, la vista de un hotel, la mesa de un evento. Una o dos por página, nunca en la portada.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- Es una foto a pantalla completa con su título, sin el recorrido.
Foto de la demo de una floristería
Flores para el día que no se repite
23. Página que cambia de color
Al pasar de una sección clara a una oscura, la página entera se funde de un color al otro en vez de cortar en una línea.
- Sirve para
- Webs de una sola página con secciones de distinto color: restaurantes, hoteles, estudios. Le da a la página un ritmo de revista, y la barra del navegador del celular cambia con ella.
- Peso
- Menos de 1 KB de JavaScript.
- Con "reducir movimiento"
- Cada sección conserva su color y el cambio es en línea recta, sin el fundido.
Toda la página se volvió oscura, también la barra del celular.
Sigue bajando: en la próxima sección vuelve a clara. Sube otra vez y se devuelve.
24. Mapa del lugar
El terreno con sus sitios numerados. Al tocar un punto se enciende con su nombre y se abre su ficha al lado, con la foto y dos líneas; un camino de puntos los une en orden.
- Sirve para
- Glamping, fincas de eventos, hoteles campestres, parques y clubes: que la persona sepa qué hay y cómo se reparte antes de llegar. Con el plano o una foto aérea del lugar, o con un terreno dibujado.
- Peso
- Menos de 1 KB de JavaScript.
- Con "reducir movimiento"
- Los puntos y el camino aparecen quietos y la ficha se abre sin desplegarse.
Portería
La llegada: aquí se parquea y se recibe a los invitados.
Salón de eventos
Para 120 personas, con cocina y pista de baile.
Jardín de ceremonias
Bajo los árboles, con vista a la montaña.
Mirador
Para las fotos del atardecer.
Cabañas
Seis cabañas para los novios y la familia.
Una finca de ejemplo con un terreno dibujado: los sitios y los textos son ficticios. Con tu lugar va su plano o una foto aérea, y tus sitios.
25. La foto de la página que sigue
La página termina con el nombre de la siguiente y su foto, que se abre hasta los bordes al bajar. Al tocarla, la foto viaja y se vuelve la portada de la página nueva.
- Sirve para
- Webs de varias páginas: hoteles, glamping, restaurantes con carta y eventos, inmobiliarias. Invita a seguir recorriendo en vez de dejar a la persona en un final sin salida.
- Peso
- Menos de 1 KB de JavaScript.
- Con "reducir movimiento"
- La foto se ve abierta desde el principio y la página nueva aparece sin el viaje.
26. El mouse que acompaña
Al pasar el mouse por una foto, el puntero se vuelve un círculo que dice qué pasa al hacer clic y la sigue con un poco de retraso. El botón principal se deja atraer un poco por el mouse.
- Sirve para
- Portafolios, arquitectos, fotógrafos, estudios de diseño y tiendas: es el detalle que más se repite en las webs premiadas. Solo en computador; en el celular todo funciona igual, sin el efecto.
- Peso
- Menos de 1 KB de JavaScript.
- Con "reducir movimiento"
- El círculo aparece sin crecer y el botón se queda en su sitio.
Pasa el mouse por las fotos y acércalo al botón. En el celular no hay mouse: las fotos y el botón funcionan igual, sin el efecto.
27. El mosaico que se abre
Una pared de fotos que, al bajar, se abre desde el centro: la foto del medio crece hasta llenar la pantalla y las de alrededor pasan por delante y salen volando, como si la cámara las atravesara.
- Sirve para
- Negocios con muchas fotos buenas y una que los resume: hoteles y glamping, restaurantes, floristerías, salones de eventos, fotógrafos. Una vez por página, en medio.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- Se ve la foto del medio a pantalla completa con su texto, sin el mosaico.
Fotos de la demo de una floristería
Cada ramo, armado a mano
28. El negocio en cuadros
El resumen del negocio en cuadros de distintos tamaños que encajan, como en las páginas de Apple: lo que hace con una foto, si está abierto ahora, dónde queda, cómo pedir y cómo pagar. Al bajar, la grilla se arma de izquierda a derecha.
- Sirve para
- Cualquier negocio con local o con horario: floristerías, restaurantes, talleres, consultorios, salones. Debajo de la portada o antes del cierre.
- Peso
- Un script de 2 KB para el "abierto ahora"; lo demás, solo CSS.
- Con "reducir movimiento"
- Los cuadros aparecen quietos; el horario y los enlaces funcionan igual.
Datos de la demo de una floristería.
El taller
Horario
Horario
- Lunes a sábado
- 8:00 a. m. a 7:00 p. m.
- Domingos y festivos
- 9:00 a. m. a 1:00 p. m.
Dónde estamos
Calle 52 # 31-20
Cabecera del Llano, Bucaramanga
Pedidos
Para eventos
Bodas, grados y quince años
Tres ideas con precio en un día.
Pagos
Nequi, Daviplata o tarjeta
Regalos
El horario dice si está abierto ahora, con la hora de Colombia y los festivos. Pasa el mouse por los cuadros con flecha; en el celular van uno debajo del otro.
29. La línea de tiempo
Una línea que se va dibujando mientras bajas; cada fecha se enciende cuando la línea llega a ella.
- Sirve para
- La historia del negocio con sus años de verdad (floristerías, panaderías, talleres, firmas con trayectoria) o el plan de un día en un hotel, un glamping o un tour.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- La línea y todas las fechas se ven completas desde el principio.
Datos de la demo de una floristería.
Un puesto en la plaza
Rosas y girasoles de la sabana, los fines de semana.
El local en Cabecera
Con el taller a la vista para armar los ramos.
Domicilios el mismo día
Bucaramanga, Floridablanca y Girón.
Hoy
Bodas, grados y quince años
Tres ideas con precio en un día.
30. Frases que corren al bajar
Filas de letras gigantes que se corren de lado, cada una hacia un lado, solo mientras bajas; al subir se devuelven.
- Sirve para
- Lo que hace el negocio en pocas palabras, entre dos secciones: panaderías, restaurantes, floristerías, estudios y marcas de ropa.
- Peso
- Solo CSS, sin JavaScript.
- Con "reducir movimiento"
- Las filas se quedan quietas, un poco corridas entre sí.
Ramos del día, bodas y grados, cajas de rosas y domicilio hoy. Frases de la demo de una floristería.
31. Carrusel con foco
Una fila de fotos que se pasa de lado: la del centro se ve grande y con su nombre, y las de los lados se achican y se apagan.
- Sirve para
- Habitaciones de un hotel, platos, ramos, obras o productos: de 4 a 10, cada uno con su nombre y una línea.
- Peso
- El foco es solo CSS; menos de 1 KB de JavaScript para los botones, el contador y arrastrar con el mouse.
- Con "reducir movimiento"
- Todas las fotos del mismo tamaño y con su nombre, y los botones pasan de una en una sin deslizar.
Aurora
Rosas, paniculata y eucalipto.
Campo
Gerberas y margaritas.
Sol
Tulipanes amarillos.
Caja de rosas
Rosas y hortensias en caja.
Centro de mesa
Rosas de jardín y ranúnculos.
Detalle
Seis rosas para un detalle.
Pásalas con el dedo, arrastrando con el mouse o con las flechas. Son ramos de la floristería de demostración.
32. Trazo a mano
Un círculo, un subrayado, un tachón o un resaltador que se dibuja sobre una o dos palabras cuando llegas a la frase.
- Sirve para
- Lo que la persona tiene que leer primero en un titular: "llegan hoy", "sin filas", "la primera consulta es gratis". Una o dos por página.
- Peso
- El dibujo es CSS; unas líneas de JavaScript avisan cuándo se ve la frase.
- Con "reducir movimiento"
- La marca ya está dibujada.
Ramos que llegan hoy, armados a mano.
Y dentro del texto, lo que la persona tiene que ver primero. Una o dos marcas por página: si todo está marcado, nada resalta.
33. Paneles que se abren
Fotos altas una junto a otra: la que tocas con el mouse se abre y muestra su nombre, y las demás se cierran.
- Sirve para
- Los servicios de un negocio, las habitaciones de un hotel o los platos de la casa: de 3 a 6, cada uno con una línea.
- Peso
- El movimiento es CSS; unas líneas de JavaScript deciden cuál se abre.
- Con "reducir movimiento"
- Cambia de panel sin deslizar. En el celular son tarjetas una debajo de otra, igual con o sin movimiento.
Ramos
Armados el mismo día, con domicilio en la ciudad.
Cajas de regalo
Para cumpleaños y aniversarios, con tarjeta escrita a mano.
Eventos
Bodas, grados y empresas: visitamos el lugar antes.
Condolencias
Entregamos en la sala de velación, con la cinta que nos digas.
Talleres
Aprende a armar tu ramo un sábado al mes.
Pasa el mouse por las fotos o llega con Tab. En el celular son tarjetas, una debajo de otra. Son servicios de la floristería de demostración.
34. Pie que se destapa
Al final, la página sube como una hoja con las esquinas redondeadas y deja ver el pie, que estaba quieto debajo.
- Sirve para
- Cualquier web: le da al final un cierre con presencia sin agregar nada. Si el pie es muy largo para la pantalla, queda normal.
- Peso
- El efecto es CSS; unas líneas de JavaScript miden si el pie cabe en la pantalla, y solo van en las webs que lo usan.
- Con "reducir movimiento"
- El pie va normal, después de la página.
Está al final de esta página: baja hasta el fondo y mira cómo la página se levanta y deja ver el pie.
35. Rastro de fotos
Al mover el mouse por la sección van saliendo fotos donde está el puntero, una tras otra, y cada una se desvanece al poco rato.
- Sirve para
- Fotógrafos, floristerías, restaurantes y tiendas con fotos lindas: una sección de entrada o de cierre que invita a jugar. De 5 a 10 fotos de la misma luz.
- Peso
- Unas líneas de JavaScript; las fotos se piden cuando la sección está por llegar.
- Con "reducir movimiento"
- Tres fotos quedan quietas alrededor del texto, como un collage. En el celular y la tableta se ve así.
Fotos de la demo de una floristería
Flores que se quedan en la memoria
Con mouse: muévelo por aquí. En el celular, las fotos quedan quietas.
36. Linterna sobre la foto
Una sección oscura con una foto escondida: donde pasa el mouse, la foto se alumbra en un círculo de luz, como una linterna.
- Sirve para
- El bar de luz baja, el taller, la joyería o el salón de eventos: la persona recorre el lugar con el mouse. En el celular la luz recorre la foto sola.
- Peso
- El efecto es CSS (una máscara); unas líneas de JavaScript le dicen dónde está el mouse.
- Con "reducir movimiento"
- La foto entera queda quieta con un velo oscuro.
Foto de la demo de una floristería
Pasa la luz por el taller
Con mouse, muévelo por aquí. En el celular, la luz recorre la foto sola.
37. Letras que responden
Un titular cuyas letras se engruesan donde pasa el mouse, sin correr el resto del texto. Al aparecer, una ola de grosor lo recorre una vez.
- Sirve para
- Barberías, estudios, tiendas de ropa y marcas con letra propia: el nombre o la frase de la portada. En el celular queda la ola.
- Peso
- Unas líneas de JavaScript para el mouse; la ola es CSS. Usa la letra que la web ya tiene.
- Con "reducir movimiento"
- El titular queda quieto, con su grosor de siempre.
Ramos con nombre propio
Con mouse, pásalo por las letras. En el celular, la ola sale cuando llegas aquí.
38. Tarjeta que se inclina
Con el mouse encima, la tarjeta se ladea hacia el puntero, como si se tuviera en la mano, y un brillo suave la cruza.
- Sirve para
- Lo que se quiere tocar: bonos de regalo, joyas, perfumes, planes o el servicio estrella. Tres o cuatro tarjetas, no una grilla entera. En el celular, el brillo la cruza una vez al aparecer.
- Peso
- Es CSS; unas líneas de JavaScript le dicen dónde está el mouse.
- Con "reducir movimiento"
- Las tarjetas quedan quietas, sin brillo.
Arreglos
Para mesas y eventos
Tulipanes
Para regalar
Con mouse, pásalo por las tarjetas. En el celular, el brillo las cruza cuando aparecen.
39. Foto que se sale del marco
Llega como una foto normal y, al bajar, el marco se recoge y el producto queda por fuera, encima de la página.
- Sirve para
- Para el producto estrella con forma propia: un ramo, una torta, un plato, una botella, un zapato. Hace falta una foto con fondo liso y espacio arriba; el recorte lo hacemos nosotros.
- Peso
- Solo CSS, sin JavaScript. Son dos capas de la misma foto: la segunda es solo la figura.
- Con "reducir movimiento"
- La foto queda quieta, con el producto ya por fuera del marco.
Cajas que no alcanzan a guardar las rosas
Baja despacio: el marco se recoge y las rosas se quedan por fuera. En el celular también.
40. La sede más cercana
Tus sedes con su horario y si están abiertas, en un mapa dibujado. Un botón las ordena de la más cercana a la más lejana desde donde está la persona.
- Sirve para
- Negocios con más de un local: panaderías, restaurantes, salones, consultorios, talleres. La persona sabe a cuál ir y le escribe a esa sede.
- Peso
- Unas pocas líneas de JavaScript. La distancia se calcula en el celular: la ubicación de la persona no sale de ahí.
- Con "reducir movimiento"
- La lista se reordena sin deslizarse y los puntos del mapa no laten.
Sedes
Pan caliente en tres barrios
Cabecera
Calle 52 # 31-20, Cabecera del LlanoBucaramanga, SantanderA media cuadra del parque San Pío.
Horario
Horario
- Lunes a sábado
- 6:00 a. m. a 8:00 p. m.
- Domingos y festivos
- 7:00 a. m. a 1:00 p. m.
Girón
Horario
- Martes a domingo
- 7:00 a. m. a 6:00 p. m.
Toca "¿Cuál me queda más cerca?" y acepta el permiso: la lista se ordena desde donde estás. Tu ubicación no sale de tu celular.
41. Reservar mesa
Cuántos son, qué día y a qué hora, en un calendario que ya sabe qué días abre el restaurante y qué horas quedan hoy. Al lado, el tiquete con lo escogido; el pedido llega armado al WhatsApp.
- Sirve para
- Restaurantes, cafés, asaderos y bares que reciben reservas. Pregunta si celebran algo y dónde prefieren sentarse; para un grupo grande, pide la mesa por chat.
- Peso
- Unas pocas líneas de JavaScript. Las horas salen del horario del negocio, con los festivos y la hora de Colombia.
- Con "reducir movimiento"
- El número y el tiquete cambian sin subir.
Reserva tu mesa
Escríbenos con el día, la hora y cuántos son.
- Martes a sábado
- 12:00 m. a 3:30 p. m.y 6:30 p. m. a 11:00 p. m.
- Domingos y festivos
- 12:00 m. a 5:00 p. m.
42. Columnas que se cruzan
Una pared de fotos en columnas que, al bajar, corren en sentidos contrarios: una sube más rápido que la página y la de al lado se queda atrás. Puede ir ladeada, con un titular encima o al lado de un texto.
- Sirve para
- Negocios que muestran su trabajo en muchas fotos: barberías, salones de uñas, estudios de tatuaje, floristerías, pastelerías y fotógrafos. De 6 a 15 fotos con la misma luz.
- Peso
- Solo CSS, sin JavaScript. Cada columna repite sus fotos sin bajarlas otra vez.
- Con "reducir movimiento"
- Una pared de fotos quieta, con las columnas a distinta altura.
Fotos de la demo de una floristería
Ramos de hoy, hechos esta mañana
Baja despacio: cada columna va a su ritmo y, si paras, las fotos paran. También puede ir derecha, a lo ancho o al lado de un texto.
43. Galería que se arrastra
Una mesa de fotos más grande que la pantalla que se recorre arrastrando hacia cualquier lado, y nunca se acaba: al salir por un borde vuelven las primeras. Mientras se arrastra las fotos se encogen un poco, al soltar sigue un rato por inercia y después pasea sola, despacio.
- Sirve para
- Negocios con muchas fotos buenas que dan ganas de recorrer: fotógrafos, estudios de arquitectura y diseño, floristerías, tatuajes, marcas de ropa y hoteles. De 8 a 14 fotos con la misma luz. En el celular se arrastra a lo ancho y la página sigue bajando normal.
- Peso
- Unas pocas líneas de JavaScript. Las fotos se piden a medida que aparecen; las copias no pesan más.
- Con "reducir movimiento"
- Se arrastra igual, sin inercia, y no pasea sola. Con el teclado se recorre con las flechas.
Fotos de la demo de una floristería
Todo lo que sale de nuestras manos
Arrastra para recorrerla, o usa las flechas
Arrástrala hacia cualquier lado: nunca se acaba. En el celular se arrastra a lo ancho y la página baja normal; con el teclado, las flechas.
44. Letrero que se voltea
Un letrero de paletas como los de las estaciones de antes: cada letra se voltea, una tras otra, hasta formar el mensaje, y cada tanto pasa al siguiente.
- Sirve para
- Un dato corto que vale la pena mirar: el almuerzo y los domicilios de un restaurante, las salidas de una agencia, el horario de una barbería, las fechas de la renta de un contador. De 1 a 4 filas de hasta 16 letras.
- Peso
- Unas pocas líneas de JavaScript; solo se mueve mientras se ve.
- Con "reducir movimiento"
- Las letras cambian sin voltearse y el letrero empieza en pausa. El botón de la esquina lo pausa siempre.
- Menú del día, Sancocho, $18.000
- Jugo natural, mora o lulo, incluido
- Domicilios, hasta las, 9:00 p. m.
El menú de un restaurante de prueba, no de uno de verdad. Cada cinco segundos pasa al siguiente mensaje y el botón de la esquina lo pausa. En tu web va un dato corto de tu negocio: el almuerzo y los domicilios, las próximas salidas, el horario.
Y en todas las webs, sin pedirlo
- Los botones responden al toque.
- Las preguntas frecuentes se despliegan suave. Pruébalo abajo.
- En las webs con pedido por WhatsApp, cada producto confirma que se agregó y el pedido se abre de lado.
- Los números de Nequi, de cuenta o el NIT se copian con un toque:
Enlace de esta páginamuestrario.pages.dev
Preguntas sobre el movimiento
¿Los efectos hacen más lenta la página?
Casi nunca. 21 de los 44 son solo CSS y no agregan peso. Ninguno carga librerías: el movimiento va en CSS y el JavaScript son unas pocas líneas por efecto. Esta página, con los 44 efectos, saca 100 de 100 en velocidad en celular según Lighthouse, la herramienta de Google.
¿Se ven en todos los celulares?
En Chrome, Safari y Edge recientes, sí. En un navegador que no soporte algún efecto, el contenido se ve completo y quieto: nunca se pierde información.
¿Qué pasa si alguien tiene activado "reducir movimiento"?
Los efectos se calman solos y la página se ve quieta y completa. Hay personas a las que el movimiento en pantalla las marea, y así también pueden usar tu web.
¿Cuántos efectos debería tener mi página?
Dos o tres. Uno fuerte para la entrada y uno o dos pequeños en el resto. Cuando todo se mueve, nada llama la atención y la página se siente de plantilla.
¿Puedo pedir un efecto que no está aquí?
Sí. Mándanos el enlace de la página donde lo viste y te decimos si se puede hacer y cuánto pesaría.
¿Cuál te gustó?
Escríbenos el número y te contamos cómo se vería en tu web. Recomendamos dos o tres efectos por página: cuando todo se mueve, nada llama la atención.