line-and-surface/app/src/components/VideoScroll.vue

<template>
  <div class="video-scroll" ref="root">
    <img v-for="(file, idx) in definition.files"
         :data-src="file"
         :style="{
           top: `${Math.round(definition.top)}px`,
           left: `${Math.round(definition.left) + width * idx}px`,
         }"
    />

  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";

export default defineComponent({
  name: "VideoScroll",
  props: {
    definition: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const width = ref(0);
    const height = ref(0);
    const root = ref<Element | null>(null);

    const definition = props.definition as VideoScrollDef;
    getMeta(definition.files[0]).then((img) => {
      width.value = img.width;
      height.value = img.height;
    });

    onMounted(() => {
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
          const element = entry.target as HTMLImageElement;
          if (entry.isIntersecting) {
            element.classList.add("visible");
            if (!element.src) {
              element.src = element.dataset.src!;
              element.onload = () => {
                element.classList.add("loaded");
              };
            }
          } else {
            element.classList.remove("visible");
          }
        });
      }, {rootMargin: "100px"});
      Array.from((root.value as Element).children).forEach((el) => {
        observer.observe(el);
      });
    });

    return {
      root,
      width,
      height
    };

  }
});

export enum VideoScrollDirection {
  RIGHT
}

export interface VideoScrollDef {
  top: number,
  left: number,
  direction: VideoScrollDirection,
  files: string[],
  style?: { [key: string]: string }
}

function getMeta(url: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    let img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject();
    img.src = url;
  });
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.video-scroll img {
  position: absolute;
  image-rendering: optimizeSpeed;
  opacity: 0;
  transition: opacity .5s;
  visibility: hidden;
}

.loaded {
  opacity: 1 !important;
}

.visible {
  visibility: visible !important;
}
</style>