fixed animation bugs
This commit is contained in:
HAM!DREZA
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section class="hidden md:block image-unmask">
|
||||
<section class="image-unmask h-[100vh]">
|
||||
<div
|
||||
class="autoHide absolute z-[100] left-[37.5vw] top-[20vw] text-[2.656vw] w-[25vw] text-center"
|
||||
class="text-black autoHide absolute z-[100] left-[9vw] md:left-[37.5vw] text-[7.277vw] md:text-[2.656vw] top-[44vh] md:top-[41vh] w-[80vw] md:w-[25vw] text-center"
|
||||
>
|
||||
We
|
||||
<span class="font-bold"> Believe </span>
|
||||
@@ -12,10 +12,10 @@
|
||||
<svg id="svg">
|
||||
<defs>
|
||||
<mask id="mask">
|
||||
<rect width="100vw" height="100vw" fill="white"></rect>
|
||||
<rect width="100vw" height="100vh" fill="white"></rect>
|
||||
|
||||
<rect
|
||||
class="border rounded-[10vw]"
|
||||
class="hidden md:block border rounded-[10vw]"
|
||||
id="circle1"
|
||||
x="-10%"
|
||||
y="14%"
|
||||
@@ -25,7 +25,7 @@
|
||||
/>
|
||||
|
||||
<rect
|
||||
class="border rounded-[10vw]"
|
||||
class="hidden md:block border rounded-[10vw]"
|
||||
id="circle2"
|
||||
x="15%"
|
||||
y="14%"
|
||||
@@ -34,7 +34,7 @@
|
||||
rx="10vw"
|
||||
/>
|
||||
<rect
|
||||
class="border rounded-[10vw]"
|
||||
class="hidden md:block border rounded-[10vw]"
|
||||
id="circle3"
|
||||
x="40%"
|
||||
y="14%"
|
||||
@@ -44,7 +44,7 @@
|
||||
/>
|
||||
|
||||
<rect
|
||||
class="border rounded-[10vw]"
|
||||
class="hidden md:block border rounded-[10vw]"
|
||||
id="circle4"
|
||||
x="65%"
|
||||
y="14%"
|
||||
@@ -54,7 +54,7 @@
|
||||
/>
|
||||
|
||||
<rect
|
||||
class="border rounded-[10vw]"
|
||||
class="hidden md:block border rounded-[10vw]"
|
||||
id="circle5"
|
||||
x="90%"
|
||||
y="14%"
|
||||
@@ -62,6 +62,34 @@
|
||||
height="34vw"
|
||||
rx="10vw"
|
||||
/>
|
||||
|
||||
<rect
|
||||
class="block md:hidden thickborder rounded-[20vw]"
|
||||
id="circleRes1"
|
||||
x="87%"
|
||||
y="25%"
|
||||
width="50vw"
|
||||
height="50vh"
|
||||
rx="25vw"
|
||||
/>
|
||||
<rect
|
||||
class="block md:hidden thickborder rounded-[20vw]"
|
||||
id="circleRes2"
|
||||
x="24%"
|
||||
y="25%"
|
||||
width="50vw"
|
||||
height="50vh"
|
||||
rx="25vw"
|
||||
/>
|
||||
<rect
|
||||
class="block md:hidden thickborder rounded-[20vw]"
|
||||
id="circleRes3"
|
||||
x="-39%"
|
||||
y="25%"
|
||||
width="50vw"
|
||||
height="50vh"
|
||||
rx="25vw"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
<rect
|
||||
@@ -75,15 +103,13 @@
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div class="h-[94.615vw] lg:h-[42.938vw] flex items-center text-[#383E43]">
|
||||
<div class="h-[40vw] md:h-[35vw] flex text-[#383E43]">
|
||||
<div class="text w-[60%] md:w-[37%] ms-[4vw] md:ms-[23.594vw]">
|
||||
<h2
|
||||
class="-mt-[2vw] md:mt-[10vw] lg:mt-0 text-[4.544vw] lg:text-[1.481vw] font-bold"
|
||||
>
|
||||
<h2 class="-mt-[2vw] text-[4.544vw] md:text-[1.481vw] font-bold">
|
||||
داستان ما
|
||||
</h2>
|
||||
<p
|
||||
class="text-[3.19vw] lg:text-[0.833vw] leading-[4.5vw] lg:leading-[1.563vw] mt-[2vw]"
|
||||
class="text-[3.19vw] md:text-[0.833vw] leading-[4.5vw] md:leading-[1.563vw] mt-[2vw]"
|
||||
>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
@@ -95,39 +121,41 @@
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
class="hidden lg:block text-[3.19vw] lg:text-[0.833vw] leading-[1.563vw] mt-[2vw]"
|
||||
class="hidden md:block text-[3.19vw] md:text-[0.833vw] leading-[1.563vw] mt-[2vw]"
|
||||
>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهو لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرهام از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهو لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرهام از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهو لورم ایپسوم متن ساختگی
|
||||
با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک
|
||||
است، چاپگرهام از صنعت چاپ، و با استفاده از طراحان گرافیک است،
|
||||
چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهو لورم ایپسوم متن ساختگی
|
||||
با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک
|
||||
است، چاپگرهام از صنعت چاپ، و با استفاده از طراحان گرافیک است،
|
||||
چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی
|
||||
با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک
|
||||
است، چاپگرها از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را
|
||||
می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
|
||||
@@ -136,11 +164,10 @@
|
||||
الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
|
||||
صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
|
||||
</span>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fade"></div>
|
||||
<div class="fade !mt-[10vw]"></div>
|
||||
</section>
|
||||
<img id="img-fixed" src="/public/images/aboutBg.jpg" />
|
||||
</template>
|
||||
@@ -218,6 +245,42 @@ onMounted(() => {
|
||||
let spaceIntX5 = parseInt(spaceX5);
|
||||
let spaceIntY5 = parseInt(spaceY5);
|
||||
|
||||
const circleRes1 = document.querySelector("#circleRes1");
|
||||
let heightRes1 = circleRes1.getAttribute("height");
|
||||
let widthRes1 = circleRes1.getAttribute("width");
|
||||
let spaceResX1 = circleRes1.getAttribute("x");
|
||||
let spaceResY1 = circleRes1.getAttribute("y");
|
||||
let rxRes1 = circleRes1.getAttribute("rx");
|
||||
let rxIntRes1 = parseInt(rxRes1);
|
||||
let heightIntRes1 = parseInt(heightRes1);
|
||||
let widthIntRes1 = parseInt(widthRes1);
|
||||
let spaceIntResX1 = parseInt(spaceResX1);
|
||||
let spaceIntResY1 = parseInt(spaceResY1);
|
||||
|
||||
const circleRes2 = document.querySelector("#circleRes2");
|
||||
let heightRes2 = circleRes2.getAttribute("height");
|
||||
let widthRes2 = circleRes2.getAttribute("width");
|
||||
let spaceResX2 = circleRes2.getAttribute("x");
|
||||
let spaceResY2 = circleRes2.getAttribute("y");
|
||||
let rxRes2 = circleRes2.getAttribute("rx");
|
||||
let rxIntRes2 = parseInt(rxRes2);
|
||||
let heightIntRes2 = parseInt(heightRes2);
|
||||
let widthIntRes2 = parseInt(widthRes2);
|
||||
let spaceIntResX2 = parseInt(spaceResX2);
|
||||
let spaceIntResY2 = parseInt(spaceResY2);
|
||||
|
||||
const circleRes3 = document.querySelector("#circleRes3");
|
||||
let heightRes3 = circleRes3.getAttribute("height");
|
||||
let widthRes3 = circleRes3.getAttribute("width");
|
||||
let spaceResX3 = circleRes3.getAttribute("x");
|
||||
let spaceResY3 = circleRes3.getAttribute("y");
|
||||
let rxRes3 = circleRes3.getAttribute("rx");
|
||||
let rxIntRes3 = parseInt(rxRes3);
|
||||
let heightIntRes3 = parseInt(heightRes3);
|
||||
let widthIntRes3 = parseInt(widthRes3);
|
||||
let spaceIntResX3 = parseInt(spaceResX3);
|
||||
let spaceIntResY3 = parseInt(spaceResY3);
|
||||
|
||||
const rect = document.querySelector("#rect");
|
||||
const pad = 4;
|
||||
|
||||
@@ -240,8 +303,9 @@ onMounted(() => {
|
||||
trigger: ".image-unmask",
|
||||
pin: true,
|
||||
start: "top top",
|
||||
end: "+=500",
|
||||
//end: "bottom bottom",
|
||||
//end: "+=100",
|
||||
end: "bottom 20%",
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
scrub: true,
|
||||
},
|
||||
defaults: {
|
||||
@@ -315,6 +379,46 @@ onMounted(() => {
|
||||
},
|
||||
0
|
||||
)
|
||||
.to(
|
||||
circleRes1,
|
||||
{
|
||||
attr: {
|
||||
height: () => heightIntRes1 * 10 + "vh",
|
||||
width: () => widthIntRes1 * 10 + "vw",
|
||||
x: () => spaceIntResX1 * 3.6 + "%",
|
||||
y: () => spaceIntResY1 - (heightIntRes1 * 10) / 3 + "%",
|
||||
rx: () => rxIntRes1 * 10 + "vw",
|
||||
},
|
||||
},
|
||||
0
|
||||
)
|
||||
.to(
|
||||
circleRes2,
|
||||
{
|
||||
attr: {
|
||||
height: () => heightIntRes2 * 10 + "vh",
|
||||
width: () => widthIntRes2 * 10 + "vw",
|
||||
x: () => spaceIntResX2 * -8 + "%",
|
||||
y: () => spaceIntResY2 - (heightIntRes2 * 10) / 3 + "%",
|
||||
rx: () => rxIntRes2 * 10 + "vw",
|
||||
},
|
||||
},
|
||||
0
|
||||
)
|
||||
|
||||
.to(
|
||||
circleRes3,
|
||||
{
|
||||
attr: {
|
||||
height: () => heightIntRes3 * 10 + "vh",
|
||||
width: () => widthIntRes3 * 10 + "vw",
|
||||
x: () => spaceIntResX3 * 18 + "%",
|
||||
y: () => spaceIntResY3 - (heightIntRes3 * 10) / 3 + "%",
|
||||
rx: () => rxIntRes3 * 10 + "vw",
|
||||
},
|
||||
},
|
||||
0
|
||||
)
|
||||
|
||||
.to(
|
||||
img,
|
||||
@@ -342,53 +446,53 @@ onMounted(() => {
|
||||
},
|
||||
});
|
||||
|
||||
window.addEventListener("load", init);
|
||||
window.addEventListener("resize", resize);
|
||||
// window.addEventListener("load", init);
|
||||
// window.addEventListener("resize", resize);
|
||||
|
||||
function init() {
|
||||
imgWidth = img.naturalWidth;
|
||||
imgHeight = img.naturalHeight;
|
||||
// function init() {
|
||||
// imgWidth = img.naturalWidth;
|
||||
// imgHeight = img.naturalHeight;
|
||||
|
||||
resize();
|
||||
}
|
||||
// resize();
|
||||
// }
|
||||
|
||||
function resize() {
|
||||
tl.progress(0);
|
||||
// function resize() {
|
||||
// tl.progress(0);
|
||||
|
||||
const r = svg.getBoundingClientRect();
|
||||
const rectWidth = r.width + pad;
|
||||
const rectHeight = r.height + pad;
|
||||
// const r = svg.getBoundingClientRect();
|
||||
// const rectWidth = r.width + pad;
|
||||
// const rectHeight = r.height + pad;
|
||||
|
||||
const rx = rectWidth / imgWidth;
|
||||
const ry = rectHeight / imgHeight;
|
||||
// const rx = rectWidth / imgWidth;
|
||||
// const ry = rectHeight / imgHeight;
|
||||
|
||||
const ratio = Math.max(rx, ry);
|
||||
// const ratio = Math.max(rx, ry);
|
||||
|
||||
const width = imgWidth * ratio;
|
||||
const height = imgHeight * ratio;
|
||||
// const width = imgWidth * ratio;
|
||||
// const height = imgHeight * ratio;
|
||||
|
||||
const dx = rectWidth / 2;
|
||||
const dy = rectHeight / 2;
|
||||
radius = Math.sqrt(dx * dx + dy * dy);
|
||||
// const dx = rectWidth / 2;
|
||||
// const dy = rectHeight / 2;
|
||||
// radius = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
gsap.set(img, { width, height });
|
||||
gsap.set(imgFixed, { width, height });
|
||||
// gsap.set(img, { width, height });
|
||||
// gsap.set(imgFixed, { width, height });
|
||||
|
||||
tl.invalidate();
|
||||
// tl.invalidate();
|
||||
|
||||
ScrollTrigger.refresh();
|
||||
}
|
||||
// ScrollTrigger.refresh();
|
||||
// }
|
||||
const timeline = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: ".autoHide", // What element triggers the scroll
|
||||
scrub: true, // Add a small delay of scrolling and animation. `true` is direct
|
||||
start: "center center", // Can be top, center, bottom
|
||||
end: "center", // Can be top, center, bottom
|
||||
end: "top", // Can be top, center, bottom
|
||||
pin: true,
|
||||
},
|
||||
});
|
||||
let stagger = 0.8;
|
||||
|
||||
|
||||
timeline
|
||||
.from(".autoHide", { autoAlpha: 1, display: "block", stagger: stagger })
|
||||
.to(
|
||||
@@ -397,7 +501,6 @@ onMounted(() => {
|
||||
stagger
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -414,8 +517,12 @@ body {
|
||||
padding: 0;
|
||||
}
|
||||
.border {
|
||||
outline: 0.3vw solid red;
|
||||
outline-offset: 0.8vw;
|
||||
outline: 0.3vw solid !important;
|
||||
outline-offset: 0.8vw !important;
|
||||
}
|
||||
.thickborder {
|
||||
outline: 1vw solid !important;
|
||||
outline-offset: 2vw !important;
|
||||
}
|
||||
section.spacer {
|
||||
height: 100vh;
|
||||
@@ -466,6 +573,24 @@ section.image-unmask {
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#img {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 100%;
|
||||
opacity: 0.8;
|
||||
z-index: -1;
|
||||
}
|
||||
#img-fixed {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.text span {
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
|
||||
@@ -44,8 +44,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-[35%] rounded-[1.302vw]">
|
||||
<LMap
|
||||
<div class="w-full md:w-[35%] rounded-[1.302vw] min-h-[50vh]">
|
||||
<LMap
|
||||
class="rounded-lg"
|
||||
ref="map"
|
||||
:zoom="zoom"
|
||||
@@ -57,8 +57,11 @@
|
||||
layer-type="base"
|
||||
name="OpenStreetMap"
|
||||
/>
|
||||
</LMap>
|
||||
</LMap>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<script setup>
|
||||
const zoom = ref(16)
|
||||
</script>
|
||||
@@ -234,10 +234,11 @@ onMounted(() => {
|
||||
scrollTrigger: {
|
||||
trigger: ".panel",
|
||||
start: "top center",
|
||||
end: "+=50"
|
||||
},
|
||||
strokeDashoffset: 300,
|
||||
repeat: 1,
|
||||
ease: "none",
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
duration: 5,
|
||||
});
|
||||
|
||||
@@ -273,7 +274,7 @@ onMounted(() => {
|
||||
const tl = gsap.timeline({
|
||||
defaults: {
|
||||
duration: 1,
|
||||
ease: "power1.inOut",
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
},
|
||||
scrollTrigger: {
|
||||
trigger: ".about",
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
class="!max-w-[100vw] transform-bubbles header h-[76.923vw] md:h-[48.802vw] text-white flex flex-col items-center"
|
||||
>
|
||||
<svg
|
||||
class="flex md:hidden absolute animate rotating-mobile rotating"
|
||||
class="flex md:hidden absolute animate rotateSvg"
|
||||
width="100vw"
|
||||
height="58vw"
|
||||
viewBox="0 0 390 239"
|
||||
@@ -34,6 +34,23 @@
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="mobileArrow block md:hidden h-[9.744vw] w-[9.744vw] absolute mt-[53vw]"
|
||||
viewBox="0 0 38 38"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="19" cy="19" r="19" fill="white" />
|
||||
<path
|
||||
d="M13.5 16.5526V21.4476C13.5 24.4909 15.6542 25.7284 18.285 24.2159L19.4583 23.5376C19.7425 23.3726 19.9167 23.0701 19.9167 22.7401V15.2601C19.9167 14.9301 19.7425 14.6276 19.4583 14.4626L18.285 13.7842C15.6542 12.2717 13.5 13.5092 13.5 16.5526Z"
|
||||
fill="#383E43"
|
||||
/>
|
||||
<path
|
||||
d="M20.833 16.0574V21.9516C20.833 22.3091 21.218 22.5291 21.5205 22.3458L22.5288 21.7591C25.1597 20.2466 25.1597 17.7533 22.5288 16.2408L21.5205 15.6541C21.218 15.4799 20.833 15.6999 20.833 16.0574Z"
|
||||
fill="#383E43"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.231vw] md:!-top-[8.8vw] h-[120.513vw] md:h-[44.688vw] w-[95%] !overflow-x-hidden md:w-[44.688vw]"
|
||||
viewBox="0 0 858 858"
|
||||
@@ -63,19 +80,7 @@
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute mt-[53vw]" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="19" cy="19" r="19" fill="white"/>
|
||||
<path d="M13.5 16.5526V21.4476C13.5 24.4909 15.6542 25.7284 18.285 24.2159L19.4583 23.5376C19.7425 23.3726 19.9167 23.0701 19.9167 22.7401V15.2601C19.9167 14.9301 19.7425 14.6276 19.4583 14.4626L18.285 13.7842C15.6542 12.2717 13.5 13.5092 13.5 16.5526Z" fill="#383E43"/>
|
||||
<path d="M20.833 16.0574V21.9516C20.833 22.3091 21.218 22.5291 21.5205 22.3458L22.5288 21.7591C25.1597 20.2466 25.1597 17.7533 22.5288 16.2408L21.5205 15.6541C21.218 15.4799 20.833 15.6999 20.833 16.0574Z" fill="#383E43"/>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<svg
|
||||
class="hidden md:block arrow absolute h-[4.167vw] w-[4.167vw] md:!top-[33.75vw]"
|
||||
viewBox="0 0 80 80"
|
||||
@@ -123,7 +128,6 @@ let ctx;
|
||||
|
||||
onMounted(() => {
|
||||
ctx = gsap.context((self) => {
|
||||
|
||||
gsap.to(".rotating-bubbles", {
|
||||
scrollTrigger: {
|
||||
trigger: ".transform-bubbles",
|
||||
@@ -131,20 +135,9 @@ onMounted(() => {
|
||||
start: "center center",
|
||||
end: "+=5000",
|
||||
},
|
||||
rotation: -800,
|
||||
rotation: -600,
|
||||
duration: 3,
|
||||
ease: "none",
|
||||
});
|
||||
gsap.to(".rotating-mobile", {
|
||||
scrollTrigger: {
|
||||
trigger: ".transform-bubbles",
|
||||
scrub: 1,
|
||||
start: "center center",
|
||||
end: "+=200",
|
||||
},
|
||||
rotation: 0,
|
||||
duration: 3,
|
||||
ease: "none",
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
});
|
||||
|
||||
gsap.to(".animate #motion", {
|
||||
@@ -164,13 +157,20 @@ onMounted(() => {
|
||||
start: "center center",
|
||||
end: "+=5000",
|
||||
},
|
||||
// motionPath: {
|
||||
// path: "#pathes",
|
||||
// align: "#pathes",
|
||||
// alignOrigin: [0.5, 0.5],
|
||||
// autoRotate: 180,
|
||||
// },
|
||||
});
|
||||
});
|
||||
gsap.to(".mobileArrow", {
|
||||
strokeDashoffset: 300,
|
||||
x: 700,
|
||||
y: -100,
|
||||
rotation: -90,
|
||||
scrollTrigger: {
|
||||
trigger: ".transform-bubbles",
|
||||
scrub: 1,
|
||||
start: "center 20%",
|
||||
end: "+=5000",
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@@ -13,16 +13,16 @@
|
||||
</p>
|
||||
<div class="hidden md:flex h-[50px] me-[0.5vw]">
|
||||
<svg
|
||||
class="cursor-pointer "
|
||||
class="cursor-pointer h-[2.604vw] w-[2.604vw]"
|
||||
@click="this.$refs.carousel.next()"
|
||||
width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="25" cy="25" r="24.5" transform="rotate(-180 25 25)" stroke="#878787"/>
|
||||
<path d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199" stroke="#878787" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<svg
|
||||
class="cursor-pointer ms-[0.5vw]"
|
||||
class="cursor-pointer ms-[0.5vw] h-[2.604vw] h-[2.604vw]"
|
||||
@click="this.$refs.carousel.prev()"
|
||||
width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="25" cy="25" r="24.5" stroke="#383E43"/>
|
||||
<g clip-path="url(#clip0_836_14507)">
|
||||
<path d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801" stroke="#383E43" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
@@ -122,9 +122,7 @@
|
||||
>
|
||||
ادامه مطلب
|
||||
<svg
|
||||
class="ms-3"
|
||||
width="24"
|
||||
height="24"
|
||||
class="ms-3 h-[1.25vw] w-[1.25vw]"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -50,13 +50,13 @@
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="motionPath block absolute md:hidden mt-[20vw] w-[98vw] h-[359.487vw]"
|
||||
class="mobileMotionPath block absolute md:hidden mt-[20vw] w-[98vw] h-[359.487vw]"
|
||||
viewBox="0 0 390 1402"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
id="motionPath"
|
||||
id="mobileMotionPath"
|
||||
d="M195.25 -8.51273e-06L195.211 9.21222C195.094 36.7434 172.743 59 145.212 59L50 59C22.3858 59 5.86356e-05 81.3858 5.88568e-05 109L6.27834e-05 599C6.30047e-05 626.614 22.3858 649 50.0001 649L339.999 649C367.613 649 389.999 671.386 389.999 699L389.999 1238C389.999 1265.61 367.613 1288 339.999 1288L245 1288C217.386 1288 195 1310.39 195 1338L195 1402"
|
||||
stroke="#383E43"
|
||||
stroke-dasharray="5 5"
|
||||
@@ -64,8 +64,8 @@
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="block md:hidden box z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
|
||||
id="motionSVG"
|
||||
class="block md:hidden mobilBox z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
|
||||
id="mobileMotionSVG"
|
||||
width="60"
|
||||
height="60"
|
||||
viewBox="0 0 60 60"
|
||||
@@ -120,16 +120,14 @@ onMounted(() => {
|
||||
gsap.to("#motionSVG", {
|
||||
scrollTrigger: {
|
||||
trigger: "#motionSVG",
|
||||
start: "top 30%",
|
||||
start: "top 10%",
|
||||
end: () =>
|
||||
"+=" +
|
||||
document.querySelector("#motionPath").getBoundingClientRect().height,
|
||||
scrub: 1,
|
||||
},
|
||||
ease: pathEase("#motionPath"), // the ease of the snap animation ("power3" by default)
|
||||
// y: 700,
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
y: document.querySelector("#motionPath").getBoundingClientRect().height,
|
||||
// immediateRender: true,
|
||||
motionPath: {
|
||||
path: "#motionPath",
|
||||
align: "#motionPath",
|
||||
@@ -137,6 +135,32 @@ onMounted(() => {
|
||||
autoRotate: -90,
|
||||
},
|
||||
});
|
||||
gsap.to(".mobileMotionPath #mobileMotionPath", {
|
||||
strokeDashoffset: -300,
|
||||
repeat: -1,
|
||||
ease: "none",
|
||||
duration: 5,
|
||||
});
|
||||
gsap.to("#mobileMotionSVG", {
|
||||
scrollTrigger: {
|
||||
trigger: "#mobileMotionSVG",
|
||||
start: "top 20%",
|
||||
end: () =>
|
||||
"+=" +
|
||||
document.querySelector("#mobileMotionPath").getBoundingClientRect().height,
|
||||
scrub: 1,
|
||||
},
|
||||
ease: "slow(0.7,0.7,false)", // the ease of the snap animation ("power3" by default)
|
||||
// y: 700,
|
||||
y: document.querySelector("#mobileMotionPath").getBoundingClientRect().height,
|
||||
// immediateRender: true,
|
||||
motionPath: {
|
||||
path: "#mobileMotionPath",
|
||||
align: "#mobileMotionPath",
|
||||
alignOrigin: [0.5, 0.5],
|
||||
autoRotate: -90,
|
||||
},
|
||||
});
|
||||
function pathEase(path, config = {}) {
|
||||
let axis = config.axis || "y",
|
||||
precision = config.precision || 1,
|
||||
|
||||
@@ -83,12 +83,6 @@
|
||||
stroke-width="2"
|
||||
stroke-dasharray="8 8"
|
||||
/>
|
||||
<!-- <svg
|
||||
class=" !absolute !mt-[74.5vw] !me-[10vw] rotate-[-12deg]"
|
||||
width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M45.9902 36.675L45.9902 23.325C45.9902 15.025 40.1115 11.65 32.9319 15.775L29.7298 17.625C28.9543 18.075 28.479 18.9 28.479 19.8L28.479 40.2C28.479 41.1 28.9543 41.925 29.7298 42.375L32.9319 44.225C40.1115 48.35 45.9902 44.975 45.9902 36.675Z" fill="#383E43"/>
|
||||
<path d="M25.9775 38.025L25.9775 21.95C25.9775 20.975 24.9269 20.375 24.1013 20.875L21.3496 22.475C14.17 26.6 14.17 33.4 21.3496 37.525L24.1013 39.125C24.9269 39.6 25.9775 39 25.9775 38.025Z" fill="#383E43"/>
|
||||
</svg> -->
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
@@ -144,7 +138,7 @@ onMounted(() => {
|
||||
},
|
||||
rotation: 500,
|
||||
duration: 3,
|
||||
ease: "none",
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
});
|
||||
gsap.to(".big", {
|
||||
scrollTrigger: {
|
||||
|
||||
+22
-6
@@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<!-- desktop navMenu -->
|
||||
<svg
|
||||
@click="[openMenu(), (menuStatus = !menuStatus)]"
|
||||
class="cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 mt-[6.154vw] md:mt-[1.51vw] me-[6.154vw] md:me-[1.25vw]"
|
||||
@@ -34,6 +33,12 @@
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- desktop navMenu -->
|
||||
<div class="hidden md:block" v-show="menuStatus">
|
||||
<svg
|
||||
class="svg cursor-pointer z-[1000] h-[8.718vw] md:h-[3.125vw] w-[8.718vw] md:w-[3.125vw] fixed bg-white p-[10px] rounded-full shadow-md left-0 md:mt-[5.885vw] me-[6.154vw] md:me-[1.25vw]"
|
||||
@@ -247,7 +252,7 @@
|
||||
<!-- mobile navMenu -->
|
||||
<div
|
||||
v-show="menuStatus"
|
||||
class="fixed z-[1000] !bottom-[0px] flex h-[100vh] w-full items-center justify-center md:hidden"
|
||||
class="flex md:hidden absolute bg-white !bottom-[0px] h-[100vh] w-full items-center justify-center "
|
||||
>
|
||||
<div
|
||||
class="fixed bottom-[5vw] space-y-[6vw] text-[4.038vw] flex flex-col items-center justify-center h-[110.769vw] w-[90%] bg-white z-[10] rounded-[6.41vw]"
|
||||
@@ -358,20 +363,31 @@
|
||||
const menuStatus = ref(false);
|
||||
|
||||
const openMenu = () => {
|
||||
|
||||
if (menuStatus.value === true) {
|
||||
document.getElementById("openMenuFilter").style.filter = "none";
|
||||
document.getElementById("openMenuFilter").style.backdropFilter = "none";
|
||||
document
|
||||
.getElementsByTagName("html")[0]
|
||||
.classList.remove("overflow-hidden");
|
||||
console.log("nist");
|
||||
|
||||
} else {
|
||||
document.getElementById("openMenuFilter").style.filter = "brightness(50%)";
|
||||
document.getElementById("openMenuFilter").style.backdropFilter = "brightness(90%)";
|
||||
|
||||
|
||||
document.getElementsByTagName("html")[0].classList.add("overflow-hidden");
|
||||
console.log("hast");
|
||||
document.getElementById("openMenuFilter").onclick = outOfButton;
|
||||
console.log('baaz');
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
function outOfButton(){
|
||||
if (menuStatus.value === true) {
|
||||
openMenu()
|
||||
menuStatus.value = false
|
||||
console.log('clsd');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user