{"id":629,"date":"2023-11-15T08:19:35","date_gmt":"2023-11-15T11:19:35","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=629"},"modified":"2023-12-03T12:04:08","modified_gmt":"2023-12-03T15:04:08","slug":"animaciones-y-transiciones","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/animaciones-y-transiciones\/","title":{"rendered":"Animaciones y Transiciones"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><em>Creaci\u00f3n de Animaciones con CSS<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animaciones en CSS<\/strong>&nbsp;CSS (Cascading Style Sheets) permite la creaci\u00f3n de animaciones atractivas para elementos HTML. Puedes utilizar propiedades como&nbsp;<code>animation<\/code>&nbsp;y&nbsp;<code>@keyframes<\/code>&nbsp;para definir la duraci\u00f3n, el tipo y la secuencia de una animaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ejemplo de animaci\u00f3n CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@keyframes mover {\r\n  0% { left: 0; }\r\n  50% { left: 50%; }\r\n  100% { left: 100%; }\r\n}\r\n\r\n.animacion {\r\n  width: 100px;\r\n  height: 100px;\r\n  background-color: blue;\r\n  animation: mover 3s linear infinite;\r\n}\r\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><em>Creaci\u00f3n de Animaciones con JavaScript<\/em><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Animaciones con JavaScript<\/strong>&nbsp;JavaScript tambi\u00e9n permite crear animaciones m\u00e1s interactivas y personalizadas. Puedes utilizar funciones como&nbsp;<code>requestAnimationFrame<\/code>&nbsp;para actualizar las propiedades de los elementos en cada fotograma.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ejemplo de animaci\u00f3n con JavaScript:<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n  &lt;style>\r\n    .animacion {\r\n      width: 100px;\r\n      height: 100px;\r\n      background-color: blue;\r\n      position: relative;\r\n    }\r\n  &lt;\/style>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div class=\"animacion\">&lt;\/div>\r\n  &lt;script>\r\n    const elemento = document.querySelector(\".animacion\");\r\n    let posicion = 0;\r\n\r\n    function animar() {\r\n      posicion += 1;\r\n      elemento.style.left = posicion + \"px\";\r\n      if (posicion &lt; 200) {\r\n        requestAnimationFrame(animar);\r\n      }\r\n    }\r\n\r\n    animar();\r\n  &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Ejercicio Pr\u00e1ctico: Crear una Animaci\u00f3n<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ejercicio: Crea una animaci\u00f3n que haga que un elemento div se mueva de izquierda a derecha en la pantalla. La animaci\u00f3n debe ser infinita y continuar en un ciclo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n  &lt;style>\r\n    .animacion {\r\n      width: 100px;\r\n      height: 100px;\r\n      background-color: blue;\r\n      position: relative;\r\n    }\r\n  &lt;\/style>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div class=\"animacion\">&lt;\/div>\r\n  &lt;script>\r\n    const elemento = document.querySelector(\".animacion\");\r\n    let posicion = 0;\r\n\r\n    function animar() {\r\n      posicion += 2;\r\n      elemento.style.left = posicion + \"px\";\r\n      if (posicion > window.innerWidth) {\r\n        posicion = -100;\r\n      }\r\n      requestAnimationFrame(animar);\r\n    }\r\n\r\n    animar();\r\n  &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Este ejercicio pr\u00e1ctico permitir\u00e1 a los lectores aplicar y consolidar lo que han aprendido sobre la creaci\u00f3n de animaciones utilizando JavaScript. La animaci\u00f3n en las p\u00e1ginas web puede mejorar significativamente la experiencia del usuario y es una habilidad valiosa para el desarrollo frontend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Bibliotecas y Frameworks de Animaci\u00f3n<\/strong>&nbsp;A menudo, para crear animaciones avanzadas y altamente interactivas, los desarrolladores recurren a bibliotecas y frameworks especializados en animaci\u00f3n. Algunos ejemplos populares son GreenSock Animation Platform (GSAP), Three.js, y D3.js. Estas herramientas proporcionan un conjunto de funciones y caracter\u00edsticas que simplifican la creaci\u00f3n de animaciones sofisticadas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ejemplo de Uso de GSAP:<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">GSAP es conocido por su versatilidad y facilidad de uso. A continuaci\u00f3n, se muestra un ejemplo simple de c\u00f3mo animar la opacidad de un elemento en HTML con GSAP:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.9.1\/gsap.min.js\">&lt;\/script>\r\n  &lt;style>\r\n    .animacion {\r\n      width: 100px;\r\n      height: 100px;\r\n      background-color: blue;\r\n    }\r\n  &lt;\/style>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div class=\"animacion\">&lt;\/div>\r\n  &lt;script>\r\n    gsap.to(\".animacion\", {\r\n      opacity: 0,\r\n      duration: 2, \/\/ Duraci\u00f3n de la animaci\u00f3n en segundos\r\n      repeat: -1,  \/\/ Repetir infinitamente\r\n      yoyo: true   \/\/ Invertir la animaci\u00f3n en cada repetici\u00f3n\r\n    });\r\n  &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Ejercicios Pr\u00e1cticos: A\u00f1adir Animaciones a un Carrito de Compras<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ejercicio 1: Agrega una animaci\u00f3n a un bot\u00f3n \u00abAgregar al Carrito\u00bb. Cuando los usuarios hagan clic en el bot\u00f3n, el \u00edcono del carrito debe moverse hacia el \u00edcono del carrito en la esquina superior derecha de la p\u00e1gina y mostrar una animaci\u00f3n de \u00aba\u00f1adido al carrito\u00bb.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\r\n&lt;html>\r\n&lt;head>\r\n  &lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.9.1\/gsap.min.js\">&lt;\/script>\r\n  &lt;style>\r\n    .carrito-icono {\r\n      position: fixed;\r\n      top: 10px;\r\n      right: 10px;\r\n      width: 40px;\r\n      height: 40px;\r\n      background-color: green;\r\n      color: white;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n    }\r\n    .producto {\r\n      margin: 20px;\r\n    }\r\n  &lt;\/style>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;div class=\"carrito-icono\">\ud83d\uded2&lt;\/div>\r\n  &lt;div class=\"producto\">\r\n    &lt;h2>Producto 1&lt;\/h2>\r\n    &lt;p>Descripci\u00f3n del producto.&lt;\/p>\r\n    &lt;button class=\"agregar-al-carrito\">Agregar al Carrito&lt;\/button>\r\n  &lt;\/div>\r\n  &lt;script>\r\n    const carritoIcono = document.querySelector(\".carrito-icono\");\r\n\r\n    document.querySelectorAll(\".agregar-al-carrito\").forEach((boton) => {\r\n      boton.addEventListener(\"click\", (event) => {\r\n        const producto = event.target.parentElement;\r\n        const productoRect = producto.getBoundingClientRect();\r\n        const carritoRect = carritoIcono.getBoundingClientRect();\r\n\r\n        gsap.to(carritoIcono, {\r\n          x: carritoRect.x - productoRect.x,\r\n          y: carritoRect.y - productoRect.y,\r\n          scale: 0.5,\r\n          duration: 1,\r\n          ease: \"power2.inOut\",\r\n        });\r\n      });\r\n    });\r\n  &lt;\/script>\r\n&lt;\/body>\r\n&lt;\/html>\r\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Este ejercicio permitir\u00e1 a los lectores aplicar animaciones avanzadas a un carrito de compras, lo que mejora la experiencia del usuario y brinda un enfoque pr\u00e1ctico sobre el uso de bibliotecas de animaci\u00f3n como GSAP en aplicaciones web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creaci\u00f3n de Animaciones con CSS Animaciones en CSS&nbsp;CSS (Cascading Style Sheets) permite la creaci\u00f3n de animaciones atractivas para elementos HTML. Puedes utilizar propiedades como&nbsp;animation&nbsp;y&nbsp;@keyframes&nbsp;para definir la duraci\u00f3n, el tipo y la secuencia de una animaci\u00f3n. Ejemplo de animaci\u00f3n CSS: Creaci\u00f3n de Animaciones con JavaScript Animaciones con JavaScript&nbsp;JavaScript tambi\u00e9n permite crear animaciones m\u00e1s interactivas y personalizadas. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2123,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[33],"tags":[],"class_list":["post-629","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-y-otras-hierbas"],"uagb_featured_image_src":{"full":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Animaciones-y-Transiciones.jpg",1000,666,false],"thumbnail":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Animaciones-y-Transiciones-150x150.jpg",150,150,true],"medium":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Animaciones-y-Transiciones-300x200.jpg",300,200,true],"medium_large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Animaciones-y-Transiciones-768x511.jpg",768,511,true],"large":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Animaciones-y-Transiciones.jpg",1000,666,false],"1536x1536":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Animaciones-y-Transiciones.jpg",1000,666,false],"2048x2048":["https:\/\/stackcodelab.com\/blog\/wp-content\/uploads\/2023\/11\/Animaciones-y-Transiciones.jpg",1000,666,false]},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":0,"uagb_excerpt":"Creaci\u00f3n de Animaciones con CSS Animaciones en CSS&nbsp;CSS (Cascading Style Sheets) permite la creaci\u00f3n de animaciones atractivas para elementos HTML. Puedes utilizar propiedades como&nbsp;animation&nbsp;y&nbsp;@keyframes&nbsp;para definir la duraci\u00f3n, el tipo y la secuencia de una animaci\u00f3n. Ejemplo de animaci\u00f3n CSS: Creaci\u00f3n de Animaciones con JavaScript Animaciones con JavaScript&nbsp;JavaScript tambi\u00e9n permite crear animaciones m\u00e1s interactivas y personalizadas.&hellip;","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":2,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":2124,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/629\/revisions\/2124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media\/2123"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}