hamid.zarghami1@gmail.com
75 lines
2.8 KiB
Vue
75 lines
2.8 KiB
Vue
<template>
|
|
<div class="preLoader">
|
|
<div class="bgDIV"></div>
|
|
<div class="bgDIV"></div>
|
|
<div class="content relativePos">
|
|
<p class="p1">غذای سالم</p>
|
|
<p class="p2">انسان سالم</p>
|
|
<p class="p3">جامعه سالم</p>
|
|
</div>
|
|
<div class="loading">
|
|
<span>L</span>
|
|
<span>O</span>
|
|
<span>A</span>
|
|
<span>D</span>
|
|
<span>I</span>
|
|
<span>N</span>
|
|
<span>G</span>
|
|
</div>
|
|
<div class="progressBar"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
mounted() {
|
|
///////////////////////////////////////////////////////////////////
|
|
const preLoaderTl_step1 = this.$gsap.timeline({
|
|
onComplete: () => {
|
|
this.$store.commit('global_vars/preLoader_done')
|
|
}
|
|
})
|
|
.to($('.p1'), {opacity: 1, duration: 0.3,})
|
|
.to($('.p1'), {top: -40, duration: 0.7, ease: 'power4.inOut'}, '+=1')
|
|
.to($('.p2'), {top: 0, duration: 0.7, ease: 'power4.inOut'})
|
|
.to($('.p2'), {top: -40, duration: 0.7, ease: 'power4.inOut'}, '+=1')
|
|
.to($('.p3'), {top: 0, duration: 0.7, ease: 'power4.inOut'})
|
|
.to($('.p3'), {top: -40, duration: 0.7, ease: 'power4.inOut'}, '+=1')
|
|
|
|
.to($('.bgDIV'), {
|
|
y: this.$gsap.utils.wrap(['-100%', '100%']), duration: 1.5, onStart: () => {
|
|
setTimeout(() => {
|
|
preLoaderTl_step2.play()
|
|
}, 950)
|
|
}
|
|
})
|
|
.set($(".preLoader"), {display: 'none'})
|
|
.timeScale(1.3)
|
|
|
|
const progressbarTl = this.$gsap.timeline()
|
|
.set($('.preLoader .progressBar'), {opacity: 1})
|
|
.from($(".preLoader .progressBar"), {width: 0, duration: preLoaderTl_step1.totalDuration() / 1.5}, 0)
|
|
.to($(".preLoader .progressBar"), {opacity: 0, duration: 0.3}, ((preLoaderTl_step1.totalDuration() / 1.5) - 0.5))
|
|
|
|
|
|
const preLoaderTl_step2 = this.$gsap.timeline({paused: true})
|
|
/// header
|
|
.from($('.site--header'), {y: '-100%', duration: 0.4}, 0)
|
|
.from($(".site--header .reservation svg"), {scale: 0.8, opacity: 0, duration: 0.3}, 0)
|
|
.from($(".site--header .nav--links ul li"), {scale: 0.8, opacity: 0, duration: 0.2, stagger: 0.05}, 0.2)
|
|
.from($(".site--header .logo svg"), {scale: 0.8, opacity: 0, duration: 0.2}, 0.6)
|
|
|
|
/// footer
|
|
.from($('.site--footer'), {y: '100%', duration: 0.4}, 0)
|
|
.from($(".site--footer .goUp p"), {opacity: 0, duration: 0.3}, 0)
|
|
.from($(".site--footer .nav--links ul li"), {scale: 0.8, opacity: 0, duration: 0.2, stagger: 0.05}, 0.2)
|
|
.from($(".site--footer .copyRight h4"), {scale: 0.9, opacity: 0, duration: 0.2}, 0.4)
|
|
.from($(".site--footer .copyRight p"), {scale: 0.9, opacity: 0, duration: 0.2}, 0.5)
|
|
|
|
|
|
///////////////////////////////////////////////////////////////////
|
|
}
|
|
}
|
|
</script>
|