{"id":10077,"date":"2026-06-16T20:34:53","date_gmt":"2026-06-16T20:34:53","guid":{"rendered":"https:\/\/geolinktechnology.com\/?page_id=10077"},"modified":"2026-06-16T21:30:19","modified_gmt":"2026-06-16T21:30:19","slug":"sample-scroll","status":"publish","type":"page","link":"https:\/\/geolinktechnology.com\/?page_id=10077","title":{"rendered":"sample-scroll"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10077\" class=\"elementor elementor-10077\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92863d5 e-con-full e-flex e-con e-parent\" data-id=\"92863d5\" data-element_type=\"container\" data-e-type=\"container\" id=\"set-height\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t<div class=\"elementor-element elementor-element-dda3ee7 e-con-full e-flex e-con e-child\" data-id=\"dda3ee7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66748fe elementor-widget elementor-widget-html\" data-id=\"66748fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<video id=\"v0\" preload=\"auto\" muted>\r\n    <source src=\"https:\/\/geolinktechnology.com\/wp-content\/uploads\/2026\/06\/6392249-uhd_2732_1440_24fps-1-2.mp4\r\n\r\n\" type=\"video\/mp4\">\r\n <\/video>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6da64d0 e-con-full e-flex e-con e-parent\" data-id=\"6da64d0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-516cd97 elementor-widget elementor-widget-html\" data-id=\"516cd97\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* Placeholder div for scrolling *\/\r\n    #set-height {\r\n      height: 300vh; \/* Initial height, dynamically updated *\/\r\n      background: linear-gradient(to bottom, #ffffff, #cccccc);\r\n    }\r\n    \/* Fixed video styling *\/\r\n    #v0 {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: auto;\r\n      object-fit: cover;\r\n    }\r\n  <\/style>\r\n  \r\n  <script>\r\n    var vid = document.getElementById('v0');\r\n    var setHeight = document.getElementById(\"set-height\");\r\n    var playbackConst = 1000; \/\/ Adjusts scroll speed\r\n    vid.addEventListener('loadedmetadata', function () {\r\n      \/\/ Dynamically set page height based on video duration\r\n      setHeight.style.height = (vid.duration * playbackConst) + \"px\";\r\n      console.log(\"Video Duration: \", vid.duration);\r\n      scrollPlay(); \/\/ Ensure function starts after video metadata loads\r\n    });\r\n    function scrollPlay() {\r\n      let scrollTop = window.scrollY || document.documentElement.scrollTop;\r\n      let maxScroll = document.documentElement.scrollHeight - window.innerHeight;\r\n      let scrollFraction = scrollTop \/ maxScroll;\r\n      \/\/ Map scroll to video time\r\n      vid.currentTime = vid.duration * scrollFraction;\r\n      requestAnimationFrame(scrollPlay);\r\n    }\r\n    \/\/ Start the scrollPlay function\r\n    requestAnimationFrame(scrollPlay);\r\n  <\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-541a2cd e-con-full e-flex e-con e-parent\" data-id=\"541a2cd\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10077","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/geolinktechnology.com\/index.php?rest_route=\/wp\/v2\/pages\/10077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geolinktechnology.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/geolinktechnology.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/geolinktechnology.com\/index.php?rest_route=\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/geolinktechnology.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10077"}],"version-history":[{"count":7,"href":"https:\/\/geolinktechnology.com\/index.php?rest_route=\/wp\/v2\/pages\/10077\/revisions"}],"predecessor-version":[{"id":10089,"href":"https:\/\/geolinktechnology.com\/index.php?rest_route=\/wp\/v2\/pages\/10077\/revisions\/10089"}],"wp:attachment":[{"href":"https:\/\/geolinktechnology.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}