{"id":1565,"date":"2024-07-02T13:48:27","date_gmt":"2024-07-02T13:48:27","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=1565"},"modified":"2024-10-06T12:50:04","modified_gmt":"2024-10-06T12:50:04","slug":"eqclaude","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/eqclaude\/","title":{"rendered":"EQ Claude"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1565\" class=\"elementor elementor-1565\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37f762c e-flex e-con-boxed e-con e-parent\" data-id=\"37f762c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f852fa0 elementor-widget elementor-widget-spacer\" data-id=\"f852fa0\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d226767 elementor-widget elementor-widget-html\" data-id=\"d226767\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html>\n<head>\n    <style>\n        #animation-container {\n            width: 600px;\n            height: 400px;\n            position: relative;\n            background-color: #FFFFFF00;\n        }\n        #redObject {\n            width: 58px;\n            height: 61px;\n            position: absolute;\n            left: 51px;\n            top: 205px;\n        }\n        #greenObject {\n            width: 100px;\n            height: 100px;\n            position: absolute;\n            left: 458px;\n            top: 110px;\n        }\n    <\/style>\n<\/head>\n<body>\n    <div id=\"animation-container\">\n        <img decoding=\"async\" id=\"redObject\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/10\/redtest1.jpg\" alt=\"Red Object\">\n        <img decoding=\"async\" id=\"greenObject\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/10\/greentest1.jpg\" alt=\"Green Object\">\n    <\/div>\n\n    <script>\n        function lerp(start, end, t) {\n            return start * (1 - t) + end * t;\n        }\n\n        function animateOnScroll() {\n            const container = document.getElementById('animation-container');\n            const redObject = document.getElementById('redObject');\n            const greenObject = document.getElementById('greenObject');\n\n            const rect = container.getBoundingClientRect();\n            const scrollProgress = Math.max(0, Math.min(1, 1 - (rect.bottom \/ window.innerHeight)));\n\n            \/\/ Animate redObject\n            redObject.style.left = `${lerp(51, 480, scrollProgress)}px`;\n            redObject.style.top = `${lerp(205, 103, scrollProgress)}px`;\n\n            \/\/ Animate greenObject\n            greenObject.style.left = `${lerp(458, 59, scrollProgress)}px`;\n            greenObject.style.top = `${lerp(110, 84, scrollProgress)}px`;\n\n            requestAnimationFrame(animateOnScroll);\n        }\n\n        \/\/ Start the animation loop\n        animateOnScroll();\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\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-e3a54c6 e-flex e-con-boxed e-con e-parent\" data-id=\"e3a54c6\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04946e2 elementor-widget elementor-widget-html\" data-id=\"04946e2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n    #rotate-container {\n        width: 100%;\n        padding-bottom: 100%; \/* Skaber en kvadratisk container *\/\n        position: relative;\n        overflow: hidden; \/* Skjuler dele af billedet, der roterer ud over containeren *\/\n    }\n    #rotate-image {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover; \/* F\u00e5r billedet til at d\u00e6kke hele containeren *\/\n    }\n<\/style>\n\n<div id=\"rotate-container\">\n    <img decoding=\"async\" id=\"rotate-image\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/09\/ordcirkel-hvid1.png\" alt=\"Roterende billede\">\n<\/div>\n\n<script>\n(function() {\n    var img = document.getElementById('rotate-image');\n    var container = document.getElementById('rotate-container');\n    var rotationFactor = 0.4; \/\/ Juster dette for at \u00e6ndre rotationshastigheden\n\n    function updateRotation() {\n        var scrollPosition = window.pageYOffset;\n        var containerRect = container.getBoundingClientRect();\n        var containerCenter = containerRect.top + containerRect.height \/ 2;\n        var viewportCenter = window.innerHeight \/ 2;\n        var distanceFromCenter = containerCenter - viewportCenter;\n        \n        var rotation = distanceFromCenter * rotationFactor;\n        img.style.transform = 'rotate(' + rotation + 'deg)';\n        requestAnimationFrame(updateRotation);\n    }\n\n    window.addEventListener('load', function() {\n        requestAnimationFrame(updateRotation);\n    });\n\n    window.addEventListener('resize', updateRotation);\n})();\n<\/script>\t\t\t\t<\/div>\n\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-1565","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=1565"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1565\/revisions"}],"predecessor-version":[{"id":4732,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1565\/revisions\/4732"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}