{"id":19469,"date":"2026-08-26T06:48:00","date_gmt":"2026-08-26T04:48:00","guid":{"rendered":"https:\/\/martagonzalez.dev\/wp\/blog\/\/"},"modified":"2026-06-12T07:23:17","modified_gmt":"2026-06-12T05:23:17","slug":"como-animar-elementos-al-hacer-scroll-sin-javascript","status":"publish","type":"post","link":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/","title":{"rendered":"C\u00f3mo animar elementos al hacer scroll sin JavaScript"},"content":{"rendered":"
<\/div>
<\/div><\/div>\n
\"\"<\/figure>\n\n\n\n

Animar elementos al hacer scroll sin JavaScript es una de esas t\u00e9cnicas que hace unos a\u00f1os parec\u00eda depender casi siempre de librer\u00edas externas, detectores de intersecci\u00f3n, escuchas de eventos o soluciones personalizadas con scroll<\/code>. Sin embargo, CSS ha avanzado mucho, y hoy podemos crear animaciones vinculadas al desplazamiento<\/strong> de una p\u00e1gina de forma mucho m\u00e1s declarativa, limpia y cercana al propio lenguaje de estilos.<\/p>\n\n\n\n

Cuando hablamos de animaciones scroll CSS sin JavaScript<\/em>, no nos referimos \u00fanicamente a \u201chacer aparecer cosas con un poco de opacidad\u201d. Hablamos de barras de progreso, textos que entran suavemente en pantalla, im\u00e1genes que se revelan al hacer scroll, secciones que se desplazan con efecto parallax moderado y componentes que reaccionan al avance del usuario dentro de una p\u00e1gina.<\/p>\n\n\n\n

La gran ventaja es clara: podemos mejorar la experiencia visual sin a\u00f1adir complejidad innecesaria al proyecto. Eso s\u00ed, tambi\u00e9n conviene ser realistas. Las animaciones basadas en scroll con CSS moderno son muy potentes, pero todav\u00eda requieren una estrategia de compatibilidad progresiva. En otras palabras: podemos usarlas, pero debemos prepararlas para que la web siga funcionando correctamente aunque el navegador no soporte todas las propiedades m\u00e1s recientes.<\/p>\n\n\n\n

En este art\u00edculo vamos a ver c\u00f3mo animar al hacer scroll con CSS<\/strong>, qu\u00e9 propiedades modernas entran en juego, cu\u00e1ndo conviene usarlas, c\u00f3mo plantear alternativas seguras y qu\u00e9 buenas pr\u00e1cticas deber\u00edas aplicar para que tus animaciones sean bonitas, accesibles y sostenibles.<\/p>\n\n\n\n

Qu\u00e9 significa animar al hacer scroll sin JavaScript<\/h2>\n\n\n\n

Animar al hacer scroll significa que una animaci\u00f3n no depende \u00fanicamente del paso del tiempo, como ocurre con una animaci\u00f3n CSS tradicional. En una animaci\u00f3n cl\u00e1sica, defines unos @keyframes<\/code>, asignas una duraci\u00f3n y el navegador reproduce la animaci\u00f3n durante un n\u00famero determinado de segundos.<\/p>\n\n\n\n

Por ejemplo:<\/p>\n\n\n\n

.card {\n  animation: fade-in 0.8s ease both;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(24px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n<\/code><\/pre>\n\n\n\n
Este c\u00f3digo anima la tarjeta cuando se carga o cuando aparece en el flujo normal del documento, pero no est\u00e1 realmente vinculado al scroll. La animaci\u00f3n ocurre por tiempo.<\/p>\n\n\n\n
En cambio, una scroll animation CSS<\/strong> conecta el progreso de la animaci\u00f3n con el desplazamiento del usuario. Es decir, la animaci\u00f3n avanza, retrocede o se completa seg\u00fan la posici\u00f3n de scroll.<\/p>\n\n\n\n
Esto permite crear efectos como:<\/p>\n\n\n\n
    \n
  • Barras de lectura que se llenan al avanzar por un art\u00edculo.<\/li>\n\n\n\n
  • Elementos que aparecen cuando entran en el viewport.<\/li>\n\n\n\n
  • Im\u00e1genes que se revelan progresivamente.<\/li>\n\n\n\n
  • T\u00edtulos que se desplazan o escalan de forma suave.<\/li>\n\n\n\n
  • Secciones que ganan opacidad a medida que el usuario baja.<\/li>\n<\/ul>\n\n\n\n
    La diferencia principal es conceptual: ya no pensamos en una duraci\u00f3n fija, sino en una relaci\u00f3n entre posici\u00f3n de scroll<\/strong> y progreso de animaci\u00f3n<\/strong>.<\/p>\n\n\n\n
    La base t\u00e9cnica: CSS Scroll-Driven Animations<\/h2>\n\n\n\n
    Las animaciones al hacer scroll sin JavaScript se apoyan en lo que se conoce como CSS Scroll-Driven Animations<\/strong>. Este conjunto de propiedades permite asociar una animaci\u00f3n CSS a una l\u00ednea temporal basada en el desplazamiento.<\/p>\n\n\n\n
    En lugar de utilizar \u00fanicamente la l\u00ednea temporal tradicional del documento, CSS puede usar una l\u00ednea temporal derivada del scroll. Esto abre la puerta a animaciones declarativas, sin necesidad de escuchar eventos scroll<\/code> desde JavaScript.<\/p>\n\n\n\n
    Scroll timeline y view timeline<\/h3>\n\n\n\n
    Dentro de este enfoque hay dos ideas importantes:<\/p>\n\n\n\n
    Scroll timeline<\/h4>\n\n\n\n
    Una scroll timeline<\/em> vincula la animaci\u00f3n al progreso de desplazamiento de un contenedor. Es \u00fatil, por ejemplo, para crear una barra de progreso de lectura que se rellena desde el inicio hasta el final de la p\u00e1gina.<\/p>\n\n\n\n
    En este caso, la animaci\u00f3n responde al avance general del scroll.<\/p>\n\n\n\n
    View timeline<\/h4>\n\n\n\n
    Una view timeline<\/em> vincula la animaci\u00f3n a la visibilidad de un elemento dentro del viewport. Es decir, el elemento puede empezar a animarse cuando entra en pantalla y completar la animaci\u00f3n cuando alcanza una determinada zona visible.<\/p>\n\n\n\n
    Este enfoque es especialmente \u00fatil para animar elementos al hacer scroll CSS<\/strong> sin tener que detectar manualmente si el elemento est\u00e1 visible.<\/p>\n\n\n\n
    Ejemplo b\u00e1sico: animar una tarjeta al entrar en pantalla<\/h2>\n\n\n\n
    Vamos a partir de un ejemplo sencillo. Imagina una serie de tarjetas dentro de una p\u00e1gina de servicios, portfolio o blog. Queremos que cada tarjeta aparezca suavemente cuando el usuario llega a esa zona.<\/p>\n\n\n\n
    HTML de ejemplo<\/h3>\n\n\n\n
    <section class=\"features\">\n  <article class=\"feature-card\">\n    <h2>Dise\u00f1o responsive<\/h2>\n    <p>Interfaces adaptadas a cualquier tama\u00f1o de pantalla.<\/p>\n  <\/article>\n\n  <article class=\"feature-card\">\n    <h2>Animaciones suaves<\/h2>\n    <p>Microinteracciones cuidadas para mejorar la experiencia.<\/p>\n  <\/article>\n\n  <article class=\"feature-card\">\n    <h2>CSS moderno<\/h2>\n    <p>Soluciones visuales limpias sin depender siempre de JavaScript.<\/p>\n  <\/article>\n<\/section>\n<\/code><\/pre>\n\n\n\n
    CSS con animation-timeline: view()<\/code><\/h3>\n\n\n\n
    .feature-card {\n  opacity: 0;\n  transform: translateY(40px);\n  animation: reveal-card linear both;\n  animation-timeline: view();\n  animation-range: entry 10% cover 35%;\n}\n\n@keyframes reveal-card {\n  from {\n    opacity: 0;\n    transform: translateY(40px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n<\/code><\/pre>\n\n\n\n
    Con este c\u00f3digo, cada tarjeta se anima en relaci\u00f3n con su entrada en pantalla. La propiedad animation-timeline: view()<\/code> indica que la animaci\u00f3n depender\u00e1 de la visibilidad del propio elemento.<\/p>\n\n\n\n
    La propiedad animation-range<\/code> define en qu\u00e9 tramo de esa visibilidad empieza y termina la animaci\u00f3n. En este caso, la tarjeta comienza a animarse cuando entra parcialmente en pantalla y completa su transici\u00f3n cuando ya ocupa una parte m\u00e1s clara del viewport.<\/p>\n\n\n\n
    Este patr\u00f3n es ideal para crear una sensaci\u00f3n de progresi\u00f3n sin convertir la p\u00e1gina en un espect\u00e1culo excesivo. La animaci\u00f3n acompa\u00f1a al contenido, no compite con \u00e9l.<\/p>\n\n\n\n
    Barra de progreso de lectura solo con CSS<\/h2>\n\n\n\n
    Una de las aplicaciones m\u00e1s \u00fatiles de las animaciones vinculadas al scroll es la barra de progreso de lectura<\/strong>. Es habitual verla en art\u00edculos largos, gu\u00edas t\u00e9cnicas o p\u00e1ginas de documentaci\u00f3n.<\/p>\n\n\n\n
    La idea es sencilla: una barra fija en la parte superior de la p\u00e1gina se va rellenando a medida que el usuario avanza.<\/p>\n\n\n\n
    HTML<\/h3>\n\n\n\n
    <div class=\"reading-progress\"><\/div>\n<\/code><\/pre>\n\n\n\n
    CSS<\/h3>\n\n\n\n
    .reading-progress {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 999;\n  width: 100%;\n  height: 4px;\n  transform-origin: left;\n  transform: scaleX(0);\n  animation: reading-progress linear both;\n  animation-timeline: scroll(root);\n}\n\n@keyframes reading-progress {\n  to {\n    transform: scaleX(1);\n  }\n}\n<\/code><\/pre>\n\n\n\n
    Aqu\u00ed usamos animation-timeline: scroll(root)<\/code>, que vincula la animaci\u00f3n al scroll del documento ra\u00edz. La barra empieza con scaleX(0)<\/code> y termina con scaleX(1)<\/code>, creando una sensaci\u00f3n de avance visual muy clara.<\/p>\n\n\n\n
    Este tipo de detalle mejora la orientaci\u00f3n del usuario. En art\u00edculos extensos, una barra de progreso puede ayudar a entender cu\u00e1nto contenido queda por leer sin a\u00f1adir textos, porcentajes ni componentes adicionales.<\/p>\n\n\n\n
    Animaciones de revelado con imagen y texto<\/h2>\n\n\n\n
    Otra t\u00e9cnica muy interesante consiste en revelar im\u00e1genes o bloques visuales a medida que entran en pantalla. Este efecto puede funcionar muy bien en portfolios, landing pages, p\u00e1ginas de producto o art\u00edculos visuales.<\/p>\n\n\n\n
    HTML<\/h3>\n\n\n\n
    <figure class=\"image-reveal\">\n  <img src=\"proyecto-web.jpg\" alt=\"Vista previa de un proyecto web responsive\">\n<\/figure>\n<\/code><\/pre>\n\n\n\n
    CSS<\/h3>\n\n\n\n
    .image-reveal {\n  overflow: hidden;\n}\n\n.image-reveal img {\n  display: block;\n  width: 100%;\n  transform: scale(1.15);\n  opacity: 0;\n  animation: reveal-image linear both;\n  animation-timeline: view();\n  animation-range: entry 15% cover 45%;\n}\n\n@keyframes reveal-image {\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n<\/code><\/pre>\n\n\n\n
    En este caso combinamos opacity<\/code> y transform<\/code>, dos propiedades especialmente recomendables para animaciones porque suelen ser m\u00e1s eficientes que modificar dimensiones, m\u00e1rgenes o posiciones que obliguen al navegador a recalcular el layout.<\/p>\n\n\n\n
    El resultado es una imagen que aparece suavemente mientras reduce su escala. Es un efecto elegante, f\u00e1cil de entender y suficientemente discreto para no saturar la experiencia.<\/p>\n\n\n\n
    Hacer que el texto acompa\u00f1e al movimiento<\/h3>\n\n\n\n
    Tambi\u00e9n podemos aplicar una animaci\u00f3n similar a los textos:<\/p>\n\n\n\n
    .scroll-title {\n  opacity: 0;\n  transform: translateY(32px);\n  animation: reveal-title linear both;\n  animation-timeline: view();\n  animation-range: entry 20% cover 40%;\n}\n\n@keyframes reveal-title {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n<\/code><\/pre>\n\n\n\n
    Este patr\u00f3n funciona muy bien en encabezados de secci\u00f3n. La clave est\u00e1 en no abusar. Si cada p\u00e1rrafo, imagen, bot\u00f3n y tarjeta de una p\u00e1gina se anima, la experiencia puede volverse cansada. La animaci\u00f3n debe tener una intenci\u00f3n: guiar, jerarquizar o reforzar una transici\u00f3n visual.<\/p>\n\n\n\n
    Compatibilidad: c\u00f3mo usar CSS moderno sin romper la experiencia<\/h2>\n\n\n\n
    Aqu\u00ed conviene hacer una pausa importante. Aunque las animaciones de scroll con CSS son una herramienta muy prometedora, no deber\u00edas construir una experiencia que dependa al cien por cien de ellas.<\/p>\n\n\n\n
    La mejor estrategia es aplicar mejora progresiva<\/strong>. Es decir, primero defines un dise\u00f1o funcional y accesible para todos los navegadores. Despu\u00e9s, a\u00f1ades la animaci\u00f3n solo cuando el navegador soporte las propiedades necesarias.<\/p>\n\n\n\n
    Usar @supports<\/code><\/h3>\n\n\n\n
    Podemos envolver nuestras animaciones modernas dentro de una regla @supports<\/code>:<\/p>\n\n\n\n
    .feature-card {\n  opacity: 1;\n  transform: none;\n}\n\n@supports (animation-timeline: view()) {\n  .feature-card {\n    opacity: 0;\n    transform: translateY(40px);\n    animation: reveal-card linear both;\n    animation-timeline: view();\n    animation-range: entry 10% cover 35%;\n  }\n}\n<\/code><\/pre>\n\n\n\n
    Este enfoque es mucho m\u00e1s seguro. Por defecto, la tarjeta se muestra normalmente. Si el navegador soporta animation-timeline: view()<\/code>, entonces se aplica la animaci\u00f3n.<\/p>\n\n\n\n
    Esto evita uno de los errores m\u00e1s peligrosos: dejar elementos con opacity: 0<\/code> en navegadores que no soportan la animaci\u00f3n. Si eso ocurre, el contenido podr\u00eda quedar invisible para parte de los usuarios.<\/p>\n\n\n\n
    Orden correcto de las propiedades<\/h3>\n\n\n\n
    Un detalle importante: si usas la propiedad abreviada animation<\/code>, declara animation-timeline<\/code> despu\u00e9s. Algunas propiedades abreviadas pueden reiniciar valores relacionados con la animaci\u00f3n, por lo que conviene mantener un orden claro:<\/p>\n\n\n\n
    .element {\n  animation: reveal linear both;\n  animation-timeline: view();\n}\n<\/code><\/pre>\n\n\n\n
    Evita hacer esto:<\/p>\n\n\n\n
    .element {\n  animation-timeline: view();\n  animation: reveal linear both;\n}\n<\/code><\/pre>\n\n\n\n
    Aunque parezca un detalle menor, este tipo de orden puede marcar la diferencia entre una animaci\u00f3n que funciona y otra que no se aplica como esperabas.<\/p>\n\n\n\n
    Buenas pr\u00e1cticas para animar al hacer scroll con CSS<\/h2>\n\n\n\n
    Animar con scroll no consiste en a\u00f1adir movimiento porque s\u00ed. Una buena animaci\u00f3n tiene una funci\u00f3n. Debe aportar claridad, ritmo o contexto.<\/p>\n\n\n\n
    Prioriza opacity<\/code> y transform<\/code><\/h3>\n\n\n\n
    Cuando sea posible, anima propiedades como:<\/p>\n\n\n\n
      \n
    • opacity<\/code><\/li>\n\n\n\n
    • transform: translate<\/code><\/li>\n\n\n\n
    • transform: scale<\/code><\/li>\n\n\n\n
    • transform: rotate<\/code><\/li>\n<\/ul>\n\n\n\n
      Estas propiedades suelen ser m\u00e1s adecuadas para animaciones fluidas porque no modifican directamente el flujo del documento.<\/p>\n\n\n\n
      En cambio, conviene evitar animar propiedades como:<\/p>\n\n\n\n
        \n
      • width<\/code><\/li>\n\n\n\n
      • height<\/code><\/li>\n\n\n\n
      • margin<\/code><\/li>\n\n\n\n
      • top<\/code><\/li>\n\n\n\n
      • left<\/code><\/li>\n\n\n\n
      • padding<\/code><\/li>\n<\/ul>\n\n\n\n
        No significa que est\u00e9n prohibidas, pero pueden generar m\u00e1s trabajo de renderizado y afectar al rendimiento si se usan en exceso.<\/p>\n\n\n\n
        No conviertas cada scroll en una feria visual<\/h3>\n\n\n\n
        Una p\u00e1gina llena de animaciones puede parecer moderna durante los primeros segundos, pero cansar r\u00e1pidamente. Lo recomendable es elegir puntos clave:<\/p>\n\n\n\n
          \n
        • La entrada de una secci\u00f3n importante.<\/li>\n\n\n\n
        • Una imagen destacada.<\/li>\n\n\n\n
        • Una barra de progreso.<\/li>\n\n\n\n
        • Un bloque de llamada a la acci\u00f3n.<\/li>\n\n\n\n
        • Una transici\u00f3n entre partes del contenido.<\/li>\n<\/ul>\n\n\n\n
          El movimiento debe acompa\u00f1ar al usuario, no interrumpirlo.<\/p>\n\n\n\n
          Cuida la duraci\u00f3n percibida<\/h3>\n\n\n\n
          En las animaciones scroll CSS sin JavaScript, la duraci\u00f3n no se mide igual que en una animaci\u00f3n temporal. Depende del tramo de scroll asignado. Por eso animation-range<\/code> es tan importante.<\/p>\n\n\n\n
          Un rango demasiado corto puede hacer que el efecto sea brusco. Un rango demasiado largo puede hacer que la animaci\u00f3n parezca lenta o imprecisa.<\/p>\n\n\n\n
          Una buena regla inicial es probar rangos como:<\/p>\n\n\n\n
          animation-range: entry 10% cover 35%;\n<\/code><\/pre>\n\n\n\n
          O bien:<\/p>\n\n\n\n
          animation-range: entry 20% cover 50%;\n<\/code><\/pre>\n\n\n\n
          Despu\u00e9s ajusta seg\u00fan el tipo de elemento, el ritmo de la p\u00e1gina y la importancia visual del contenido.<\/p>\n\n\n\n
          Accesibilidad: respeta prefers-reduced-motion<\/code><\/h2>\n\n\n\n
          No todas las personas disfrutan de las animaciones. Para algunos usuarios, ciertos movimientos pueden resultar molestos, distraer o incluso provocar incomodidad. Por eso es fundamental respetar la preferencia del sistema mediante prefers-reduced-motion<\/code>.<\/p>\n\n\n\n
          @media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n  }\n}\n<\/code><\/pre>\n\n\n\n
          Tambi\u00e9n puedes ser m\u00e1s espec\u00edfica y desactivar solo las animaciones vinculadas al scroll:<\/p>\n\n\n\n
          @media (prefers-reduced-motion: reduce) {\n  .feature-card,\n  .image-reveal img,\n  .scroll-title {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}\n<\/code><\/pre>\n\n\n\n
          Este segundo enfoque suele ser m\u00e1s controlado. Permite mantener la interfaz estable y evita que el contenido dependa del movimiento para ser comprensible.<\/p>\n\n\n\n
          La accesibilidad no deber\u00eda verse como una capa final, sino como parte del dise\u00f1o de la animaci\u00f3n desde el principio.<\/p>\n\n\n\n
          CSS sin JavaScript no significa CSS sin estrategia<\/h2>\n\n\n\n
          Usar CSS sin JavaScript para animaciones de scroll tiene muchas ventajas. Reduce dependencias, simplifica el mantenimiento y permite escribir efectos visuales de forma m\u00e1s declarativa. Pero eso no significa que debamos aplicarlo sin criterio.<\/p>\n\n\n\n
          Hay casos en los que CSS ser\u00e1 suficiente:<\/p>\n\n\n\n
            \n
          • Efectos de aparici\u00f3n simples.<\/li>\n\n\n\n
          • Barras de progreso.<\/li>\n\n\n\n
          • Revelados visuales.<\/li>\n\n\n\n
          • Animaciones decorativas no cr\u00edticas.<\/li>\n\n\n\n
          • Microinteracciones asociadas a la visibilidad del elemento.<\/li>\n<\/ul>\n\n\n\n
            Pero tambi\u00e9n hay casos en los que JavaScript puede seguir siendo necesario:<\/p>\n\n\n\n
              \n
            • Animaciones con l\u00f3gica compleja.<\/li>\n\n\n\n
            • Estados dependientes de datos.<\/li>\n\n\n\n
            • Sincronizaci\u00f3n con componentes interactivos.<\/li>\n\n\n\n
            • Experiencias donde la animaci\u00f3n modifica comportamiento real.<\/li>\n\n\n\n
            • Compatibilidad estricta con navegadores antiguos.<\/li>\n<\/ul>\n\n\n\n
              La clave est\u00e1 en elegir la herramienta adecuada. Si el efecto es visual, progresivo y no cr\u00edtico, CSS puede ser una opci\u00f3n excelente. Si la animaci\u00f3n forma parte de una l\u00f3gica m\u00e1s compleja, quiz\u00e1 JavaScript siga teniendo sentido.<\/p>\n\n\n\n
              Ejemplo completo: secci\u00f3n animada al hacer scroll<\/h2>\n\n\n\n
              Veamos un ejemplo m\u00e1s completo que combina buenas pr\u00e1cticas, mejora progresiva y accesibilidad.<\/p>\n\n\n\n
              HTML<\/h3>\n\n\n\n
              <section class=\"services-section\">\n  <header class=\"section-header\">\n    <p class=\"eyebrow\">Servicios web<\/p>\n    <h2>Interfaces modernas con CSS limpio y eficiente<\/h2>\n    <p>\n      Creamos experiencias visuales cuidadas, accesibles y adaptadas\n      a diferentes dispositivos.\n    <\/p>\n  <\/header>\n\n  <div class=\"services-grid\">\n    <article class=\"service-card\">\n      <h3>Dise\u00f1o responsive<\/h3>\n      <p>Componentes pensados para funcionar en m\u00f3vil, tablet y escritorio.<\/p>\n    <\/article>\n\n    <article class=\"service-card\">\n      <h3>Animaciones CSS<\/h3>\n      <p>Microinteracciones suaves que mejoran la experiencia sin sobrecargarla.<\/p>\n    <\/article>\n\n    <article class=\"service-card\">\n      <h3>Optimizaci\u00f3n visual<\/h3>\n      <p>Interfaces r\u00e1pidas, claras y alineadas con los objetivos del proyecto.<\/p>\n    <\/article>\n  <\/div>\n<\/section>\n<\/code><\/pre>\n\n\n\n
              CSS<\/h3>\n\n\n\n
              .services-section {\n  padding: 6rem 1.5rem;\n}\n\n.section-header,\n.service-card {\n  opacity: 1;\n  transform: none;\n}\n\n.services-grid {\n  display: grid;\n  gap: 1.5rem;\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n}\n\n.service-card {\n  padding: 1.5rem;\n  border-radius: 1rem;\n  background: #ffffff;\n  box-shadow: 0 16px 40px rgb(0 0 0 \/ 0.08);\n}\n\n@supports (animation-timeline: view()) {\n  .section-header {\n    opacity: 0;\n    transform: translateY(32px);\n    animation: reveal-block linear both;\n    animation-timeline: view();\n    animation-range: entry 10% cover 35%;\n  }\n\n  .service-card {\n    opacity: 0;\n    transform: translateY(40px);\n    animation: reveal-block linear both;\n    animation-timeline: view();\n    animation-range: entry 15% cover 40%;\n  }\n}\n\n@keyframes reveal-block {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .section-header,\n  .service-card {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}\n<\/code><\/pre>\n\n\n\n
              Este ejemplo tiene tres puntos importantes. Primero, el contenido es visible por defecto. Segundo, la animaci\u00f3n solo se aplica si el navegador la soporta. Tercero, se respeta la preferencia de reducci\u00f3n de movimiento.<\/p>\n\n\n\n
              Es una base mucho m\u00e1s s\u00f3lida que limitarse a copiar una animaci\u00f3n vistosa sin pensar en compatibilidad, accesibilidad o mantenimiento.<\/p>\n\n\n\n
              Errores comunes al crear animaciones scroll CSS sin JavaScript<\/h2>\n\n\n\n
              Aunque la t\u00e9cnica es relativamente sencilla, hay varios errores frecuentes que conviene evitar.<\/p>\n\n\n\n
              Dejar el contenido oculto por defecto<\/h3>\n\n\n\n
              Si defines opacity: 0<\/code> fuera de @supports<\/code>, puedes provocar que el contenido quede invisible en navegadores sin soporte. Es mejor que el estado base sea visible y que la animaci\u00f3n se a\u00f1ada como mejora.<\/p>\n\n\n\n
              Animar demasiadas propiedades<\/h3>\n\n\n\n
              Una animaci\u00f3n que combina opacidad, escala, desplazamiento, blur, rotaci\u00f3n y cambios de tama\u00f1o puede resultar pesada y confusa. Cuanto m\u00e1s simple sea el movimiento, m\u00e1s profesional suele sentirse.<\/p>\n\n\n\n
              No probar en dispositivos reales<\/h3>\n\n\n\n
              Las animaciones pueden verse muy bien en escritorio y resultar inc\u00f3modas en m\u00f3vil. El ritmo de scroll, el tama\u00f1o del viewport y el rendimiento cambian mucho seg\u00fan el dispositivo.<\/p>\n\n\n\n
              Ignorar la accesibilidad<\/h3>\n\n\n\n
              No respetar prefers-reduced-motion<\/code> es un error importante. Las animaciones deben poder reducirse o eliminarse sin que la p\u00e1gina pierda contenido ni sentido.<\/p>\n\n\n\n
              FAQs sobre animar elementos al hacer scroll sin JavaScript<\/h2>\n\n\n\n
              \u00bfSe puede animar al hacer scroll solo con CSS?<\/h3>\n\n\n\n
              S\u00ed, actualmente CSS permite crear animaciones vinculadas al scroll mediante propiedades como animation-timeline<\/code>, scroll()<\/code> y view()<\/code>. Esto permite construir efectos visuales sin escuchar eventos de scroll con JavaScript. Aun as\u00ed, conviene aplicar mejora progresiva porque no todos los navegadores ofrecen el mismo nivel de soporte.<\/p>\n\n\n\n
              \u00bfEs mejor usar CSS o JavaScript para animaciones de scroll?<\/h3>\n\n\n\n
              Depende del caso. Para efectos visuales sencillos, revelados de contenido, barras de progreso o animaciones decorativas, CSS puede ser una soluci\u00f3n m\u00e1s limpia y mantenible. Para interacciones complejas, estados din\u00e1micos o l\u00f3gica avanzada, JavaScript puede seguir siendo necesario.<\/p>\n\n\n\n
              \u00bfLas animaciones de scroll afectan al rendimiento?<\/h3>\n\n\n\n
              Pueden afectar si se usan mal. Para mejorar el rendimiento, conviene animar propiedades como transform<\/code> y opacity<\/code>, evitar animaciones excesivas y probar en dispositivos reales. Tambi\u00e9n es importante no depender de animaciones cr\u00edticas para mostrar contenido esencial.<\/p>\n\n\n\n
              Reflexi\u00f3n final: animar menos, pero animar mejor<\/h2>\n\n\n\n
              Animar elementos al hacer scroll sin JavaScript es una posibilidad muy atractiva para quienes trabajamos con CSS moderno. Nos permite crear experiencias m\u00e1s din\u00e1micas, reducir dependencias y aprovechar mejor las capacidades nativas del navegador.<\/p>\n\n\n\n
              Sin embargo, la pregunta importante no es solo \u201c\u00bfpuedo animarlo?\u201d, sino \u201c\u00bfesta animaci\u00f3n mejora realmente la experiencia?\u201d. Una buena animaci\u00f3n no deber\u00eda estar para presumir de t\u00e9cnica, sino para acompa\u00f1ar la lectura, reforzar la jerarqu\u00eda visual y hacer que la interfaz resulte m\u00e1s clara.<\/p>\n\n\n\n
              Las animaciones scroll CSS sin JavaScript<\/strong> tienen mucho potencial, especialmente cuando se combinan con accesibilidad, mejora progresiva y sentido del dise\u00f1o. Usadas con moderaci\u00f3n, pueden transformar una p\u00e1gina est\u00e1tica en una experiencia m\u00e1s fluida y memorable. Usadas sin criterio, pueden convertirse en ruido.<\/p>\n\n\n\n
              Por eso, la mejor recomendaci\u00f3n es empezar de forma sencilla: una barra de progreso, una tarjeta que aparece suavemente, una imagen que se revela al entrar en pantalla. A partir de ah\u00ed, prueba, mide, ajusta y elimina todo lo que no aporte valor.<\/p>\n\n\n\n
              En CSS, como en dise\u00f1o, muchas veces la elegancia est\u00e1 en saber cu\u00e1ndo moverse y cu\u00e1ndo quedarse quieto.<\/p>\n","protected":false},"excerpt":{"rendered":"
              Aprende c\u00f3mo animar elementos al hacer scroll sin JavaScript usando CSS moderno, scroll-driven animations, mejora progresiva y buenas pr\u00e1cticas de accesibilidad.<\/p>\n","protected":false},"author":1,"featured_media":19533,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"mg_rating_sum":5,"mg_rating_count":1,"mg_rating_average":5,"footnotes":""},"categories":[82,72,14,295],"tags":[451,453,454,452],"class_list":["post-19469","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-desarrollo-a-medida","category-ux","category-ux-ui","tag-animaciones-scroll-css-sin-javascript","tag-animar-al-hacer-scroll-css","tag-css-sin-javascript","tag-scroll-animation-css"],"acf":[],"yoast_head":"\nC\u00f3mo animar elementos al hacer scroll sin JavaScript<\/title>\n<meta name=\"description\" content=\"C\u00f3mo animar elementos al hacer scroll sin JavaScript usando CSS moderno, animation-timeline, view(), mejora progresiva y accesibilidad.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo animar elementos al hacer scroll sin JavaScript\" \/>\n<meta property=\"og:description\" content=\"C\u00f3mo animar elementos al hacer scroll sin JavaScript usando CSS moderno, animation-timeline, view(), mejora progresiva y accesibilidad.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Marta Gonz\u00e1lez - Desarrollo Front-end\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-26T04:48:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/08\/como-animar-elementos-scroll-sin-javascript.avif\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"marta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"marta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/\"},\"author\":{\"name\":\"marta\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"headline\":\"C\u00f3mo animar elementos al hacer scroll sin JavaScript\",\"datePublished\":\"2026-08-26T04:48:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/\"},\"wordCount\":2465,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/como-animar-elementos-scroll-sin-javascript.avif\",\"keywords\":[\"animaciones scroll CSS sin JavaScript\",\"animar al hacer scroll CSS\",\"CSS sin JavaScript\",\"scroll animation CSS\"],\"articleSection\":[\"Blog\",\"Desarrollo a medida\",\"UX\",\"UX\\\/UI\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/\",\"name\":\"C\u00f3mo animar elementos al hacer scroll sin JavaScript\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/como-animar-elementos-scroll-sin-javascript.avif\",\"datePublished\":\"2026-08-26T04:48:00+00:00\",\"description\":\"C\u00f3mo animar elementos al hacer scroll sin JavaScript usando CSS moderno, animation-timeline, view(), mejora progresiva y accesibilidad.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/como-animar-elementos-scroll-sin-javascript.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/como-animar-elementos-scroll-sin-javascript.avif\",\"width\":1536,\"height\":1024,\"caption\":\"Animaciones al hacer scroll creadas con CSS moderno, sin depender de JavaScript.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/como-animar-elementos-al-hacer-scroll-sin-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo animar elementos al hacer scroll sin JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\",\"name\":\"Marta Gonz\u00e1lez\",\"description\":\"Desarrollo Front-end\",\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"alternateName\":\"Marta Gonz\u00e1lez Desarrollo Frontend\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\",\"name\":\"marta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"width\":575,\"height\":575,\"caption\":\"marta\"},\"logo\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\"},\"description\":\"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.\",\"sameAs\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\",\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=100031998110346\",\"https:\\\/\\\/www.instagram.com\\\/mcgweb\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/martacg\\\/\",\"marta\"],\"birthDate\":\"1986-01-07\",\"gender\":\"mujer\",\"knowsAbout\":[\"HTML5\",\"CSS3\",\"Javascript\"],\"jobTitle\":\"Desarrollo Frontend\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/author\\\/marta\\\/\",\"publishingPrinciples\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/politica-de-privacidad\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo animar elementos al hacer scroll sin JavaScript","description":"C\u00f3mo animar elementos al hacer scroll sin JavaScript usando CSS moderno, animation-timeline, view(), mejora progresiva y accesibilidad.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo animar elementos al hacer scroll sin JavaScript","og_description":"C\u00f3mo animar elementos al hacer scroll sin JavaScript usando CSS moderno, animation-timeline, view(), mejora progresiva y accesibilidad.","og_url":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/","og_site_name":"Marta Gonz\u00e1lez - Desarrollo Front-end","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_author":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_published_time":"2026-08-26T04:48:00+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/08\/como-animar-elementos-scroll-sin-javascript.avif","type":"image\/jpeg"}],"author":"marta","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"marta","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/#article","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/"},"author":{"name":"marta","@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"headline":"C\u00f3mo animar elementos al hacer scroll sin JavaScript","datePublished":"2026-08-26T04:48:00+00:00","mainEntityOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/"},"wordCount":2465,"commentCount":0,"publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/08\/como-animar-elementos-scroll-sin-javascript.avif","keywords":["animaciones scroll CSS sin JavaScript","animar al hacer scroll CSS","CSS sin JavaScript","scroll animation CSS"],"articleSection":["Blog","Desarrollo a medida","UX","UX\/UI"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/","url":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/","name":"C\u00f3mo animar elementos al hacer scroll sin JavaScript","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/#primaryimage"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/08\/como-animar-elementos-scroll-sin-javascript.avif","datePublished":"2026-08-26T04:48:00+00:00","description":"C\u00f3mo animar elementos al hacer scroll sin JavaScript usando CSS moderno, animation-timeline, view(), mejora progresiva y accesibilidad.","breadcrumb":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/#primaryimage","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/08\/como-animar-elementos-scroll-sin-javascript.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/08\/como-animar-elementos-scroll-sin-javascript.avif","width":1536,"height":1024,"caption":"Animaciones al hacer scroll creadas con CSS moderno, sin depender de JavaScript."},{"@type":"BreadcrumbList","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/como-animar-elementos-al-hacer-scroll-sin-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martagonzalez.dev\/wp\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo animar elementos al hacer scroll sin JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/martagonzalez.dev\/wp\/#website","url":"https:\/\/martagonzalez.dev\/wp\/","name":"Marta Gonz\u00e1lez","description":"Desarrollo Front-end","publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"alternateName":"Marta Gonz\u00e1lez Desarrollo Frontend","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martagonzalez.dev\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738","name":"marta","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","width":575,"height":575,"caption":"marta"},"logo":{"@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif"},"description":"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.","sameAs":["https:\/\/martagonzalez.dev\/wp","https:\/\/www.facebook.com\/profile.php?id=100031998110346","https:\/\/www.instagram.com\/mcgweb","https:\/\/www.linkedin.com\/in\/martacg\/","marta"],"birthDate":"1986-01-07","gender":"mujer","knowsAbout":["HTML5","CSS3","Javascript"],"jobTitle":"Desarrollo Frontend","url":"https:\/\/martagonzalez.dev\/wp\/author\/marta\/","publishingPrinciples":"https:\/\/martagonzalez.dev\/wp\/politica-de-privacidad\/"}]}},"_links":{"self":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/comments?post=19469"}],"version-history":[{"count":3,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19469\/revisions"}],"predecessor-version":[{"id":19540,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/19469\/revisions\/19540"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media\/19533"}],"wp:attachment":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media?parent=19469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/categories?post=19469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/tags?post=19469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}