{"id":9086,"date":"2025-09-26T09:45:43","date_gmt":"2025-09-26T09:45:43","guid":{"rendered":"https:\/\/artec.lk\/?page_id=9086"},"modified":"2025-09-29T05:26:54","modified_gmt":"2025-09-29T05:26:54","slug":"video","status":"publish","type":"page","link":"https:\/\/artec.lk\/index.php\/video\/","title":{"rendered":"Video"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9086\" class=\"elementor elementor-9086\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38d0755 e-flex e-con-boxed e-con e-parent\" data-id=\"38d0755\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-56588cd elementor-widget elementor-widget-html\" data-id=\"56588cd\" 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<!-- ========== Styles ========== -->\r\n<style>\r\n  #video-scroller {\r\n    width: 100%;\r\n  }\r\n\r\n  #video-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .video-sticky {\r\n    position: sticky;\r\n    top: 0;\r\n    height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    overflow: hidden;\r\n    z-index: 50;\r\n    background: #000;\r\n  }\r\n\r\n  #myVideo {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: block;\r\n    object-fit: cover;\r\n    pointer-events: none;\r\n    -webkit-user-select: none;\r\n  }\r\n\r\n  \/* Text overlays *\/\r\n  .video-text {\r\n    position: absolute;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    bottom: -20%; \/* start below the video *\/\r\n    color: white;\r\n    font-size: 4vw;\r\n    font-weight: bold;\r\n    text-align: center;\r\n    opacity: 0;\r\n    z-index: 100;\r\n    pointer-events: none;\r\n  }\r\n\r\n  video::-webkit-media-controls { display:none !important; }\r\n\r\n  \/* spacer for scrolling after video *\/\r\n  .after-video {\r\n    height: 150vh;\r\n    background: #111;\r\n  }\r\n<\/style>\r\n\r\n<!-- ========== HTML ========== -->\r\n<div id=\"video-scroller\">\r\n  <div id=\"video-wrapper\">\r\n    <div class=\"video-sticky\">\r\n      <video id=\"myVideo\" autoplay muted playsinline loop preload=\"auto\" webkit-playsinline>\r\n        <source src=\"https:\/\/artec.lk\/wp-content\/uploads\/2025\/09\/An_8second_minimal_202509261514_4hala-1.mp4\" type=\"video\/mp4\">\r\n        Your browser does not support the video tag.\r\n      <\/video>\r\n\r\n      <!-- Overlay texts -->\r\n      <div id=\"text1\" class=\"video-text\">test1<\/div>\r\n      <div id=\"text2\" class=\"video-text\">test2<\/div>\r\n      <div id=\"text3\" class=\"video-text\">test3<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"after-video\">\r\n  <h2 style=\"color:white; text-align:center; padding-top:50px;\">Scroll continues below video...<\/h2>\r\n<\/div>\r\n\r\n<!-- ========== Scripts ========== -->\r\n<script src=\"https:\/\/unpkg.com\/gsap@3\/dist\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/unpkg.com\/gsap@3\/dist\/ScrollTrigger.min.js\"><\/script>\r\n\r\n<script>\r\n(function () {\r\n  gsap.registerPlugin(ScrollTrigger);\r\n\r\n  const wrapper = document.getElementById(\"video-wrapper\");\r\n  const texts = [\"#text1\", \"#text2\", \"#text3\"];\r\n\r\n  \/\/ Add enough scroll height for 3 text animations + exit\r\n  function setWrapperHeight() {\r\n    wrapper.style.height = (window.innerHeight * (texts.length + 1)) + \"px\";\r\n  }\r\n  setWrapperHeight();\r\n  window.addEventListener(\"resize\", setWrapperHeight);\r\n\r\n  \/\/ Animate each text\r\n  texts.forEach((id, index) => {\r\n    const isLast = (index === texts.length - 1);\r\n\r\n    gsap.fromTo(id,\r\n      { y: \"100%\", opacity: 0 }, \/\/ from bottom\r\n      {\r\n        y: \"-50%\", \/\/ center (since we translateX already, -50% keeps middle vertically)\r\n        opacity: 1,\r\n        scrollTrigger: {\r\n          trigger: wrapper,\r\n          start: () => \"top+=\" + (window.innerHeight * index) + \" top\",\r\n          end: () => \"top+=\" + (window.innerHeight * (index + 1)) + \" top\",\r\n          scrub: true,\r\n          pin: false,\r\n        }\r\n      }\r\n    );\r\n\r\n    if (!isLast) {\r\n      \/\/ Fade out when leaving, except for last text\r\n      gsap.to(id, {\r\n        opacity: 0,\r\n        y: \"-150%\",\r\n        scrollTrigger: {\r\n          trigger: wrapper,\r\n          start: () => \"top+=\" + (window.innerHeight * (index + 0.5)) + \" top\",\r\n          end: () => \"top+=\" + (window.innerHeight * (index + 1)) + \" top\",\r\n          scrub: true,\r\n        }\r\n      });\r\n    }\r\n  });\r\n})();\r\n<\/script>\r\n\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-2ebe4da e-flex e-con-boxed e-con e-parent\" data-id=\"2ebe4da\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8118af3 elementor-widget elementor-widget-image\" data-id=\"8118af3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"780\" height=\"303\" src=\"https:\/\/artec.lk\/wp-content\/uploads\/2024\/12\/banner1-1024x398.png\" class=\"attachment-large size-large wp-image-8909\" alt=\"\" srcset=\"https:\/\/artec.lk\/wp-content\/uploads\/2024\/12\/banner1-1024x398.png 1024w, https:\/\/artec.lk\/wp-content\/uploads\/2024\/12\/banner1-300x117.png 300w, https:\/\/artec.lk\/wp-content\/uploads\/2024\/12\/banner1-1536x597.png 1536w, https:\/\/artec.lk\/wp-content\/uploads\/2024\/12\/banner1-2048x796.png 2048w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/>\t\t\t\t\t\t\t\t\t\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>Your browser does not support the video tag. test1 test2 test3 Scroll continues below video&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9086","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/artec.lk\/index.php\/wp-json\/wp\/v2\/pages\/9086","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artec.lk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/artec.lk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/artec.lk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artec.lk\/index.php\/wp-json\/wp\/v2\/comments?post=9086"}],"version-history":[{"count":37,"href":"https:\/\/artec.lk\/index.php\/wp-json\/wp\/v2\/pages\/9086\/revisions"}],"predecessor-version":[{"id":9127,"href":"https:\/\/artec.lk\/index.php\/wp-json\/wp\/v2\/pages\/9086\/revisions\/9127"}],"wp:attachment":[{"href":"https:\/\/artec.lk\/index.php\/wp-json\/wp\/v2\/media?parent=9086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}