added animations and pageLoad and preLoader

2020-12-19 13:26:55 +03:30
parent bc5e617778
commit 9433eb84ac
57 changed files with 13099 additions and 494 deletions
@@ -0,0 +1,47 @@
+<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>