{"id":1170,"date":"2024-06-27T10:57:48","date_gmt":"2024-06-27T10:57:48","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=1170"},"modified":"2024-10-06T20:39:05","modified_gmt":"2024-10-06T20:39:05","slug":"audiomixer","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/audiomixer\/","title":{"rendered":"Audio Mixer"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1170\" class=\"elementor elementor-1170\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b05a4ed e-flex e-con-boxed e-con e-parent\" data-id=\"b05a4ed\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b6ed27 elementor-widget elementor-widget-spacer\" data-id=\"2b6ed27\" 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-9f3e5e0 elementor-widget elementor-widget-html\" data-id=\"9f3e5e0\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"container\">\n    <a href=\"http:\/\/example.com\/link1\" class=\"box green\"><\/a>\n    <a href=\"http:\/\/example.com\/link2\" class=\"box blue\"><\/a>\n    <a href=\"http:\/\/example.com\/link3\" class=\"box yellow\"><\/a>\n    <a href=\"http:\/\/example.com\/link4\" class=\"box red\"><\/a>\n<\/div>\n\n<style>\n  .container {\n    position: relative;\n    width: 1140px;\n    height: 400px;\n    overflow: hidden;\n  }\n\n  .box {\n    position: absolute;\n    width: 570px;\n    height: 200px;\n    background-size: cover; \/* S\u00f8rg for at billedet d\u00e6kker hele boksen *\/\n    background-position: center;\n    opacity: 0; \/* Start med 0% opacity *\/\n    transition: filter 0.3s ease; \/* Smooth transition for hover effect *\/\n    display: block; \/* S\u00f8rg for, at a-tags opf\u00f8rer sig som blok-elementer *\/\n  }\n\n  .box:hover {\n    filter: brightness(110%); \/* Lyser 10% op ved hover *\/\n  }\n\n  \/* Gr\u00f8n boks - bruger det gr\u00f8nne billede *\/\n  .green {\n    background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/10\/stuccc1.jpg');\n    top: -220px;\n    left: -570px;\n  }\n\n  \/* Bl\u00e5 boks - bruger det bl\u00e5 billede *\/\n  .blue {\n    background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/10\/stuccc2.jpg');\n    top: -220px;\n    right: -570px;\n  }\n\n  \/* Gul boks - bruger det gule billede *\/\n  .yellow {\n    background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/10\/stuccc3.jpg');\n    bottom: -220px;\n    left: -570px;\n  }\n\n  \/* R\u00f8d boks - bruger det r\u00f8de billede *\/\n  .red {\n    background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/10\/stuccc4.jpg');\n    bottom: -220px;\n    right: -570px;\n  }\n<\/style>\n\n<script>\n  \/\/ Funktion til at h\u00e5ndtere scrolling og beregne positionerne samt opacity for bokse\n  function handleScroll() {\n    const scrollTop = window.scrollY; \/\/ Hvor meget brugeren har scrollet\n    const maxScroll = 500; \/\/ Just\u00e9r denne v\u00e6rdi afh\u00e6ngig af, hvor hurtigt objekterne skal flytte sig\n    \n    \/\/ Beregner hvor langt animationen skal n\u00e5 baseret p\u00e5 scrollTop og maxScroll\n    const scrollFraction = Math.min(scrollTop \/ maxScroll, 1); \/\/ Holder v\u00e6rdien mellem 0 og 1\n    \n    \/\/ Beregn translation og opacity for hver boks baseret p\u00e5 scrolling\n    const translationX = scrollFraction * 570; \/\/ X-aksen (fuld bev\u00e6gelse)\n    const translationY = scrollFraction * 220; \/\/ Y-aksen (fuld bev\u00e6gelse)\n    \n    \/\/ Brug en eksponentiel funktion for en langsommere start p\u00e5 opaciteten og hurtigere slutning\n    const opacity = Math.pow(scrollFraction, 2); \/\/ Opacity \u00f8ges langsommere i starten og hurtigere mod slutningen\n\n    \/\/ Opdater position og opacity for boksene baseret p\u00e5 scroll-positionen\n    document.querySelector('.green').style.transform = `translate(${translationX}px, ${translationY}px)`;\n    document.querySelector('.green').style.opacity = opacity;\n\n    document.querySelector('.blue').style.transform = `translate(-${translationX}px, ${translationY}px)`;\n    document.querySelector('.blue').style.opacity = opacity;\n\n    document.querySelector('.yellow').style.transform = `translate(${translationX}px, -${translationY}px)`;\n    document.querySelector('.yellow').style.opacity = opacity;\n\n    document.querySelector('.red').style.transform = `translate(-${translationX}px, -${translationY}px)`;\n    document.querySelector('.red').style.opacity = opacity;\n  }\n\n  \/\/ Lyt efter scroll-eventet\n  window.addEventListener('scroll', handleScroll);\n\n  \/\/ Funktion til at afspille lyd ved hover\n  function playHoverSound() {\n    const audio = new Audio('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/10\/tick.mp3');\n    audio.play();\n  }\n\n  \/\/ Tilf\u00f8j hover-event listeners til hver boks\n  const boxes = document.querySelectorAll('.box');\n  boxes.forEach(box => {\n    box.addEventListener('mouseenter', playHoverSound); \/\/ Afspil lyd ved hover\n  });\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6b9602 elementor-widget elementor-widget-spacer\" data-id=\"c6b9602\" 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\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-1170","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1170","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=1170"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1170\/revisions"}],"predecessor-version":[{"id":4903,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1170\/revisions\/4903"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}