HAM!DREZA
148 lines
4.3 KiB
Vue
148 lines
4.3 KiB
Vue
<template>
|
|
<div class="wrapper flex justify-center py-[20vw] md:py-[10vw]">
|
|
<div
|
|
class=" md:w-[81.04%] flex flex-col md:flex-row justify-between"
|
|
>
|
|
<div class="text-[#383E43] w-full md:w-[58.35%]">
|
|
<h1 class="text-[#A62186] text-[7.277vw] md:text-[2.604vw] font-bold">
|
|
Honors
|
|
</h1>
|
|
<h2 class="text-[5.751vw] md:text-[2.188vw] mt-[5vw] md:mt-[1.5vw]">
|
|
افتخارات شینان
|
|
</h2>
|
|
<p
|
|
class="text-[3.59vw] md:text-[1.186vw] mt-[5vw] md:mt-[0.8vw] w-full md:w-[75%]"
|
|
>
|
|
ما در فروشگاه جوانه سعی بر آن داریم تا سبدی از بهترین محصولات سالم و
|
|
طبیعی و ارگانیک ، رژیمی و بدون گلوتن را فراهم آوریم تا بتوانیم تجربه
|
|
خریدی سالم و اطمینان بخشی را برای شما محیا کنیم.
|
|
</p>
|
|
|
|
<div
|
|
class="text-card flex flex-col flex-col-reverse md:flex-row mt-[2.8vw] w-full md:w-[27.396vw]"
|
|
>
|
|
<svg
|
|
class="rotate-90 md:rotate-0 w-[8vw] h-[8vw] md:w-[1.2vw] md:h-[3.188vw] mt-[0.7vw]"
|
|
viewBox="0 0 10 42"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="5" cy="5" r="4.5" fill="#383E43" stroke="#383E43" />
|
|
<circle cx="5" cy="21" r="4.5" stroke="#383E43" />
|
|
<circle cx="5" cy="37" r="4.5" stroke="#383E43" />
|
|
</svg>
|
|
|
|
<div>
|
|
<div
|
|
class="bg-red-200 p-[8vw] md:p-[1.5vw] ms-[1vw] rounded-[1.302vw]"
|
|
>
|
|
<p class="text-[4.544vw] md:text-[1.335vw]">آدرس</p>
|
|
<p
|
|
class="text-[3.19vw] md:text-[0.833vw] mt-[5vw] leading-[5vw] md:leading-[1.563vw]"
|
|
>
|
|
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
|
|
استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله
|
|
در ستون و سطرآنچنان که لازم است
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card h-[97.949vw] md:!h-[35.417vw] w-full md:w-[35.417vw]">
|
|
<img
|
|
class="h-full w-full object-cover rounded-[1.302vw]"
|
|
src="/public/images/honor.jpg"
|
|
alt=""
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
import { onMounted, onUnmounted, ref } from "vue";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import Scrollbar from "smooth-scrollbar";
|
|
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
|
|
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
|
|
|
|
const main = ref();
|
|
let ctx;
|
|
const pnl = ref();
|
|
onMounted(() => {
|
|
ctx = gsap.context((self) => {
|
|
const cards = gsap.utils.toArray(".card");
|
|
const texts = gsap.utils.toArray(".text-card");
|
|
gsap.set(cards, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
|
|
gsap.set(texts, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
|
|
// gsap.set(cards, { zIndex: (i, target, targets) => targets.length - i });
|
|
|
|
const tl = gsap.timeline({
|
|
defaults: {
|
|
duration: 1,
|
|
ease: "power1.inOut",
|
|
},
|
|
scrollTrigger: {
|
|
trigger: ".wrapper",
|
|
start: "top top",
|
|
end: "+=150%",
|
|
pin: ".wrapper",
|
|
scrub: true,
|
|
markers: true,
|
|
},
|
|
});
|
|
texts.forEach((text, i) => {
|
|
console.log('text', text);
|
|
tl.to(
|
|
text,
|
|
{
|
|
y: -window.innerHeight * 0.001,
|
|
yPercent: 0,
|
|
},
|
|
"<"
|
|
).to(text, {
|
|
autoAlpha: 0,
|
|
duration: 5,
|
|
});
|
|
});
|
|
|
|
|
|
const tl2 = gsap.timeline({
|
|
defaults: {
|
|
duration: 1,
|
|
ease: "power1.inOut",
|
|
},
|
|
scrollTrigger: {
|
|
trigger: ".wrapper",
|
|
start: "top top",
|
|
end: "+=150%",
|
|
scrub: true,
|
|
},
|
|
});
|
|
|
|
cards.forEach((card, i) => {
|
|
tl2.to(
|
|
card,
|
|
{
|
|
y: -window.innerHeight * 0.001,
|
|
yPercent: 0,
|
|
},
|
|
"<"
|
|
).to(card, {
|
|
autoAlpha: 0,
|
|
duration: 5,
|
|
});
|
|
});
|
|
|
|
});
|
|
});
|
|
</script>
|
|
|