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/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>