@germingi/scroll-and-fade-text
Version:
Vue3 component which repeatedly scrolls and fades text in a carousel fashion.
2 lines (1 loc) • 1.91 kB
JavaScript
(function(t,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(t=typeof globalThis<"u"?globalThis:t||self,t.ScrollAndFadeText=n(t.Vue))})(this,function(t){"use strict";const n={props:{text:{required:!0,type:String},scrollSpeedPxPerS:{required:!1,type:Number,default:50,validator(e){return e>0}},visibleWaitTimeMs:{required:!1,type:Number,default:1e3,validator(e){return e>0}},invisibleWaitTimeMs:{required:!1,type:Number,default:500,validator(e){return e>0}},fadeTimeMs:{required:!1,type:Number,default:500,validator(e){return e>0}}},setup(){return{mySpanRef:t.ref(null)}},mounted(){this.animateScroll()},methods:{animateScroll(){const e=this.$el;if(e&&this.mySpanRef){const s=this.mySpanRef.offsetWidth-e.offsetWidth;if(s-1>0){const a=s/this.scrollSpeedPxPerS*1e3,i=2*this.visibleWaitTimeMs+a+2*this.fadeTimeMs+this.invisibleWaitTimeMs,o=this.mySpanRef.animate([{transform:"translateX(0)",opacity:1},{transform:"translateX(0)",opacity:1,offset:this.visibleWaitTimeMs/i},{transform:`translateX(-${s}px)`,opacity:1,offset:(this.visibleWaitTimeMs+a)/i},{transform:`translateX(-${s}px)`,opacity:1,offset:(2*this.visibleWaitTimeMs+a)/i},{transform:`translateX(-${s}px)`,opacity:0,offset:(2*this.visibleWaitTimeMs+a+this.fadeTimeMs)/i},{transform:"translateX(0)",opacity:0,offset:(2*this.visibleWaitTimeMs+a+this.fadeTimeMs+this.invisibleWaitTimeMs)/i}],{duration:i,fill:"forwards",iterations:1});o.onfinish=this.animateScroll}else this.mySpanRef.style.animation="none"}}}},l=(e,s)=>{const r=e.__vccOpts||e;for(const[a,i]of s)r[a]=i;return r},f={class:"scroll-and-fade-text-div"};function d(e,s,r,a,i,o){return t.openBlock(),t.createElementBlock("div",f,[t.createElementVNode("span",{ref:"mySpanRef",class:"scroll-and-fade-text-span"},t.toDisplayString(r.text),513)])}return l(n,[["render",d],["__scopeId","data-v-9aa715dc"]])});