{"id":31,"date":"2025-11-21T10:39:02","date_gmt":"2025-11-21T10:39:02","guid":{"rendered":"https:\/\/csrportela.com\/?page_id=31"},"modified":"2026-02-02T09:16:40","modified_gmt":"2026-02-02T09:16:40","slug":"prueba","status":"publish","type":"page","link":"https:\/\/csrportela.com\/","title":{"rendered":"PAGINA MAESTRA FONDO 3D"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"31\" class=\"elementor elementor-31\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-084ff4f e-flex e-con-boxed e-con e-parent\" data-id=\"084ff4f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ecf6bf elementor-widget elementor-widget-html\" data-id=\"4ecf6bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"webgl-background\"><\/div>\r\n\r\n<script id=\"vertexShader\" type=\"x-shader\/x-vertex\">\r\n    varying vec2 vUv;\r\n    varying float vElevation;\r\n    uniform float uTime;\r\n    uniform float uScrollSpeed; \/\/ Intensidad basada en tu scroll\r\n\r\n    void main() {\r\n        vUv = uv;\r\n        vec3 pos = position;\r\n        \r\n        \/\/ Configuraci\u00f3n de la onda\r\n        float intensity = 0.1 + (uScrollSpeed * 0.05); \/\/ Multiplicador ajustado para scroll nativo\r\n        \r\n        float elevation = sin(pos.x * 3.0 + uTime * 0.5) * intensity \r\n                        + sin(pos.y * 2.0 + uTime * 0.3) * intensity;\r\n\r\n        pos.z += elevation;\r\n        vElevation = elevation;\r\n        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\r\n    }\r\n<\/script>\r\n\r\n<script id=\"fragmentShader\" type=\"x-shader\/x-fragment\">\r\n    uniform vec3 uColor;\r\n    varying float vElevation;\r\n\r\n    void main() {\r\n        \/\/ Mezcla de colores seg\u00fan la altura de la onda\r\n        float mixStrength = vElevation * 3.0 + 0.5;\r\n        vec3 color = mix(vec3(1.0), uColor, mixStrength); \r\n        gl_FragColor = vec4(color, 1.0);\r\n    }\r\n<\/script>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n    \r\n    \/\/ Si estamos en el editor, no cargamos el fondo para que no moleste al dise\u00f1ar\r\n    if (document.body.classList.contains('elementor-editor-active')) return;\r\n\r\n    const container = document.getElementById('webgl-background');\r\n    \r\n    \/\/ Configuraci\u00f3n de Escena Three.js\r\n    const scene = new THREE.Scene();\r\n    const camera = new THREE.PerspectiveCamera(70, window.innerWidth \/ window.innerHeight, 0.1, 100);\r\n    camera.position.z = 2;\r\n\r\n    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\r\n    renderer.setSize(window.innerWidth, window.innerHeight);\r\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); \/\/ Optimizaci\u00f3n rendimiento\r\n    container.appendChild(renderer.domElement);\r\n\r\n    \/\/ Geometr\u00eda (El plano que se deforma)\r\n    const geometry = new THREE.PlaneGeometry(7, 7, 64, 64); \/\/ 64 segmentos es buen equilibrio calidad\/rendimiento\r\n    \r\n    \/\/ Variables que pasamos al shader\r\n    const uniforms = {\r\n        uTime: { value: 0 },\r\n        uColor: { value: new THREE.Color(\"#CCFF00\") }, \/\/ <--- CAMBIA TU COLOR AQU\u00cd\r\n        uScrollSpeed: { value: 0 }\r\n    };\r\n\r\n    const material = new THREE.ShaderMaterial({\r\n        vertexShader: document.getElementById('vertexShader').textContent,\r\n        fragmentShader: document.getElementById('fragmentShader').textContent,\r\n        uniforms: uniforms,\r\n        wireframe: false, \/\/ Pon true si quieres ver la malla\r\n        transparent: true\r\n    });\r\n\r\n    const plane = new THREE.Mesh(geometry, material);\r\n    scene.add(plane);\r\n\r\n    \/\/ --- L\u00d3GICA DE DETECCI\u00d3N DE SCROLL ---\r\n    let currentScroll = 0;\r\n    let targetScrollSpeed = 0;\r\n    let scrollSpeed = 0;\r\n    \r\n    \/\/ Escuchamos el scroll real de la ventana\r\n    window.addEventListener('scroll', () => {\r\n        \/\/ Calculamos velocidad b\u00e1sica (diferencia entre frames podr\u00eda ser mejor, pero esto es ligero)\r\n        \/\/ Simplemente damos un \"impulso\" a la velocidad cuando se hace scroll\r\n        targetScrollSpeed = 3.0; \r\n        \r\n        \/\/ Resetear el impulso despu\u00e9s de un momento (debounce simple visual)\r\n        clearTimeout(window.scrollTimeout);\r\n        window.scrollTimeout = setTimeout(() => {\r\n            targetScrollSpeed = 0;\r\n        }, 100);\r\n    });\r\n\r\n    const clock = new THREE.Clock();\r\n\r\n    \/\/ Bucle de Animaci\u00f3n\r\n    function animate() {\r\n        requestAnimationFrame(animate);\r\n        const time = clock.getElapsedTime();\r\n        \r\n        \/\/ 1. Actualizar tiempo para el movimiento org\u00e1nico constante\r\n        uniforms.uTime.value = time;\r\n        \r\n        \/\/ 2. Suavizar la velocidad del scroll (Lerp)\r\n        \/\/ Esto hace que el l\u00edquido se calme suavemente cuando dejas de hacer scroll\r\n        scrollSpeed += (targetScrollSpeed - scrollSpeed) * 0.05;\r\n        uniforms.uScrollSpeed.value = scrollSpeed;\r\n\r\n        \/\/ 3. Rotaci\u00f3n sutil constante\r\n        plane.rotation.z = Math.sin(time * 0.1) * 0.05;\r\n\r\n        renderer.render(scene, camera);\r\n    }\r\n    animate();\r\n\r\n    \/\/ Responsive\r\n    window.addEventListener('resize', () => {\r\n        camera.aspect = window.innerWidth \/ window.innerHeight;\r\n        camera.updateProjectionMatrix();\r\n        renderer.setSize(window.innerWidth, window.innerHeight);\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cc6d9c8 e-flex e-con-boxed e-con e-parent\" data-id=\"cc6d9c8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-416dce7 elementor-widget elementor-widget-heading\" data-id=\"416dce7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/csrportela.com\/\">CP.<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3edb167 elementor-widget elementor-widget-heading\" data-id=\"3edb167\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/csrportela.com\/\">MENU +<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-646472e e-con-full e-flex e-con e-parent\" data-id=\"646472e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c643898 elementor-widget elementor-widget-heading\" data-id=\"c643898\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/csrportela.com\/\">C\u00c9SAR\n<br>\nPORTELA<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9471f73 e-flex e-con-boxed e-con e-parent\" data-id=\"9471f73\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;position&quot;:&quot;fixed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-677a5b0 elementor-icon-list--layout-inline elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"677a5b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-inline-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/csrportela.com\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Todo<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/csrportela.com\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Branding<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/csrportela.com\/\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Web<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\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>CP. MENU + C\u00c9SAR PORTELA Todo Branding Web<\/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-31","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/csrportela.com\/index.php\/wp-json\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/csrportela.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/csrportela.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/csrportela.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/csrportela.com\/index.php\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":67,"href":"https:\/\/csrportela.com\/index.php\/wp-json\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/csrportela.com\/index.php\/wp-json\/wp\/v2\/pages\/31\/revisions\/112"}],"wp:attachment":[{"href":"https:\/\/csrportela.com\/index.php\/wp-json\/wp\/v2\/media?parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}