Amir Mohamadi
48 lines
1.7 KiB
Vue
48 lines
1.7 KiB
Vue
<template>
|
|
<div class="pre-loader">
|
|
<logo id="preLoadserLogo"/>
|
|
<loading id="loadingCircle"/>
|
|
<p id="preLoaderTxt">Arak Rail Co.</p>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
////////////////////////////////// text split
|
|
function amirTxtSplit(txtID) {
|
|
var line = txtID.html(); // get the sentence
|
|
var parts = line.split(' ');
|
|
var word = '';
|
|
var letterSpans = '';
|
|
var wordSpans = '';
|
|
var i = '';
|
|
var j = '';
|
|
for (i = 0; i < parts.length; i++) { // how many words
|
|
letterSpans = "";
|
|
word = parts[i];
|
|
|
|
for (j = 0; j < word.length; j++) { // how many letters in each words
|
|
letterSpans += '<span class="tsLetters">' + word[j] + '</span>' // creat a span for each letter
|
|
}
|
|
wordSpans += '<span class="tsWords">' + letterSpans + ' </span>'
|
|
}
|
|
|
|
txtID.html(wordSpans) // render the sentence
|
|
}
|
|
|
|
amirTxtSplit($('#preLoaderTxt'))
|
|
|
|
////////////////////////////////// animation
|
|
this.$gsap.timeline({delay: 3})
|
|
.set($('#preLoaderTxt'), {opacity: 1})
|
|
.to($('#loadingCircle'), {autoAlpha: 0, duration: 0.4})
|
|
.fromTo($('#preLoadserLogo'), {scaleX: 0.7, opacity: 0}, {scaleX: 1, opacity: 1, duration: 0.3}, '+=0.2')
|
|
.fromTo($('#preLoaderTxt .tsLetters'), {x: 10, opacity: 0}, {x: 0, opacity: 1, duration: 0.5, stagger: 0.05})
|
|
.to($('#preLoadserLogo,#preLoaderTxt'), {opacity: 0, scale: 0.5, duration: 0.1}, '+=0.2')
|
|
.to($('.pre-loader'), {autoAlpha: 0, duration: 0.3})
|
|
}
|
|
}
|
|
</script>
|