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

<template>
  <div class="video-scroll" ref="root">
    <img class="visible loaded"
         :src="definition.files[0]"
         :style="{
              top: `${Math.round(definition.top)}px`,
              left: `${Math.round(definition.left)}px`,
              width: isHorizontal(definition) ? `${Math.round(definition.width)}px` : 'auto',
              height: isHorizontal(definition) ? 'auto' : `${Math.round(definition.height)}px`,
            }"
    />

    <!--suppress RequiredAttributes -->
    <img v-for="(file, idx) in definition.files.slice(1)"
         :data-src="file"
         :data-direction="definition.direction"
         :style="{
             top: `${Math.round(definition.top) +
                   (isHorizontal(definition) ? 0 : (definition.height * (idx + 1) * directionSign))}px`,
             left: `${Math.round(definition.left) +
                   (isHorizontal(definition) ? (definition.width * (idx + 1) * directionSign) : 0)}px`,
             width: `${Math.round(definition.width)}px`,
             height: `${Math.round(definition.height)}px`,
           }"
    />
  </div>
</template>

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

export default defineComponent({
  name: "VideoScroll",
  props: {
    definition: {
      type: Object,
      required: true
    }
  },
  computed: {
    directionSign() {
      if (this.definition.direction == VideoScrollDirection.RIGHT ||
          this.definition.direction == VideoScrollDirection.DOWN) {
        return 1;
      } else {
        return -1;
      }
    }
  },
  methods: {
    isHorizontal(definition: VideoScrollDef): boolean {
      return definition.direction === "left" || definition.direction === "right";
    }
  },
  setup(props) {
    const root = ref<Element | null>(null);

    onMounted(() => {
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
          const element = entry.target as HTMLImageElement;
          if (entry.isIntersecting) {
            if (!element.src) {
              element.src = element.dataset.src!;
              if (element.dataset.direction == "left" || element.dataset.direction == "right") {
                element.style.height = "auto";
              } else {
                element.style.width = "auto";
              }
              element.onload = () => {
                element.classList.add("loaded");
              };
            }
          }
        });
      });
      Array.from((root.value as Element).children).forEach((el) => {
        observer.observe(el);
      });
    });

    return {
      root
    };
  }
});

export enum VideoScrollDirection {
  RIGHT = "right",
  LEFT = "left",
  UP = "up",
  DOWN = "down"
}

export interface VideoScrollDef {
  top: number,
  left: number,
  width: number,
  height: number,
  direction: VideoScrollDirection,
  files: string[]
}

</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;
}

.loaded {
  opacity: 1 !important;
}

</style>