HAM!DREZA
156 lines
3.1 KiB
Vue
156 lines
3.1 KiB
Vue
<template>
|
|
<div
|
|
ref="main"
|
|
id="flipSection"
|
|
class="-z-[1] relative mt-[100vw] lg:mt-[50vw] flex flex-col items-center justify-center"
|
|
>
|
|
<img
|
|
src="/public/images/assal.png"
|
|
alt="product-name"
|
|
class="z-[10] ax w-[18.205vw] lg:w-[17.292vw] h-[20.521vw]"
|
|
/>
|
|
<h1
|
|
class="font-bold text-[4.038vw] lg:text-[2.21vw] text-[#383E43] my-[2.083vw]"
|
|
>
|
|
عسل آقای عسل
|
|
</h1>
|
|
<p
|
|
class="text-[3.59vw] lg:text-[1.823vw] text-[#383E43] font-semibold"
|
|
dir="rtl"
|
|
>
|
|
510,000
|
|
<span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
|
|
</p>
|
|
|
|
|
|
|
|
<div class="absolute">
|
|
<div
|
|
ref="start"
|
|
class="start relative w-[87.69%] lg:w-[91.82%] flex flex-col items-center justify-center"
|
|
>
|
|
<svg
|
|
class="small absolute"
|
|
width="40.125vw"
|
|
height="40.125vw"
|
|
viewBox="0 0 924 924"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
cx="462"
|
|
cy="462"
|
|
r="461"
|
|
stroke="#878787"
|
|
stroke-width="2"
|
|
stroke-dasharray="8 8"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
class="big absolute"
|
|
width="75.365vw"
|
|
height="75.365vw"
|
|
viewBox="0 0 1447 1447"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle
|
|
cx="723.5"
|
|
cy="723.5"
|
|
r="722.5"
|
|
stroke="#878787"
|
|
stroke-width="2"
|
|
stroke-dasharray="8 8"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
// test
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import { Flip } from "gsap/Flip";
|
|
gsap.registerPlugin(ScrollTrigger, Flip);
|
|
import gsap from "gsap";
|
|
const main = ref();
|
|
const start = ref();
|
|
const end = ref();
|
|
let ctx;
|
|
onMounted(() => {
|
|
const anim = gsap.fromTo(
|
|
".ax",
|
|
{ autoAlpha: 0, y: 50 },
|
|
{ duration: 1, autoAlpha: 1, y: 0 }
|
|
);
|
|
ScrollTrigger.create({
|
|
trigger: ".ax",
|
|
animation: anim,
|
|
repeat: -1,
|
|
scrub: true,
|
|
toggleActions: "play none none none",
|
|
}),
|
|
gsap
|
|
.timeline({
|
|
scrollTrigger: {
|
|
trigger: "#flipSection",
|
|
scrub: true,
|
|
pin: true,
|
|
start: "center center",
|
|
end: "+=800vw",
|
|
},
|
|
})
|
|
.from(".start", {
|
|
scale: 0.1,
|
|
}),
|
|
gsap.to(".small", {
|
|
scrollTrigger: {
|
|
trigger: "#flipSection",
|
|
scrub: 1,
|
|
start: "center center",
|
|
end: "+=800",
|
|
},
|
|
rotation: 500,
|
|
duration: 3,
|
|
ease: "none",
|
|
});
|
|
gsap.to(".big", {
|
|
scrollTrigger: {
|
|
trigger: "#flipSection",
|
|
scrub: 1,
|
|
start: "center center",
|
|
end: "+=800",
|
|
},
|
|
rotation: -500,
|
|
duration: 3,
|
|
ease: "none",
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.start.active {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.start {
|
|
visibility: visible;
|
|
}
|
|
.start.flipping {
|
|
visibility: visible;
|
|
}
|
|
.end {
|
|
display: none;
|
|
}
|
|
|
|
.end.active {
|
|
display: flex !important;
|
|
}
|
|
.start,
|
|
.start.flipping {
|
|
visibility: visible;
|
|
}
|
|
</style> |