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 ? `${Math.round(definition.width)}px` : 'auto',
              height: isVertical ? `${Math.round(definition.height)}px` : 'auto',
              rotate: `${definition.angle}deg`
            }"
    />

    <!--suppress RequiredAttributes -->
    <img v-for="file in dynamicFiles"
         :data-src="file.src"
         :style="{
             top: `${Math.round(file.top)}px`,
             left: `${Math.round(file.left)}px`,
             width: `${Math.round(definition.width)}px`,
             height: `${Math.round(definition.height)}px`,
             rotate: `${definition.angle}deg`
           }"
    />
  </div>
</template>

<script lang="ts">
import {defineComponent, PropType} from "vue";
import {rotate} from "@/utils";

export default defineComponent({
  name: "VideoScroll",
  props: {
    definition: {
      type: Object as PropType<VideoScrollDef>,
      required: true
    }
  },
  computed: {
    dynamicFiles(): { top: number, left: number, src: string }[] {
      return this.definition.files.slice(1).map((src: string, idx: number) => {
        const cy = this.definition.top +
            (this.isVertical ? (this.definition.height * (idx + 1) * this.verticalDirection) : 0);
        const cx = this.definition.left +
            (this.isHorizontal ? (this.definition.width * (idx + 1) * this.horizontalDirection) : 0);
        const [left, top] = rotate(cx, cy, this.definition.left, this.definition.top, this.definition.angle);
        return {top, left, src};
      });
    },
    isHorizontal(): boolean {
      return this.definition.directions.some(
          (dir: VideoScrollDirection) => dir === VideoScrollDirection.LEFT || dir === VideoScrollDirection.RIGHT
      );
    },
    isVertical(): boolean {
      return this.definition.directions.some(
          (dir: VideoScrollDirection) => dir === VideoScrollDirection.UP || dir === VideoScrollDirection.DOWN
      );
    },
    horizontalDirection(): number {
      return this.definition.directions.includes(VideoScrollDirection.RIGHT) ? 1 : -1;
    },
    verticalDirection(): number {
      return this.definition.directions.includes(VideoScrollDirection.DOWN) ? 1 : -1;
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries, _) => {
      entries.forEach((entry) => {
        const element = entry.target as HTMLImageElement;
        if (entry.isIntersecting) {
          if (!element.src) {
            console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
            element.src = element.dataset.src!;
            element.onload = () => {
              element.classList.add("loaded");
              if (this.isHorizontal) {
                element.style.height = "auto";
              } else {
                element.style.width = "auto";
              }
            };
          }
        }
      });
    });
    Array.from((this.$refs.root as Element).children).forEach((el) => {
      observer.observe(el);
    });
  }
});

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

export interface VideoScrollDef {
  top: number,
  left: number,
  angle: number,
  width: number,
  height: number,
  directions: 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>