{"id":13831,"date":"2022-09-29T19:12:05","date_gmt":"2022-09-29T17:12:05","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=13831"},"modified":"2022-11-18T14:33:30","modified_gmt":"2022-11-18T12:33:30","slug":"animar-elementos-html-al-hacer-scroll","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/","title":{"rendered":"Animar elementos HTML al hacer scroll"},"content":{"rendered":"

Seguramente en numerosas p\u00e1ginas Web habeis visto un efecto que consiste en animar elementos HTML al hacer scroll. Por lo general, este tipo de animaciones consisten en que los elementos van apareciendo desde diferentes direcciones, o se hacen grandes o peque\u00f1os al aparecer.<\/p>\n

En este art\u00edculo vamos a implementar una versi\u00f3n muy sencilla de este tipo de efectos. Concretamente, vamos a implementar algo como lo que se puede apreciar en la siguiente imagen animada:<\/p>\n

\"Animar<\/a>

Nuestro sencillo ejemplo de como animar elementos HTML al hacer scroll<\/p><\/div>\n

Tal y como se puede apreciar, al hacer scroll, van apareciendo algunos elementos que inicialmente no eran visibles.<\/strong><\/p>\n

El grueso de este efecto se puede realizar solo con HTML y CSS<\/a>, pero es necesario un poquito de JavaScript<\/strong> ( que ya os proporcionar\u00e9 yo, as\u00ed que no os preocup\u00e9is ).<\/p>\n

El HTML de nuestro ejemplo<\/h2>\n

Para este ejemplo voy a hacer una pagina HTML que incluir\u00e1 varias secciones como las siguientes:<\/p>\n

<section id=\"hero\" class=\"paused\">\r\n  <div class=\"wrapper\">\r\n    <h1 class=\"anim-down\">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id, suscipit!<\/h1>\r\n    <p class=\"anim-up\">Lorem ipsum dolor sit amet ...<\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section id=\"features\" class=\"paused\">\r\n  <div class=\"wrapper\">\r\n    <h1 class=\"anim-left\">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, obcaecati.<\/h1>\r\n    <p class=\"anim-right\">Lorem, ipsum dolor sit amet ...<\/p>\r\n    <ul>\r\n      <li class=\"anim-fade-in anim-pause-2\">Lorem ipsum, dolor sit amet consectetur...<\/li>\r\n      <li class=\"anim-fade-in anim-pause-3\">Ullam et consequuntur maiores...<\/li>\r\n      <li class=\"anim-fade-in anim-pause-4\">Veniam atque consequuntur tenetur...<\/li>\r\n      <li class=\"anim-fade-in anim-pause-5\">Voluptatem, veniam sit mollitia...<\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/section>\r\n<\/pre>\n
Tal y como se puede observar, hemos definido varias secciones con la clase paused<\/em><\/strong>, y dentro, tendemos varios elementos con clases llamadas anim-noseque<\/strong><\/em>.<\/p>\n
Las clases anim-left<\/em><\/strong>, anim-right<\/em><\/strong>, anim-up<\/em><\/strong> y anim-down<\/em><\/strong>, simplemente tienen asignadas unas animaciones CSS que hacen que el elemento se mueva en una direcci\u00f3n al mismo tiempo que su opacidad pasa de 0 (transparente) a 1 (opaco). La clase anim-fade-in<\/em><\/strong> simplemente realiza esto \u00faltimo (cambiar la opacidad).<\/p>\n
Todas las clases las he configurado con unos mismos tiempos, pero es posible cambiar la pausa que se realiza antes de empezar la animaci\u00f3n mediante las clases anim-pause-*<\/strong><\/em>. Por eso, esos 4 elementos iran apareciendo uno detr\u00e1s de otro, y no aparecer\u00e1n todos a la vez.<\/p>\n
El sistema de este ejemplo es bastante sencillito, se puede ampliar bastante m\u00e1s, con m\u00e1s efectos de animaci\u00f3n y m\u00e1s caracter\u00edsticas sin mucho esfuerzo.<\/p>\n
Obviamente, si queremos probar bien el ejemplo, deberemos de incluir mas contenido HTML. De lo contrario hay tan poco contenido que no podremos hacer scroll y apreciar el efecto en su totalidad. En mi caso me he limitado a a\u00f1adir, justo encima, otra secci\u00f3n\u00a0 con varias decenas de p\u00e1rrafos con textos \u00ablorem ipsum\u00bb.<\/p>\n
Como vamos a animar elementos HTML al hacer scroll<\/h2>\n
El mecanismo que vamos a usar es el siguiente. Inicialmente todos los elementos que se encuentren dentro de un elemento con la clase paused<\/strong><\/em>, tendr\u00e1n sus animaciones pausadas<\/strong>.<\/p>\n
Con el siguiente c\u00f3digo JavaScript, haremos lo siguiente: cada vez que el usuario haga scroll, buscaremos si alguna de estas secciones est\u00e1 visible en pantalla. En caso afirmativo, le quitaremos la clase paused<\/em><\/strong>, por lo que las animaciones que tenga dentro se pondr\u00e1n en marcha autom\u00e1ticamente<\/strong>.<\/p>\n
\/\/ esta funcion comprueba si un elemento esta visible en pantalla\r\nfunction isVisible(elm) {\r\n\tvar rect = elm.getBoundingClientRect();\r\n\tvar viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);\r\n\treturn !(rect.bottom < 0 || rect.top - viewHeight >= 0);\r\n}\r\n\r\n\/\/ cuando se carga la p\u00e1gina...\r\nwindow.addEventListener('DOMContentLoaded', (ev0) => {\r\n        \/\/ asignamos un evento scroll...\r\n\twindow.addEventListener('scroll', (ev1) => {\r\n                \/\/ y a todos los elementos con la clase paused...\r\n\t\tdocument.querySelectorAll(\".paused\").forEach(elm => {\r\n\t\t\tif (isVisible(elm)) \/\/ que sean visibles...\r\n\t\t\t\telm.classList.remove(\"paused\"); \/\/ les quitamos la clase paused\r\n\t\t})\r\n\t});\r\n});\r\n<\/pre>\n
Este c\u00f3digo JavaScript lo puedes colocar dentro de una etiqueta <script> en el <head> de tu documento HTML.<\/p>\n
Las animaciones CSS que vamos a usar<\/h2>\n
Las animaciones CSS que he usado en mi ejemplo son las siguientes:<\/p>\n
\/* primero un poco de CSS muy b\u00e1sico *\/\r\n\r\nbody {\r\n        font-family: sans-serif;\r\n        overflow-x: hidden; \/* para que nada sobresalga en horizontal *\/\r\n}\r\n\r\n.wrapper {\r\n\tmax-width: 1000px;\r\n\tmargin: 0 auto;\r\n\tpadding: 32px;\r\n}\r\n\r\n\/* a partir de aqui el CSS de las animaciones *\/\r\n\r\n@keyframes anim-fade-in { from { opacity: 0; } to { opacity: 1 } }\r\n\r\n@keyframes anim-up { \r\n\tfrom { opacity: 0; transform: translateY(100px); } \r\n\tto { opacity: 1; transform: translateY(0px); }  \r\n}\t\t\r\n\r\n@keyframes anim-down { \r\n\tfrom { opacity: 0; transform: translateY(-100px); } \r\n\tto { opacity: 1; transform: translateY(0px); }  \r\n}\t\t\r\n\r\n@keyframes anim-left { \r\n\tfrom { opacity: 0; transform: translateX(100px); } \r\n\tto { opacity: 1; transform: translateX(0px); }  \r\n}\t\t\r\n\r\n@keyframes anim-right { \r\n\tfrom { opacity: 0; transform: translateX(-100px); } \r\n\tto { opacity: 1; transform: translateX(0px); }  \r\n}\t\t\r\n\r\n.anim-up, .anim-down, .anim-left, .anim-right, .anim-fade-in {\r\n\tanimation-duration: 1s; \/* la animacion dura X segundos *\/\r\n\tanimation-delay: 0.5s; \/* esperamos X segundos antes de hacer la animacion *\/\t\t\t\r\n\tanimation-fill-mode: both; \/* aplica estilos de la animacion antes y despues de reproducirla *\/\r\n}\r\n\r\n.anim-up { animation-name: anim-up; }\r\n.anim-down { animation-name: anim-down; }\r\n.anim-left { animation-name: anim-left; }\r\n.anim-right { animation-name: anim-right; }\r\n.anim-fade-in { animation-name: anim-fade-in; }\r\n\r\n.anim-pause-2 { animation-delay: 2s; } \/* la animacion empieza en 2 seg. *\/\t\t\r\n.anim-pause-3 { animation-delay: 3s; } \/* la animacion empieza en 3 seg. *\/\r\n.anim-pause-4 { animation-delay: 4s; } \/* la animacion empieza en 4 seg. *\/\r\n.anim-pause-5 { animation-delay: 5s; } \/* la animacion empieza en 5 seg. *\/\r\n\r\n\/* todas las animaciones pausadas *\/\r\n.paused * { \r\n\tanimation-play-state: paused;\r\n}\r\n<\/pre>\n
El c\u00f3digo CSS en si es bastante sencillito, as\u00ed que asumo que no requiere mayores explicaciones que las que ofrecen los propios comentarios.<\/p>\n
Conclusiones<\/h2>\n
Como puedes ver este llamativo efecto es bastante sencillo de implementar, pero si tienes cualquier duda, d\u00e9jala en tu comentario a continuaci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"
Seguramente en numerosas p\u00e1ginas Web habeis visto un efecto que consiste en animar elementos HTML al hacer scroll. Por lo general, este tipo de animaciones consisten en que los elementos van apareciendo desde diferentes direcciones, o se hacen grandes o peque\u00f1os al aparecer. En este…<\/p>\n","protected":false},"author":23,"featured_media":13843,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[13,78,253],"class_list":["post-13831","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css3","tag-html5","tag-javascript"],"yoast_head":"\nAnimar elementos HTML al hacer scroll - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Animar elementos HTML al hacer scroll para que se vayan haciendo visibles es muy sencillo tal y como ver\u00e1s en este art\u00edculo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animar elementos HTML al hacer scroll - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Animar elementos HTML al hacer scroll para que se vayan haciendo visibles es muy sencillo tal y como ver\u00e1s en este art\u00edculo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-29T17:12:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-18T12:33:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"Animar elementos HTML al hacer scroll\",\"datePublished\":\"2022-09-29T17:12:05+00:00\",\"dateModified\":\"2022-11-18T12:33:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/\"},\"wordCount\":551,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg\",\"keywords\":[\"CSS3\",\"HTML5\",\"javascript\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/\",\"name\":\"Animar elementos HTML al hacer scroll - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg\",\"datePublished\":\"2022-09-29T17:12:05+00:00\",\"dateModified\":\"2022-11-18T12:33:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"Animar elementos HTML al hacer scroll para que se vayan haciendo visibles es muy sencillo tal y como ver\u00e1s en este art\u00edculo.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg\",\"width\":1000,\"height\":500,\"caption\":\"Animar elementos HTML al hacer scroll\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animar elementos HTML al hacer scroll\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animar elementos HTML al hacer scroll - Blog Escola Espai","description":"Animar elementos HTML al hacer scroll para que se vayan haciendo visibles es muy sencillo tal y como ver\u00e1s en este art\u00edculo.","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:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/","og_locale":"es_ES","og_type":"article","og_title":"Animar elementos HTML al hacer scroll - Blog Escola Espai","og_description":"Animar elementos HTML al hacer scroll para que se vayan haciendo visibles es muy sencillo tal y como ver\u00e1s en este art\u00edculo.","og_url":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/","og_site_name":"Blog Escola Espai","article_published_time":"2022-09-29T17:12:05+00:00","article_modified_time":"2022-11-18T12:33:30+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"Animar elementos HTML al hacer scroll","datePublished":"2022-09-29T17:12:05+00:00","dateModified":"2022-11-18T12:33:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/"},"wordCount":551,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg","keywords":["CSS3","HTML5","javascript"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/","url":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/","name":"Animar elementos HTML al hacer scroll - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg","datePublished":"2022-09-29T17:12:05+00:00","dateModified":"2022-11-18T12:33:30+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"Animar elementos HTML al hacer scroll para que se vayan haciendo visibles es muy sencillo tal y como ver\u00e1s en este art\u00edculo.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg","width":1000,"height":500,"caption":"Animar elementos HTML al hacer scroll"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2022\/09\/animar-elementos-html-al-hacer-scroll\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Animar elementos HTML al hacer scroll"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/09\/animar-elementos-html-scroll.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/13831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=13831"}],"version-history":[{"count":11,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/13831\/revisions"}],"predecessor-version":[{"id":13845,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/13831\/revisions\/13845"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/13843"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=13831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=13831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=13831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}