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
pages/_lang/services/index.vue
+60 -36
View File
@@ -35,16 +35,16 @@
</li>
</ul>
<div class="images">
<img src="~/assets/img/services/autodesk.png" alt="">
<img src="~/assets/img/services/tekla.png" alt="">
<img src="~/assets/img/services/solid_works.png" alt="">
<img class="anim-fadeIn" src="~/assets/img/services/autodesk.png" alt="">
<img class="anim-fadeIn" src="~/assets/img/services/tekla.png" alt="">
<img class="anim-fadeIn" src="~/assets/img/services/solid_works.png" alt="">
</div>
</div>
</div>
</div>
</section>
<section class="s2">
<img src="~/assets/img/services/services-s3-i1.jpg" alt="" class="section-bg">
<img src="~/assets/img/services/services-s3-i1.jpg" alt="" class="section-bg anim-parallax">
<div class="container">
<div class="panel">
<div class="parts p1">
@@ -54,25 +54,29 @@
<!-- image left -->
<div class="parts row align-items-center">
<div class="col-6">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<h2 class="title title-subtitle">{{staticData.t14}}</h2>
<p>{{staticData.t15}}</p>
</div>
<div class="col-6">
<div class="imgBox imgBox-shape">
<img src="~/assets/img/services/s2-i1.jpg" :alt="staticData.t14">
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
<div class="imgBox imgBox-shape anim-fadeIn">
<div class="img">
<img src="~/assets/img/services/s2-i1.jpg" :alt="staticData.t14">
</div>
</div>
</div>
</div>
<!-- image right -->
<div class="parts row align-items-center">
<div class="col-6">
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
<img src="~/assets/img/services/s2-i2.jpg" :alt="staticData.t16">
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
<div class="img">
<img src="~/assets/img/services/s2-i2.jpg" :alt="staticData.t16">
</div>
</div>
</div>
<div class="col-6">
<div class="col-12 col-lg-6">
<h2 class="title title-subtitle">{{staticData.t16}}</h2>
<p>{{staticData.t17}}</p>
</div>
@@ -80,25 +84,29 @@
<!-- image left -->
<div class="parts row align-items-center">
<div class="col-6">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<h2 class="title title-subtitle">{{staticData.t18}}</h2>
<p>{{staticData.t19}}</p>
</div>
<div class="col-6">
<div class="imgBox imgBox-shape">
<img src="~/assets/img/services/s2-i3.jpg" :alt="staticData.t18">
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
<div class="imgBox imgBox-shape anim-fadeIn">
<div class="img">
<img src="~/assets/img/services/s2-i3.jpg" :alt="staticData.t18">
</div>
</div>
</div>
</div>
<!-- image right -->
<div class="parts row align-items-center">
<div class="col-6">
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
<img src="~/assets/img/services/s2-i4.jpg" :alt="staticData.t20">
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
<div class="img">
<img src="~/assets/img/services/s2-i4.jpg" :alt="staticData.t20">
</div>
</div>
</div>
<div class="col-6">
<div class="col-12 col-lg-6">
<h2 class="title title-subtitle">{{staticData.t20}}</h2>
<p>{{staticData.t21}}</p>
</div>
@@ -106,25 +114,29 @@
<!-- image left -->
<div class="parts row align-items-center">
<div class="col-6">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<h2 class="title title-subtitle">{{staticData.t22}}</h2>
<p>{{staticData.t23}}</p>
</div>
<div class="col-6">
<div class="imgBox imgBox-shape">
<img src="~/assets/img/services/s2-i5.jpg" :alt="staticData.t22">
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
<div class="imgBox imgBox-shape anim-fadeIn">
<div class="img">
<img src="~/assets/img/services/s2-i5.jpg" :alt="staticData.t22">
</div>
</div>
</div>
</div>
<!-- image right -->
<div class="parts row align-items-center">
<div class="col-6">
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
<img src="~/assets/img/services/s2-i6.jpg" :alt="staticData.t24">
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
<div class="img">
<img src="~/assets/img/services/s2-i6.jpg" :alt="staticData.t24">
</div>
</div>
</div>
<div class="col-6">
<div class="col-12 col-lg-6">
<h2 class="title title-subtitle">{{staticData.t24}}</h2>
<p>{{staticData.t25}}</p>
</div>
@@ -132,25 +144,29 @@
<!-- image left -->
<div class="parts row align-items-center">
<div class="col-6">
<div class="col-12 col-lg-6 order-1 order-lg-0">
<h2 class="title title-subtitle">{{staticData.t26}}</h2>
<p>{{staticData.t27}}</p>
</div>
<div class="col-6">
<div class="imgBox imgBox-shape">
<img src="~/assets/img/services/s2-i7.jpg" :alt="staticData.t26">
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
<div class="imgBox imgBox-shape anim-fadeIn">
<div class="img">
<img src="~/assets/img/services/s2-i7.jpg" :alt="staticData.t26">
</div>
</div>
</div>
</div>
<!-- image right -->
<div class="parts row align-items-center">
<div class="col-6">
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
<img src="~/assets/img/services/s2-i8.jpg" :alt="staticData.t28">
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
<div class="img">
<img src="~/assets/img/services/s2-i8.jpg" :alt="staticData.t28">
</div>
</div>
</div>
<div class="col-6">
<div class="col-12 col-lg-6">
<h2 class="title title-subtitle">{{staticData.t28}}</h2>
<p>{{staticData.t29}}</p>
</div>
@@ -164,11 +180,19 @@
<script>
import {fadeInAnimation, parallaxAnimation} from "~/mixins/animations"
export default {
computed: {
staticData() {
return this.$store.state.staticData.services[this.$route.params.lang]
}
},
mixins: [fadeInAnimation, parallaxAnimation],
head() {
return {
title: this.staticData.hero
}
}
}
</script>