vue-scrollin
Version:
Vue scroll-in text component
2 lines (1 loc) • 2.24 kB
JavaScript
var VScrollin=function(t,e){"use strict";function i(t){i.installed||(i.installed=!0,t.component("VScrollin",s))}!function(){if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],e=document.createElement("style");e.type="text/css",e.styleSheet?e.styleSheet.cssText="":e.appendChild(document.createTextNode("")),t.appendChild(e)}}();var s={render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"v-scrollin"},[t._v(" "+t._s(t.scrollingText)+" ")])},staticRenderFns:[],name:"VScrollin",props:{characters:{type:Array,required:!1,default:function(){return"qwertyuiopasdfghjklzxcvbnm".split("")}},misses:{type:Number,required:!1,default:4},speed:{type:Number,required:!1,default:80}},data:function(){return{amountFinished:0,currentMisses:0,finishedText:this.$slots.default[0].text,scroll:null,scrollingText:"",workingIndices:[]}},mounted:function(){var t=this;this.fillRandomLetters(),this.scroll=e.setInterval(function(){t.tick()},this.speed)},methods:{fillRandomLetters:function(){for(var t=this,e=[],i=0;i<this.finishedText.length;i++)e.push(t.getRandomLetter());this.scrollingText=e.join("")},getRandomLetter:function(){return this.characters[Math.floor(Math.random()*this.characters.length)]},replace:function(t,e,i){return i?t.substr(0,e)+i+t.substr(e+i.length):t},tick:function(){for(var t=this,i=this.amountFinished;i<this.amountFinished+this.workingIndices.length;i++)t.scrollingText=t.replace(t.scrollingText,i,t.getRandomLetter());this.workingIndices.length<3&&!this.amountFinished&&this.workingIndices.push(this.workingIndices.length),this.scrollingText===this.finishedText&&this.currentMisses===this.misses?e.clearInterval(this.scroll):++this.currentMisses===this.misses&&(this.scrollingText=this.replace(this.scrollingText,this.amountFinished,this.finishedText[this.amountFinished]),this.currentMisses=0,++this.amountFinished>=this.finishedText.length-2?this.workingIndices.sort(function(t,e){return t-e}).shift():this.workingIndices.sort(function(t,e){return t-e})[0]=this.amountFinished+3)}}},n={install:i},r=null;return"undefined"!=typeof window?r=window.Vue:"undefined"!=typeof global&&(r=global.Vue),r&&r.use(n),t.install=i,t.default=s,t}({},timers);