You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
688 B
Vue
38 lines
688 B
Vue
<script>
|
|
import { TextScramble } from "../TextScramble.mjs";
|
|
|
|
export default {
|
|
props: {
|
|
phrases: Array,
|
|
},
|
|
mounted() {
|
|
const el = this.$refs.TextScramble;
|
|
const fx = new TextScramble(el);
|
|
|
|
let counter = 0
|
|
const next = () => {
|
|
fx.setText(this.phrases[counter]).then(() => setTimeout(next, 600));
|
|
counter = (counter + 1) % this.phrases.length;
|
|
}
|
|
|
|
next();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="TextScramble my-4" ref="TextScramble"></div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.TextScramble {
|
|
font-size: 2.5rem;
|
|
font-weight: lighter;
|
|
font-family: "Roboto Thin", monospace;
|
|
text-align: center;
|
|
.dud {
|
|
color: #166161;
|
|
}
|
|
}
|
|
</style>
|