@germingi/scroll-and-fade-text/dist/scroll-and-fade-text.js

Vue3 component which repeatedly scrolls and fades text in a carousel fashion.

import { ref as n, openBlock as o, createElementBlock as l, createElementVNode as f, toDisplayString as c } from "vue";
const m = {
  props: {
    text: {
      required: !0,
      type: String
    },
    scrollSpeedPxPerS: {
      required: !1,
      type: Number,
      default: 50,
      validator(t) {
        return t > 0;
      }
    },
    visibleWaitTimeMs: {
      required: !1,
      type: Number,
      default: 1e3,
      validator(t) {
        return t > 0;
      }
    },
    invisibleWaitTimeMs: {
      required: !1,
      type: Number,
      default: 500,
      validator(t) {
        return t > 0;
      }
    },
    fadeTimeMs: {
      required: !1,
      type: Number,
      default: 500,
      validator(t) {
        return t > 0;
      }
    }
  },
  setup() {
    return {
      mySpanRef: n(null)
    };
  },
  mounted() {
    this.animateScroll();
  },
  methods: {
    animateScroll() {
      const t = this.$el;
      if (t && this.mySpanRef) {
        const i = this.mySpanRef.offsetWidth - t.offsetWidth;
        if (i - 1 > 0) {
          const s = i / this.scrollSpeedPxPerS * 1e3, e = 2 * this.visibleWaitTimeMs + s + 2 * this.fadeTimeMs + this.invisibleWaitTimeMs, r = this.mySpanRef.animate(
            [
              { transform: "translateX(0)", opacity: 1 },
              {
                transform: "translateX(0)",
                opacity: 1,
                offset: this.visibleWaitTimeMs / e
              },
              {
                transform: `translateX(-${i}px)`,
                opacity: 1,
                offset: (this.visibleWaitTimeMs + s) / e
              },
              {
                transform: `translateX(-${i}px)`,
                opacity: 1,
                offset: (2 * this.visibleWaitTimeMs + s) / e
              },
              {
                transform: `translateX(-${i}px)`,
                opacity: 0,
                offset: (2 * this.visibleWaitTimeMs + s + this.fadeTimeMs) / e
              },
              {
                transform: "translateX(0)",
                opacity: 0,
                offset: (2 * this.visibleWaitTimeMs + s + this.fadeTimeMs + this.invisibleWaitTimeMs) / e
              }
            ],
            {
              duration: e,
              fill: "forwards",
              iterations: 1
            }
          );
          r.onfinish = this.animateScroll;
        } else
          this.mySpanRef.style.animation = "none";
      }
    }
  }
}, d = (t, i) => {
  const a = t.__vccOpts || t;
  for (const [s, e] of i)
    a[s] = e;
  return a;
}, p = { class: "scroll-and-fade-text-div" };
function u(t, i, a, s, e, r) {
  return o(), l("div", p, [
    f("span", {
      ref: "mySpanRef",
      class: "scroll-and-fade-text-span"
    }, c(a.text), 513)
  ]);
}
const v = /* @__PURE__ */ d(m, [["render", u], ["__scopeId", "data-v-9aa715dc"]]);
export {
  v as default
};