HAM!DREZA
120 lines
3.6 KiB
Vue
120 lines
3.6 KiB
Vue
|
||
<template>
|
||
<div
|
||
class="!max-w-[100vw] transform-bubbles header h-[76.923vw] lg:h-[48.802vw] text-white flex flex-col items-center"
|
||
>
|
||
<svg
|
||
class="hidden lg:flex rotating-bubbles animate absolute rotating -top-[59.231vw] lg:!-top-[8.8vw] h-[120.513vw] lg:h-[44.688vw] w-[95%] !overflow-x-hidden lg:w-[44.688vw]"
|
||
viewBox="0 0 858 858"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<circle
|
||
id="motion"
|
||
cx="429"
|
||
cy="429"
|
||
r="427.5"
|
||
stroke="url(#paint0_linear_836_14845)"
|
||
stroke-width="3"
|
||
stroke-dasharray="15 15"
|
||
/>
|
||
<defs>
|
||
<linearGradient
|
||
id="paint0_linear_836_14845"
|
||
x1="429"
|
||
y1="0"
|
||
x2="429"
|
||
y2="858"
|
||
gradientUnits="userSpaceOnUse"
|
||
>
|
||
<stop offset="0.499986" stop-color="white" stop-opacity="0" />
|
||
<stop offset="1" stop-color="white" />
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>
|
||
|
||
<svg
|
||
class="arrow absolute h-[4.167vw] w-[4.167vw] lg:!top-[33.75vw]"
|
||
viewBox="0 0 80 80"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<circle cx="40" cy="40" r="40" fill="white" />
|
||
<path
|
||
d="M27.5 34.4375V45.5625C27.5 52.4792 32.3958 55.2917 38.375 51.8542L41.0417 50.3125C41.6875 49.9375 42.0833 49.25 42.0833 48.5V31.5C42.0833 30.75 41.6875 30.0625 41.0417 29.6875L38.375 28.1458C32.3958 24.7083 27.5 27.5208 27.5 34.4375Z"
|
||
fill="#383E43"
|
||
/>
|
||
<path
|
||
d="M44.167 33.3125V46.7083C44.167 47.5208 45.042 48.0208 45.7295 47.6042L48.0212 46.2708C54.0003 42.8333 54.0003 37.1667 48.0212 33.7292L45.7295 32.3958C45.042 32 44.167 32.5 44.167 33.3125Z"
|
||
fill="#383E43"
|
||
/>
|
||
</svg>
|
||
|
||
<h1
|
||
class="text-[7.277vw] lg:text-[3.718vw] font-[700] mt-[100px] lg:mt-[120px] lg:mt-[9.115vw]"
|
||
>
|
||
JAVANEH
|
||
</h1>
|
||
<h1 class="text-[4.544vw] lg:text-[1.927vw] font-[500]">
|
||
فروشگاه محصولات ارگانیک
|
||
</h1>
|
||
<p class="hidden lg:block text-[0.938vw] w-[40vw] text-center mt-[0.3vw]">
|
||
وب سایت جوانه شرکتی در حوزه تامین و توزیع محصولات طبیعی، ارگانیک و سالم
|
||
میباشد که این امکان را به مصرف کننده میدهد تا بتواند انواع محصولات تازه را
|
||
با حق انتخاب و تنوع بسیار بالا و با مناسبترین قیمت داشته باشد.
|
||
</p>
|
||
</div>
|
||
<div class="test"></div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, onUnmounted, ref } from "vue";
|
||
import gsap from "gsap";
|
||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||
|
||
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
|
||
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
|
||
|
||
const main = ref();
|
||
let ctx;
|
||
|
||
onMounted(() => {
|
||
ctx = gsap.context((self) => {
|
||
gsap.to(".rotating-bubbles", {
|
||
scrollTrigger: {
|
||
trigger: ".transform-bubbles",
|
||
scrub: 1,
|
||
start: "center center",
|
||
end: "+=5000",
|
||
},
|
||
rotation: -800,
|
||
duration: 3,
|
||
ease: "none",
|
||
});
|
||
gsap.to(".animate #motion", {
|
||
strokeDashoffset: 300,
|
||
repeat: -1,
|
||
ease: "none",
|
||
duration: 5,
|
||
});
|
||
gsap.to(".arrow", {
|
||
strokeDashoffset: 300,
|
||
x: 700,
|
||
y: -130,
|
||
rotation: -90,
|
||
scrollTrigger: {
|
||
trigger: ".transform-bubbles",
|
||
scrub: 1,
|
||
start: "center center",
|
||
end: "+=5000",
|
||
},
|
||
// motionPath: {
|
||
// path: "#pathes",
|
||
// align: "#pathes",
|
||
// alignOrigin: [0.5, 0.5],
|
||
// autoRotate: 180,
|
||
// },
|
||
});
|
||
});
|
||
});
|
||
</script> |