{"id":3388,"date":"2024-07-11T23:52:58","date_gmt":"2024-07-11T23:52:58","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=3388"},"modified":"2024-10-07T15:31:42","modified_gmt":"2024-10-07T15:31:42","slug":"scrollsequencer","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/scrollsequencer\/","title":{"rendered":"scrollsequencer"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3388\" class=\"elementor elementor-3388\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79226ff6 e-flex e-con-boxed e-con e-parent\" data-id=\"79226ff6\" 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-6b56b9d5 elementor-widget elementor-widget-spacer\" data-id=\"6b56b9d5\" 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-3842bd95 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"3842bd95\" 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<div id=\"video-container\" style=\"width: 100%; height: 100vh; overflow: hidden;\">\n  <video id=\"scroll-video\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/10\/akis-1140x300-indtest6.mp4\" style=\"width: 100%; height: 100%; object-fit: cover;\" muted><\/video>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const video = document.getElementById('scroll-video');\n  const videoContainer = document.getElementById('video-container');\n  const totalFrames = 120;\n  const fps = 30;\n  const duration = totalFrames \/ fps;\n  \n  video.load();\n  video.pause();\n  \n  let lastScrollTop = 0;\n  \n  function updateVideoFrame() {\n    const scrollPosition = window.pageYOffset;\n    const containerRect = videoContainer.getBoundingClientRect();\n    const containerHeight = containerRect.height;\n    const containerTop = containerRect.top + scrollPosition;\n    const containerBottom = containerTop + containerHeight;\n    \n    const viewportHeight = window.innerHeight;\n    const scrollRange = containerHeight + viewportHeight;\n    \n    let progress = (scrollPosition - containerTop + viewportHeight) \/ scrollRange;\n    progress = Math.max(0, Math.min(1, progress));\n    \n    const targetTime = progress * duration;\n    video.currentTime = targetTime;\n    \n    lastScrollTop = scrollPosition;\n    \n    requestAnimationFrame(updateVideoFrame);\n  }\n  \n  updateVideoFrame();\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-525495c3 animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"525495c3\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Add Your Heading Text Here<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4e9ac049 animated-slow elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"4e9ac049\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-defe4b0 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"defe4b0\" 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<!-- Eksempel p\u00e5 hvordan man tilf\u00f8jer videoafspillere -->\n<div class=\"video-container\" data-video-src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/10\/visualist.mp4\"><\/div>\n\n<!-- Du kan tilf\u00f8je flere afspillere ved at kopiere linjen ovenfor og \u00e6ndre data-video-src attributten -->\n\n<style>\n.video-container {\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  margin-bottom: 0vh; \/* Giver plads mellem videoerne *\/\n}\n.scroll-video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  function createScrollVideoPlayer(container) {\n    const videoSrc = container.dataset.videoSrc;\n    const video = document.createElement('video');\n    video.className = 'scroll-video';\n    video.src = videoSrc;\n    video.muted = true;\n    container.appendChild(video);\n\n    const totalFrames = 120;\n    const fps = 30;\n    const duration = totalFrames \/ fps;\n    \n    video.load();\n    video.pause();\n    \n    function updateVideoFrame() {\n      const scrollPosition = window.pageYOffset;\n      const containerRect = container.getBoundingClientRect();\n      const containerHeight = containerRect.height;\n      const containerTop = containerRect.top + scrollPosition;\n      \n      const viewportHeight = window.innerHeight;\n      const scrollRange = containerHeight + viewportHeight;\n      \n      let progress = (scrollPosition - containerTop + viewportHeight) \/ scrollRange;\n      progress = Math.max(0, Math.min(1, progress));\n      \n      const targetTime = progress * duration;\n      video.currentTime = targetTime;\n      \n      requestAnimationFrame(updateVideoFrame);\n    }\n    \n    updateVideoFrame();\n  }\n\n  \/\/ Opret afspillere for alle elementer med klassen 'video-container'\n  const containers = document.querySelectorAll('.video-container');\n  containers.forEach(container => createScrollVideoPlayer(container));\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71fc67df elementor-widget elementor-widget-spacer\" data-id=\"71fc67df\" 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-18a7848 elementor-widget elementor-widget-spacer\" data-id=\"18a7848\" 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":"<p>Add Your Heading Text Here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.<\/p>\n","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-3388","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3388","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=3388"}],"version-history":[{"count":16,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3388\/revisions"}],"predecessor-version":[{"id":5313,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3388\/revisions\/5313"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=3388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}