{"id":8,"date":"2024-04-28T13:10:01","date_gmt":"2024-04-28T13:10:01","guid":{"rendered":"https:\/\/4seotest.eu\/?page_id=8"},"modified":"2024-04-28T13:23:52","modified_gmt":"2024-04-28T13:23:52","slug":"homepage","status":"publish","type":"page","link":"https:\/\/4seotest.eu\/index.php\/homepage\/","title":{"rendered":"Homepage"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8\" class=\"elementor elementor-8\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53a1122 e-con-full e-flex e-con e-parent\" data-id=\"53a1122\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef7180a elementor-widget elementor-widget-html\" data-id=\"ef7180a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n    html {\r\n      height: 100vh;\r\n    }\r\n\r\n    body {\r\n      height: 5000px;\r\n      background: #000;\r\n    }\r\n\r\n    #canvas {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: contain;\r\n    }\r\n  <\/style>\r\n  <canvas id=\"canvas\"><\/canvas>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.9.1\/gsap.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.9.1\/ScrollTrigger.min.js\"><\/script>\r\n  <script>\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    const canvas = document.querySelector(\"#canvas\");\r\n    const context = canvas.getContext(\"2d\");\r\n\r\n    canvas.width = 1158;\r\n    canvas.height = 770;\r\n\r\n    const frameCount = 32; \/\/ Adjusted to match the frame index range\r\n    const currentFrame = index => (\r\n        `http:\/\/4seotest.eu\/wp-content\/uploads\/2024\/04\/ezgif-frame-${(index + 1).toString().padStart(3, '0')}.jpg` \/\/ Adjusted for 3-digit frame numbers\r\n    );\r\n\r\n    const images = [];\r\n    const animation = {\r\n        frame: 0\r\n    };\r\n\r\n    for (let i = 0; i < frameCount; i++) {\r\n        const img = new Image();\r\n        img.src = currentFrame(i);\r\n        images.push(img);\r\n    }\r\n\r\n    gsap.to(animation, {\r\n        frame: frameCount - 1,\r\n        snap: \"frame\",\r\n        ease: \"none\",\r\n        scrollTrigger: {\r\n            scrub: 0.5\r\n        },\r\n        onUpdate: render \/\/ use animation onUpdate instead of scrollTrigger's onUpdate\r\n    });\r\n\r\n    images[0].onload = render;\r\n\r\nfunction render() {\r\n    context.clearRect(0, 0, canvas.width, canvas.height);\r\n    const image = images[animation.frame];\r\n    const offsetX = (canvas.width - image.width) \/ 2; \/\/ Calculate horizontal offset\r\n    const offsetY = (canvas.height - image.height) \/ 2; \/\/ Calculate vertical offset\r\n    context.drawImage(image, offsetX, offsetY); \/\/ Draw the image with offsets\r\n}\r\n  <\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/4seotest.eu\/index.php\/wp-json\/wp\/v2\/pages\/8"}],"collection":[{"href":"https:\/\/4seotest.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/4seotest.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/4seotest.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/4seotest.eu\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":31,"href":"https:\/\/4seotest.eu\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/4seotest.eu\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/4seotest.eu\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}