danak/arakrail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added animations and pageLoad and preLoader

Browse Source
This commit is contained in:
Amir Mohamadi
2020-12-19 13:26:55 +03:30
parent bc5e617778
commit 9433eb84ac
57 changed files with 13099 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CustomersCommunication.vue
+3 -3
View File
@@ -1,9 +1,9 @@
<template>
<section class="customers-communication">
<section class="customers-communication anim-fadeIn">
<div class="container clearfix">
<div class="panel">
<div class="row align-items-center">
<div class="col-6">
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
<div class="imgBox imgBox-reverse">
<div class="img">
<div class="shape"></div>
@@ -11,7 +11,7 @@
</div>
</div>
</div>
<div class="col-6">
<div class="col-12 col-lg-6">
<h2 class="title title-shape">{{staticData.t1}}</h2>
<p>{{staticData.t2}}</p>
<nuxt-link :to="{name: 'lang-contact',params: {lang: $route.params.lang}}" class="btn btn-reverse-fill">{{staticData.link}}</nuxt-link>
components/Hero.vue
+7 -4
View File
@@ -1,7 +1,7 @@
<template>
<div class="hero">
<div class="bg"></div>
<div class="txt">
<div class="hero anim-parallax-hero-container">
<div class="bg anim-parallax-hero"></div>
<div class="txt anim-parallax-hero-txt">
<div class="container">
<div class="row align-items-center">
<h2 class="col">{{title}}</h2>
@@ -12,13 +12,16 @@
</template>
<script>
import {parallaxAnimation_hero} from '~/mixins/animations'
export default {
props: {
title: {
required: true,
type: String
}
}
},
mixins: [parallaxAnimation_hero]
}
</script>
components/PageLoad.vue
+6
View File
@@ -0,0 +1,6 @@
<template>
<div class="page-load">
<logo/>
<p>Arak Rail Co.</p>
</div>
</template>
components/PreLoader.vue
+47
View File
@@ -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>
components/SiteFooterGlobal.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-8 links">
<div class="col-12 col-md-8 mb-3 mb-md-0 links">
<logo/>
<div class="box">
<p><b>{{staticData.t1}}</b> <span>{{staticData.address}}</span></p>
@@ -14,7 +14,7 @@
</p>
</div>
</div>
<div class="col-4 social">
<div class="col-12 col-md-4 social">
<ul class="social-links">
<li>
<a href="" target="_blank">
components/SiteFooterHomePage.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<footer class="footer footer--home">
<div class="container">
<div class="row">
<div class="col-8 links">
<div class="xol-12 col-md-8 mb-5 mb-md-0 links">
<div class="logo">
<logo/>
<span>{{staticData.t6}}</span>
@@ -32,7 +32,7 @@
<p class="blue"><b>{{staticData.t4}}</b> <a :href="'mailto:' + staticData.email">{{staticData.email}}</a></p>
</div>
</div>
<div class="col-4 map">
<div class="xol-12 col-md-4 map">
<img src="~/assets/img/footer-map.jpg" alt="">
<p>{{staticData.t5}}</p>
</div>
components/SiteHeader.vue
+56 -8
View File
@@ -25,7 +25,8 @@
</div>
<div class="container-fluid">
<nav class="row align-items-center">
<div class="col-12 links">
<!-- desktop -->
<div class="col-12 d-none d-md-block links">
<div class="container-fluid">
<ul class="row justify-content-start">
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
@@ -56,16 +57,16 @@
<a>{{staticData.tech_info}}</a>
<div class="drop-down">
<ul>
<li>
<li :class="$route.name === 'lang-tech-gTech' ? 'sub-menu-active' : null">
<nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}">{{staticData.ti_1}}</nuxt-link>
</li>
<li>
<li :class="$route.name === 'lang-tech-gStandard' ? 'sub-menu-active' : null">
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}">{{staticData.ti_2}}</nuxt-link>
</li>
<li>
<li :class="$route.name === 'lang-tech-gDesign' ? 'sub-menu-active' : null">
<nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}">{{staticData.ti_3}}</nuxt-link>
</li>
<li>
<li :class="$route.name === 'lang-tech-gUsage' ? 'sub-menu-active' : null">
<nuxt-link :to="{name: 'lang-tech-gUsage',params: {lang: $route.params.lang}}">{{staticData.ti_4}}</nuxt-link>
</li>
</ul>
@@ -80,6 +81,26 @@
</ul>
</div>
</div>
<!-- mobile -->
<div class="col-12 d-md-none links mobile">
<div class="container-fluid">
<ul class="row">
<li class="col">
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" exact class="logo">
<Logo/>
</nuxt-link>
</li>
<li class="col menu">
<div id="menuBtn" @click="offCanvas">
<div class="bars b1"></div>
<div class="bars b2"></div>
<div class="bars b3"></div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
@@ -99,6 +120,19 @@
computed: {
staticData() {
return this.$store.state.staticData.header[this.$route.params.lang]
},
offCanvasLiTL() {
if (process.server) return null
else return this.$gsap.timeline({delay: 0.3, paused: true})
.fromTo($('.offCanvas ul li'), {
x: this.$route.params.lang === 'fa' ? 10 : -10,
opacity: 0
}, {
x: 0,
opacity: 1,
duration: 0.4,
stagger: 0.03
})
}
},
methods: {
@@ -108,21 +142,35 @@
tech_info() {
const el = $('.tech_info .drop-down')
if (el.height() === 0) {
el.css({height: $('.tech_info .drop-down ul').height() + 10})
el.css({height: $('.tech_info .drop-down ul').height()})
} else {
el.css({height: 0})
}
},
offCanvas() {
if ($('.offCanvas').hasClass('active')) this.offCanvasLiTL.reverse()
else this.offCanvasLiTL.play()
$('#menuBtn').toggleClass('close')
$('.offCanvas').toggleClass('active')
$('body').toggleClass('offCanvas-active')
}
},
mounted() {
/////////////////////////////////////////////////////////// small header
$(window).scroll(function (e) {
if ($(window).scrollTop() > 50) {
$('.header').addClass('header-small')
$('.header,.offCanvas').addClass('header-small')
} else {
$('.header').removeClass('header-small')
$('.header,.offCanvas').removeClass('header-small')
}
})
/////////////////////////////////// offCanvas menu links
$('.offCanvas ul li').click(() => {
this.offCanvas()
})
$('.header .lang-bar a').click(() => {
if ($('.offCanvas').hasClass('active')) this.offCanvas()
})
}
}
</script>
components/admin/AdminAside.vue
+2
View File
@@ -16,6 +16,8 @@
<admin-aside-item icon="fas fa-bags-shopping" :link="{name: 'admin-projects'}" text="پروژه ها"/>
<admin-aside-item icon="fas fa-history" :link="{name: 'admin-history'}" text="تاریخچه"/>
<admin-aside-item icon="fas fa-envelope" :badge="$store.state.admin.unread" :link="{name: 'admin-messages'}" text="پیام های ارتباط با ما"/>
<admin-aside-item icon="fas fa-file-pdf" :link="{name: 'admin-catalog'}" text="آپلود فایل کاتالوگ"/>
components/icons/loading.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<svg style="display: block;" viewBox="0 0 107 107" xmlns="http://www.w3.org/2000/svg">
<g>
<path fill="#595959" opacity="1.00"
d=" M 57.60 7.27 C 63.10 5.30 69.36 10.20 69.00 15.97 C 69.02 20.95 64.07 25.15 59.17 24.42 C 54.95 23.97 51.44 20.13 51.37 15.89 C 51.21 12.05 53.97 8.42 57.60 7.27 Z"/>
</g>
<g>
<path fill="#757575" opacity="1.00"
d=" M 32.51 12.32 C 35.31 11.68 38.42 12.62 40.30 14.81 C 42.72 17.47 43.08 21.77 41.03 24.74 C 39.24 27.54 35.62 28.99 32.40 28.15 C 28.79 27.30 25.99 23.78 26.13 20.06 C 26.15 16.41 28.94 13.04 32.51 12.32 Z"/>
</g>
<g>
<path fill="#515151" opacity="1.00"
d=" M 81.46 19.45 C 85.25 18.77 89.29 20.74 91.15 24.10 C 93.41 27.94 92.51 33.32 89.01 36.11 C 86.05 38.64 81.52 38.98 78.19 36.99 C 74.69 35.03 72.76 30.68 73.68 26.77 C 74.49 23.06 77.69 20.01 81.46 19.45 Z"/>
</g>
<g>
<path fill="#8e8e8e" opacity="1.00"
d=" M 15.52 33.13 C 19.14 32.04 23.33 34.20 24.49 37.81 C 26.07 41.76 23.47 46.54 19.42 47.64 C 15.33 48.93 10.61 45.90 9.96 41.69 C 9.27 37.96 11.88 34.07 15.52 33.13 Z"/>
</g>
<g>
<path fill="#9a9a9a" opacity="1.00"
d=" M 15.54 60.09 C 18.94 58.93 22.86 61.16 23.88 64.54 C 25.20 68.48 22.18 73.18 18.02 73.50 C 14.29 73.94 10.81 70.63 10.72 66.95 C 10.45 63.88 12.62 60.94 15.54 60.09 Z"/>
</g>
<g>
<path fill="#e7e7e7" opacity="1.00" d=" M 80.58 74.26 C 83.19 73.04 87.16 74.12 87.70 77.26 C 88.34 80.85 84.12 84.36 80.81 82.39 C 77.55 80.97 76.78 75.55 80.58 74.26 Z"/>
</g>
<g>
<path fill="#bebebe" opacity="1.00"
d=" M 31.57 81.23 C 34.38 79.87 38.21 80.85 39.73 83.65 C 41.40 86.61 40.23 90.88 37.05 92.30 C 34.02 93.88 29.83 92.47 28.56 89.25 C 27.22 86.33 28.60 82.51 31.57 81.23 Z"/>
</g>
<g>
<path fill="#cecece" opacity="1.00"
d=" M 58.43 86.21 C 61.03 85.24 64.33 86.66 65.19 89.36 C 66.28 92.49 64.08 96.35 60.75 96.80 C 58.14 97.19 55.50 95.28 54.90 92.74 C 54.15 90.08 55.81 87.06 58.43 86.21 Z"/>
</g>
</svg>
</template>
components/offCanvas.vue
+63
View File
@@ -0,0 +1,63 @@
<template>
<div class="offCanvas">
<div class="links">
<ul>
<li class="title">
<h2>{{staticData.mainLinks}}</h2>
</li>
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
<a>{{staticData.home}}</a>
</nuxt-link>
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" tag="li" exact class="">
<a>{{staticData.about}}</a>
</nuxt-link>
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" tag="li" exact class="">
<a>{{staticData.services}}</a>
</nuxt-link>
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" tag="li" class="">
<a>{{staticData.products}}</a>
</nuxt-link>
<nuxt-link :to="{name: 'lang-projects',params: {lang: $route.params.lang}}" tag="li" exact class="">
<a>{{staticData.projects}}</a>
</nuxt-link>
<nuxt-link :to="{name: 'lang-blog',params: {lang: $route.params.lang}}" tag="li" class="">
<a>{{staticData.blog}}</a>
</nuxt-link>
<nuxt-link :to="{name: 'lang-contact',params: {lang: $route.params.lang}}" tag="li" exact class="">
<a>{{staticData.contact}}</a>
</nuxt-link>
<li class="title t2">
<h2>{{staticData.techLinks}}</h2>
</li>
<!-- technical information -->
<nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}" tag="li">
<a>{{staticData.ti_1}}</a>
</nuxt-link>
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}" tag="li">
<a>{{staticData.ti_2}}</a>
</nuxt-link>
<nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}" tag="li">
<a>{{staticData.ti_3}}</a>
</nuxt-link>
<nuxt-link :to="{name: 'lang-tech-gUsage',params: {lang: $route.params.lang}}" tag="li">
<a>{{staticData.ti_4}}</a>
</nuxt-link>
<!-- technical information -->
</ul>
</div>
</div>
</template>
<script>
export default {
computed: {
staticData() {
return this.$store.state.staticData.header[this.$route.params.lang]
}
}
}
</script>