{"id":8,"date":"2026-07-23T13:46:35","date_gmt":"2026-07-23T13:46:35","guid":{"rendered":"https:\/\/coracarrasco.com\/?page_id=8"},"modified":"2026-07-23T15:52:27","modified_gmt":"2026-07-23T13:52:27","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/coracarrasco.com\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nInteractive Color Flow<\/title>\r\n\r\n<style>\r\nhtml, body {\r\n margin: 0;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n touch-action: none;\r\n background: #000;\r\n}\r\n\r\nbody {\r\n transition: background-color 0.02s linear;\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<script>\r\n\r\nlet hue = 0;\r\n\r\n\/\/ velocidad actual (grados\/frame)\r\nlet speed = 0.2;\r\n\r\n\/\/ velocidad objetivo\r\nlet targetSpeed = 0.2;\r\n\r\n\/\/ velocidad m\u00e1xima\r\nconst maxSpeed = 20;\r\n\r\n\/\/ animaci\u00f3n\r\nfunction animate(){\r\n\r\n \/\/ suavizar aceleraci\u00f3n y frenado\r\n speed += (targetSpeed - speed) * 0.05;\r\n\r\n hue += speed;\r\n\r\n if(hue >= 360)\r\n hue -= 360;\r\n\r\n document.body.style.backgroundColor =\r\n `hsl(${hue},100%,50%)`;\r\n\r\n \/\/ volver lentamente a velocidad normal\r\n targetSpeed *= 0.985;\r\n\r\n if(targetSpeed < 0.2)\r\n targetSpeed = 0.2;\r\n\r\n requestAnimationFrame(animate);\r\n}\r\n\r\nanimate();\r\n\r\nfunction accelerate(amount){\r\n targetSpeed += amount;\r\n\r\n if(targetSpeed > maxSpeed)\r\n targetSpeed = maxSpeed;\r\n}\r\n\r\n\/\/ CLICK\r\nwindow.addEventListener(\"mousedown\", () => {\r\n accelerate(4);\r\n});\r\n\r\n\/\/ TAP\r\nwindow.addEventListener(\"touchstart\", () => {\r\n accelerate(4);\r\n});\r\n\r\n\/\/ SCROLL\r\nwindow.addEventListener(\"wheel\", e => {\r\n accelerate(Math.abs(e.deltaY) \/ 120);\r\n}, {passive:true});\r\n\r\n\/\/ DRAG RAT\u00d3N\r\nlet lastX = null;\r\n\r\nwindow.addEventListener(\"mousemove\", e => {\r\n if(e.buttons){\r\n if(lastX !== null){\r\n accelerate(Math.abs(e.clientX-lastX)\/8);\r\n }\r\n lastX = e.clientX;\r\n }else{\r\n lastX = null;\r\n }\r\n});\r\n\r\n\/\/ DRAG DEDO\r\nlet lastTouchX = null;\r\n\r\nwindow.addEventListener(\"touchmove\", e=>{\r\n\r\n const x = e.touches[0].clientX;\r\n\r\n if(lastTouchX!==null){\r\n accelerate(Math.abs(x-lastTouchX)\/5);\r\n }\r\n\r\n lastTouchX=x;\r\n\r\n},{passive:true});\r\n\r\nwindow.addEventListener(\"touchend\",()=>{\r\n lastTouchX=null;\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Interactive Color Flow<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/coracarrasco.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coracarrasco.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/coracarrasco.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/coracarrasco.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coracarrasco.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":7,"href":"https:\/\/coracarrasco.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/coracarrasco.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/coracarrasco.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}