completed animations on desktop size
This commit is contained in:
HAM!DREZA
+267
-165
@@ -1,95 +1,148 @@
|
||||
<template>
|
||||
|
||||
<section class="image-unmask">
|
||||
<img
|
||||
id="img"
|
||||
src="/public/images/aboutBg.jpg"
|
||||
/>
|
||||
<section class="hidden md:block image-unmask">
|
||||
<div
|
||||
class="autoHide absolute z-[100] left-[37.5vw] top-[20vw] text-[2.656vw] w-[25vw] text-center"
|
||||
>
|
||||
We
|
||||
<span class="font-bold"> Believe </span>
|
||||
in the
|
||||
<span class="font-bold"> Destination </span>
|
||||
</div>
|
||||
<img id="img" src="/public/images/aboutBg.jpg" />
|
||||
<svg id="svg">
|
||||
<defs>
|
||||
<mask id="mask">
|
||||
<rect width="100vw" height="100vw" fill="white"></rect>
|
||||
|
||||
<rect
|
||||
width="100%" height="100%" fill="white"></rect>
|
||||
<ellipse class="border rounded-[50%]" id="circle1" cx="-4%" cy="50%" rx="180" ry="270">
|
||||
|
||||
</ellipse>
|
||||
class="border rounded-[10vw]"
|
||||
id="circle1"
|
||||
x="-10%"
|
||||
y="14%"
|
||||
width="21vw"
|
||||
height="34vw"
|
||||
rx="10vw"
|
||||
/>
|
||||
|
||||
<ellipse class="border rounded-[50%]" id="circle2" cx="23%" cy="50%" rx="180" ry="270">
|
||||
|
||||
</ellipse>
|
||||
|
||||
<ellipse class="border rounded-[50%]" id="circle3" cx="50%" cy="50%" rx="180" ry="270">
|
||||
<rect
|
||||
class="border rounded-[10vw]"
|
||||
id="circle2"
|
||||
x="15%"
|
||||
y="14%"
|
||||
width="21vw"
|
||||
height="34vw"
|
||||
rx="10vw"
|
||||
/>
|
||||
<rect
|
||||
class="border rounded-[10vw]"
|
||||
id="circle3"
|
||||
x="40%"
|
||||
y="14%"
|
||||
width="21vw"
|
||||
height="34vw"
|
||||
rx="10vw"
|
||||
/>
|
||||
|
||||
</ellipse>
|
||||
<ellipse class="border rounded-[50%]" id="circle4" cx="77%" cy="50%" rx="180" ry="270">
|
||||
<rect
|
||||
class="border rounded-[10vw]"
|
||||
id="circle4"
|
||||
x="65%"
|
||||
y="14%"
|
||||
width="21vw"
|
||||
height="34vw"
|
||||
rx="10vw"
|
||||
/>
|
||||
|
||||
</ellipse>
|
||||
|
||||
<ellipse class="border rounded-[50%]" id="circle5" cx="104%" cy="50%" rx="180" ry="270">
|
||||
|
||||
</ellipse>
|
||||
|
||||
<rect
|
||||
class="border rounded-[10vw]"
|
||||
id="circle5"
|
||||
x="90%"
|
||||
y="14%"
|
||||
width="21vw"
|
||||
height="34vw"
|
||||
rx="10vw"
|
||||
/>
|
||||
</mask>
|
||||
|
||||
</defs>
|
||||
<!--<rect id="whiteLayer" width="100%" height="100%" fill="white"></rect>-->
|
||||
<rect id="rect" width="100vw" height="100%" fill="black" mask="url(#mask)"></rect>
|
||||
<rect
|
||||
id="rect"
|
||||
width="100vw"
|
||||
height="100%"
|
||||
fill="white"
|
||||
mask="url(#mask)"
|
||||
></rect>
|
||||
</svg>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="content">
|
||||
<div
|
||||
class=" h-[94.615vw] lg:h-[42.938vw] flex items-center text-[#383E43]"
|
||||
>
|
||||
<div class="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>
|
||||
<p
|
||||
class="text-[3.19vw] lg:text-[0.833vw] leading-[4.5vw] lg:leading-[1.563vw] mt-[2vw]"
|
||||
>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در
|
||||
ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز،
|
||||
و کاربردهای
|
||||
</p>
|
||||
<p
|
||||
class="hidden lg:block text-[3.19vw] lg:text-[0.833vw] leading-[1.563vw] mt-[2vw]"
|
||||
>
|
||||
رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات
|
||||
پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.لورم
|
||||
ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
|
||||
از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
|
||||
سطرآنچنان که لازم اس متنوع با هدف بهبود ابزارهای کاربردی می باشد،
|
||||
کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه
|
||||
و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان
|
||||
رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد
|
||||
کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
|
||||
راهکارها، و شرایط سخت تایپ به پایانت، و برای شرایط فعلی تکنولوژی
|
||||
مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد،
|
||||
کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه
|
||||
و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان
|
||||
رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد
|
||||
کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
|
||||
راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل
|
||||
حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود
|
||||
طراحی اساسا مورد استفاده قرار گیرد.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fade"></div>
|
||||
|
||||
</section>
|
||||
|
||||
<img
|
||||
id="img-fixed"
|
||||
src="/public/images/aboutBg.jpg"
|
||||
/>
|
||||
|
||||
<!-- <div id="content"></div> -->
|
||||
<section class="content">
|
||||
<div class="h-[94.615vw] lg:h-[42.938vw] flex items-center 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>
|
||||
<p
|
||||
class="text-[3.19vw] lg:text-[0.833vw] leading-[4.5vw] lg:leading-[1.563vw] mt-[2vw]"
|
||||
>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
<span>
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
class="hidden lg:block text-[3.19vw] lg: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>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fade"></div>
|
||||
</section>
|
||||
<img id="img-fixed" src="/public/images/aboutBg.jpg" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -106,42 +159,68 @@ onMounted(() => {
|
||||
const imgFixed = document.querySelector("#img-fixed");
|
||||
|
||||
const circle1 = document.querySelector("#circle1");
|
||||
let radiusX1 = +circle1.getAttribute("rx");
|
||||
let radiusY1 = +circle1.getAttribute("ry");
|
||||
let space1 = circle1.getAttribute("cx");
|
||||
let spaceToIng1 = parseInt(space1)
|
||||
|
||||
let height1 = circle1.getAttribute("height");
|
||||
let width1 = circle1.getAttribute("width");
|
||||
let spaceX1 = circle1.getAttribute("x");
|
||||
let spaceY1 = circle1.getAttribute("y");
|
||||
let rx1 = circle1.getAttribute("rx");
|
||||
let rx1Int = parseInt(rx1);
|
||||
let heightInt1 = parseInt(height1);
|
||||
let widthInt1 = parseInt(width1);
|
||||
let spaceIntX1 = parseInt(spaceX1);
|
||||
let spaceIntY1 = parseInt(spaceY1);
|
||||
|
||||
const circle2 = document.querySelector("#circle2");
|
||||
let radiusX2 = +circle2.getAttribute("rx");
|
||||
let radiusY2 = +circle2.getAttribute("ry");
|
||||
let space2 = circle2.getAttribute("cx");
|
||||
let spaceToIng2 = parseInt(space2)
|
||||
let height2 = circle2.getAttribute("height");
|
||||
let width2 = circle2.getAttribute("width");
|
||||
let spaceX2 = circle2.getAttribute("x");
|
||||
let spaceY2 = circle2.getAttribute("y");
|
||||
let rx2 = circle2.getAttribute("rx");
|
||||
let rx2Int = parseInt(rx2);
|
||||
let heightInt2 = parseInt(height2);
|
||||
let widthInt2 = parseInt(width2);
|
||||
let spaceIntX2 = parseInt(spaceX2);
|
||||
let spaceIntY2 = parseInt(spaceY2);
|
||||
|
||||
const circle3 = document.querySelector("#circle3");
|
||||
let radiusX3 = +circle3.getAttribute("rx");
|
||||
let radiusY3 = +circle3.getAttribute("ry");
|
||||
let height3 = circle3.getAttribute("height");
|
||||
let width3 = circle3.getAttribute("width");
|
||||
let spaceX3 = circle3.getAttribute("x");
|
||||
let spaceY3 = circle3.getAttribute("y");
|
||||
let rx3 = circle3.getAttribute("rx");
|
||||
let rx3Int = parseInt(rx3);
|
||||
let heightInt3 = parseInt(height3);
|
||||
let widthInt3 = parseInt(width3);
|
||||
let spaceIntX3 = parseInt(spaceX3);
|
||||
let spaceIntY3 = parseInt(spaceY3);
|
||||
|
||||
const circle4 = document.querySelector("#circle4");
|
||||
let radiusX4 = +circle4.getAttribute("rx");
|
||||
let radiusY4 = +circle4.getAttribute("ry");
|
||||
let space4 = circle4.getAttribute("cx");
|
||||
let spaceToIng4 = parseInt(space4)
|
||||
|
||||
let height4 = circle4.getAttribute("height");
|
||||
let width4 = circle4.getAttribute("width");
|
||||
let spaceX4 = circle4.getAttribute("x");
|
||||
let spaceY4 = circle4.getAttribute("y");
|
||||
let rx4 = circle4.getAttribute("rx");
|
||||
let rx4Int = parseInt(rx4);
|
||||
let heightInt4 = parseInt(height4);
|
||||
let widthInt4 = parseInt(width4);
|
||||
let spaceIntX4 = parseInt(spaceX4);
|
||||
let spaceIntY4 = parseInt(spaceY4);
|
||||
|
||||
const circle5 = document.querySelector("#circle5");
|
||||
let radiusX5 = +circle5.getAttribute("rx");
|
||||
let radiusY5 = +circle5.getAttribute("ry");
|
||||
let space5 = circle5.getAttribute("cx");
|
||||
let spaceToIng5 = parseInt(space5)
|
||||
|
||||
|
||||
|
||||
let height5 = circle5.getAttribute("height");
|
||||
let width5 = circle5.getAttribute("width");
|
||||
let spaceX5 = circle5.getAttribute("x");
|
||||
let spaceY5 = circle5.getAttribute("y");
|
||||
let rx5 = circle5.getAttribute("rx");
|
||||
let rx5Int = parseInt(rx5);
|
||||
let heightInt5 = parseInt(height5);
|
||||
let widthInt5 = parseInt(width5);
|
||||
let spaceIntX5 = parseInt(spaceX5);
|
||||
let spaceIntY5 = parseInt(spaceY5);
|
||||
|
||||
const rect = document.querySelector("#rect");
|
||||
const pad = 4;
|
||||
|
||||
|
||||
let imgWidth, imgHeight;
|
||||
|
||||
gsap.set(img, {
|
||||
@@ -166,85 +245,77 @@ onMounted(() => {
|
||||
scrub: true,
|
||||
},
|
||||
defaults: {
|
||||
duration: 3,
|
||||
duration: 5,
|
||||
},
|
||||
})
|
||||
|
||||
.to(
|
||||
circle1,
|
||||
circle1,
|
||||
{
|
||||
attr: {
|
||||
ry: () => radiusY1 * 10,
|
||||
rx: () => radiusX1 * 10,
|
||||
cx: () => spaceToIng1 * 120 + '%'
|
||||
height: () => heightInt1 * 10 + "vw",
|
||||
width: () => widthInt1 * 10 + "vw",
|
||||
x: () => spaceIntX1 * 55 + "%",
|
||||
y: () => spaceIntY1 - (heightInt1 * 10) / 1 + "%",
|
||||
rx: () => rx1Int * 7 + "vw",
|
||||
},
|
||||
},
|
||||
0
|
||||
)
|
||||
|
||||
.to(
|
||||
circle2,
|
||||
{
|
||||
attr: {
|
||||
height: () => heightInt2 * 10 + "vw",
|
||||
width: () => widthInt2 * 10 + "vw",
|
||||
x: () => spaceIntX2 * -20 + "%",
|
||||
y: () => spaceIntY2 - (heightInt2 * 10) / 1 + "%",
|
||||
rx: () => rx2Int * 7 + "vw",
|
||||
},
|
||||
},
|
||||
0
|
||||
)
|
||||
.to(
|
||||
circle2,
|
||||
circle3,
|
||||
{
|
||||
attr: {
|
||||
ry: () => radiusY2 * 10,
|
||||
rx: () => radiusX2 * 10,
|
||||
cx: () => spaceToIng2 * -9 + '%'
|
||||
height: () => heightInt3 * 10 + "vw",
|
||||
width: () => widthInt3 * 10 + "vw",
|
||||
x: () => spaceIntX3 - (widthInt3 * 10) / 2.17 + "%",
|
||||
y: () => spaceIntY3 - (heightInt3 * 10) / 1 + "%",
|
||||
rx: () => rx3Int * 7 + "vw",
|
||||
},
|
||||
},
|
||||
0
|
||||
)
|
||||
.to(
|
||||
circle3,
|
||||
circle4,
|
||||
{
|
||||
attr: {
|
||||
ry: () => radiusY3 * 10,
|
||||
rx: () => radiusX3 * 10,
|
||||
height: () => heightInt4 * 10 + "vw",
|
||||
width: () => widthInt4 * 10 + "vw",
|
||||
x: () => spaceIntX4 * 3 + "%",
|
||||
y: () => spaceIntY4 - (heightInt4 * 10) / 1 + "%",
|
||||
rx: () => rx4Int * 7 + "vw",
|
||||
},
|
||||
},
|
||||
0
|
||||
)
|
||||
.to(
|
||||
circle4,
|
||||
circle5,
|
||||
{
|
||||
attr: {
|
||||
ry: () => radiusY4 * 10,
|
||||
rx: () => radiusX4 * 10,
|
||||
cx: () => spaceToIng4 * 3.9 + '%'
|
||||
height: () => heightInt5 * 10 + "vw",
|
||||
width: () => widthInt5 * 10 + "vw",
|
||||
x: () => spaceIntX5 * 5 + "%",
|
||||
y: () => spaceIntY5 - (heightInt5 * 10) / 1 + "%",
|
||||
rx: () => rx5Int * 7 + "vw",
|
||||
},
|
||||
},
|
||||
0
|
||||
)
|
||||
.to(
|
||||
circle5,
|
||||
{
|
||||
attr: {
|
||||
ry: () => radiusY5 * 10,
|
||||
rx: () => radiusX5 * 10,
|
||||
cx: () => spaceToIng5 * 5.5 + '%'
|
||||
},
|
||||
},
|
||||
0
|
||||
)
|
||||
// .to(
|
||||
// circle2,
|
||||
// {
|
||||
// attr: {
|
||||
// ry: () => radiusy * 10,
|
||||
// rx: () => radiusx * 10,
|
||||
// cx: () => adad * 10 + '%'
|
||||
// }
|
||||
// },
|
||||
// 0
|
||||
// )
|
||||
// .to(
|
||||
// rect,
|
||||
// {
|
||||
// attr: {
|
||||
// // height: () => recth * 10,
|
||||
// width: () => rectW * 10,
|
||||
// // rx: () => radiusx * 10,
|
||||
// }
|
||||
// },
|
||||
// 0
|
||||
// )
|
||||
|
||||
.to(
|
||||
img,
|
||||
{
|
||||
@@ -259,15 +330,17 @@ onMounted(() => {
|
||||
.set(imgFixed, {
|
||||
opacity: 1,
|
||||
});
|
||||
//.to("#whiteLayer", {
|
||||
// alpha: 0,
|
||||
// ease: "power1.in",
|
||||
// duration: 1 - 0.25
|
||||
//}, 0.25)
|
||||
|
||||
|
||||
|
||||
|
||||
gsap.to(".text span", {
|
||||
backgroundPositionX: "0%",
|
||||
stagger: 20,
|
||||
scrollTrigger: {
|
||||
trigger: ".text",
|
||||
scrub: 1,
|
||||
start: "top center",
|
||||
end: "top center",
|
||||
},
|
||||
});
|
||||
|
||||
window.addEventListener("load", init);
|
||||
window.addEventListener("resize", resize);
|
||||
@@ -305,7 +378,26 @@ onMounted(() => {
|
||||
|
||||
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
|
||||
pin: true,
|
||||
},
|
||||
});
|
||||
let stagger = 0.8;
|
||||
|
||||
timeline
|
||||
.from(".autoHide", { autoAlpha: 1, display: "block", stagger: stagger })
|
||||
.to(
|
||||
".autoHide",
|
||||
{ autoAlpha: 0, display: "none", stagger: stagger },
|
||||
stagger
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -315,17 +407,15 @@ onMounted(() => {
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: "Signika Negative", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.border{
|
||||
outline: 5px solid red;
|
||||
outline-offset:10px;
|
||||
|
||||
.border {
|
||||
outline: 0.3vw solid red;
|
||||
outline-offset: 0.8vw;
|
||||
}
|
||||
section.spacer {
|
||||
height: 100vh;
|
||||
@@ -376,4 +466,16 @@ section.image-unmask {
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.text span {
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
rgb(135, 133, 133) 50%,
|
||||
rgb(37, 37, 37) 50%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
background-position-x: -100%;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
</style>
|
||||
@@ -32,7 +32,7 @@
|
||||
<circle cx="5" cy="21" r="4.5" stroke="#383E43" />
|
||||
<circle cx="5" cy="37" r="4.5" stroke="#383E43" />
|
||||
</svg>
|
||||
<div class="bg-white p-[8vw] md:p-[1.5vw] ms-[1vw] rounded-[1.302vw]">
|
||||
<div class="bg-[#FAF6F9] 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]"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="about flex justify-center pt-[6.3vw]">
|
||||
<div id="dynamic" class="about flex justify-center pt-[6.3vw]">
|
||||
<div class="relative w-[81.04%]">
|
||||
<div class="absolute -right-[0.8vw] -mt-[2.2vw]">
|
||||
<h1 class="text-[6.469vw] lg:text-[2.5vw] text-[#383E43] font-bold">
|
||||
@@ -94,7 +94,9 @@
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="panels relative">
|
||||
|
||||
|
||||
<div class="mt-[16vw] md:mt-0 panels relative">
|
||||
<div
|
||||
class="panel first leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
|
||||
>
|
||||
@@ -118,7 +120,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="panel leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:!top-[10]"
|
||||
class="hidden md:block panel leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:!top-[10]"
|
||||
>
|
||||
<h1
|
||||
class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
|
||||
@@ -139,7 +141,7 @@
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="panel pnl leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
|
||||
class="hidden md:block panel pnl leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
|
||||
>
|
||||
<h1
|
||||
class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
|
||||
@@ -160,9 +162,8 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
class="absolute mt-[95vw] right-0 block lg:hidden"
|
||||
class="absolute mt-[75vw] right-0 block lg:hidden"
|
||||
width="66"
|
||||
height="30"
|
||||
viewBox="0 0 66 30"
|
||||
@@ -221,13 +222,14 @@ const main = ref();
|
||||
let ctx;
|
||||
const pnl = ref()
|
||||
onMounted(() => {
|
||||
if (window.innerWidth < 768) {
|
||||
document.getElementById("dynamic").classList.remove("about")
|
||||
}
|
||||
const panels = gsap.utils.toArray(".panel");
|
||||
gsap.set(panels, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
|
||||
console.clear();
|
||||
gsap.set(panels, { xPercent: 0, yPercent: 100, autoAlpha: 2 });
|
||||
|
||||
|
||||
ctx = gsap.context((self) => {
|
||||
|
||||
|
||||
gsap.to("#crclrMotion", {
|
||||
scrollTrigger: {
|
||||
trigger: ".panel",
|
||||
@@ -247,11 +249,8 @@ onMounted(() => {
|
||||
start: "top 80%",
|
||||
end: () =>
|
||||
"+=3000",
|
||||
// "+=" + 150 * panels.length + "%",
|
||||
// "+=" + document.querySelector(".about").getBoundingClientRect().width,
|
||||
scrub: 1,
|
||||
},
|
||||
// ease: pathEase("#motionPath"), // the ease of the snap animation ("power3" by default)
|
||||
motionPath: {
|
||||
path: "#aboutPath",
|
||||
align: "#aboutPath",
|
||||
@@ -272,29 +271,34 @@ onMounted(() => {
|
||||
yPercent: (i) => (i ? 140 : 0),
|
||||
});
|
||||
const tl = gsap.timeline({
|
||||
defaults: {
|
||||
duration: 1,
|
||||
ease: "power1.inOut",
|
||||
},
|
||||
scrollTrigger: {
|
||||
trigger: ".about",
|
||||
start: "bottom center",
|
||||
end: () => "+=" + 40 * panels.length + "%",
|
||||
// y: 50000,
|
||||
pin: true,
|
||||
scrub: 1,
|
||||
|
||||
},
|
||||
y: 11000,
|
||||
|
||||
});
|
||||
panels.forEach((panel, index) => {
|
||||
if (index) {
|
||||
|
||||
tl.to(
|
||||
panel,
|
||||
{
|
||||
y: -window.innerHeight * 0.001,
|
||||
yPercent: 0,
|
||||
ease: "none",
|
||||
y:-window.innerHeight * 0.001,
|
||||
yPercent: 0,
|
||||
},
|
||||
"+=0.25"
|
||||
);
|
||||
}
|
||||
"<",
|
||||
).to(panel,{
|
||||
autoAlpha: 0,
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -4,7 +4,38 @@
|
||||
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]"
|
||||
class="flex md:hidden absolute animate rotating-mobile rotating"
|
||||
width="390"
|
||||
height="239"
|
||||
viewBox="0 0 390 239"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
id="motion"
|
||||
cx="195"
|
||||
cy="4"
|
||||
r="234.5"
|
||||
stroke="url(#paint0_linear_1248_31458)"
|
||||
stroke-dasharray="5 5"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1248_31458"
|
||||
x1="195"
|
||||
y1="-231"
|
||||
x2="195"
|
||||
y2="239"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop offset="0.499986" stop-color="white" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="white" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.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"
|
||||
@@ -32,9 +63,20 @@
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute top-[55vw]" 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="arrow absolute h-[4.167vw] w-[4.167vw] lg:!top-[33.75vw]"
|
||||
class="hidden md:block 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"
|
||||
@@ -80,6 +122,7 @@ let ctx;
|
||||
|
||||
onMounted(() => {
|
||||
ctx = gsap.context((self) => {
|
||||
|
||||
gsap.to(".rotating-bubbles", {
|
||||
scrollTrigger: {
|
||||
trigger: ".transform-bubbles",
|
||||
@@ -91,6 +134,18 @@ onMounted(() => {
|
||||
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",
|
||||
});
|
||||
|
||||
gsap.to(".animate #motion", {
|
||||
strokeDashoffset: 300,
|
||||
repeat: -1,
|
||||
@@ -99,9 +154,9 @@ onMounted(() => {
|
||||
});
|
||||
gsap.to(".arrow", {
|
||||
strokeDashoffset: 300,
|
||||
x: 700,
|
||||
y: -130,
|
||||
rotation: -90,
|
||||
x: 700,
|
||||
y: -130,
|
||||
rotation: -90,
|
||||
scrollTrigger: {
|
||||
trigger: ".transform-bubbles",
|
||||
scrub: 1,
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
نقشه راه از تولید به مصرف محصولات شینان
|
||||
</h2>
|
||||
<div ref="main" class="relative mt-[10vw] lg:mt-0 flex justify-center">
|
||||
|
||||
<svg
|
||||
id="motionSVG"
|
||||
class="hidden lg:block box z-[1] absolute mt-[8vw] lg:mt-[2.4vw] h-[15.385vw] w-[15.385vw] lg:h-[5.625vw] lg:w-[5.625vw]"
|
||||
@@ -33,6 +34,7 @@
|
||||
fill="#383E43"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
class="motionPath hidden lg:block absolute mt-[8vw] w-[81.146vw] h-[107.604vw]"
|
||||
viewBox="0 0 1558 2066"
|
||||
@@ -49,14 +51,9 @@
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<svg
|
||||
class="box hidden absolute"
|
||||
id="motionSVG"
|
||||
class="box2 block md:hidden !mt-[18vw] absolute"
|
||||
id="motionSVG2"
|
||||
width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="30" cy="30" r="29.5" stroke="#383E43" stroke-dasharray="5 5"/>
|
||||
<circle cx="30" cy="30" r="18" fill="white"/>
|
||||
@@ -64,8 +61,9 @@
|
||||
<path d="M33.2104 32L26.7804 32C26.3904 32 26.1504 32.42 26.3504 32.75L26.9904 33.85C28.6404 36.72 31.3604 36.72 33.0104 33.85L33.6504 32.75C33.8404 32.42 33.6004 32 33.2104 32Z" fill="#383E43"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<svg
|
||||
class="motionPath block absolute lg:hidden mt-[20vw]"
|
||||
class="motionPath2 block absolute md:hidden mt-[20vw]"
|
||||
width="98vw"
|
||||
height="359.487vw"
|
||||
viewBox="0 0 390 1402"
|
||||
@@ -73,7 +71,7 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
id="motionPath"
|
||||
id="motionPath2"
|
||||
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"
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<div
|
||||
ref="main"
|
||||
id="flipSection"
|
||||
class="-z-[1] relative mt-[100vw] lg:mt-[50vw] flex flex-col items-center justify-center"
|
||||
class="-z-[1] relative mt-[100vw] lg:mt-[25vw] 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]"
|
||||
class="z-[100] 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]"
|
||||
@@ -27,8 +27,17 @@
|
||||
ref="start"
|
||||
class="start relative w-[87.69%] lg:w-[91.82%] flex flex-col items-center justify-center"
|
||||
>
|
||||
|
||||
<div class="absolute small">
|
||||
<svg
|
||||
class="small absolute"
|
||||
class="absolute -left-[0vw] top-[27.25vw] h-[8.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
|
||||
viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M42.7144 57.3336L54.2759 50.6586C61.4639 46.5086 61.4473 39.73 54.2852 35.5748L51.082 33.7267C50.3046 33.2801 49.3524 33.281 48.573 33.731L30.9061 43.931C30.1267 44.381 29.6499 45.2051 29.6479 46.1017L29.6468 49.7998C29.6642 58.08 35.5264 61.4836 42.7144 57.3336Z" fill="#383E43"/>
|
||||
<path d="M31.5397 40.6771L45.461 32.6396C46.3054 32.1521 46.2997 30.9422 45.4539 30.4773L42.6924 28.8942C35.5302 24.739 29.6413 28.139 29.6587 36.4192L29.6489 39.6023C29.6503 40.5547 30.6953 41.1646 31.5397 40.6771Z" fill="#383E43"/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
|
||||
width="40.125vw"
|
||||
height="40.125vw"
|
||||
viewBox="0 0 924 924"
|
||||
@@ -44,32 +53,43 @@
|
||||
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
|
||||
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>
|
||||
<div class="absolute big">
|
||||
<svg
|
||||
class="absolute left-[38vw] -top-[2.3vw] md:-top-[1.8] h-[5.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
|
||||
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
|
||||
|
||||
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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,7 +127,7 @@ onMounted(() => {
|
||||
scrub: true,
|
||||
pin: true,
|
||||
start: "center center",
|
||||
end: "+=800vw",
|
||||
end: "+=500vw",
|
||||
},
|
||||
})
|
||||
.from(".start", {
|
||||
@@ -118,7 +138,7 @@ onMounted(() => {
|
||||
trigger: "#flipSection",
|
||||
scrub: 1,
|
||||
start: "center center",
|
||||
end: "+=800",
|
||||
end: "+=350",
|
||||
},
|
||||
rotation: 500,
|
||||
duration: 3,
|
||||
@@ -129,11 +149,11 @@ onMounted(() => {
|
||||
trigger: "#flipSection",
|
||||
scrub: 1,
|
||||
start: "center center",
|
||||
end: "+=800",
|
||||
end: "+=350vw",
|
||||
},
|
||||
rotation: -500,
|
||||
duration: 3,
|
||||
ease: "none",
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="wrapper flex justify-center py-[20vw] md:py-[10vw]">
|
||||
<div id="parent" class="px-5 md:px-0 wrapper flex justify-center py-[20vw] md:py-[10vw]">
|
||||
<div
|
||||
class=" md:w-[81.04%] flex flex-col md:flex-row justify-between"
|
||||
>
|
||||
@@ -18,7 +18,7 @@
|
||||
خریدی سالم و اطمینان بخشی را برای شما محیا کنیم.
|
||||
</p>
|
||||
|
||||
<div
|
||||
<div id="textCard"
|
||||
class="text-card flex flex-col flex-col-reverse md:flex-row mt-[2.8vw] w-full md:w-[27.396vw]"
|
||||
>
|
||||
<svg
|
||||
@@ -49,7 +49,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card h-[97.949vw] md:!h-[35.417vw] w-full md:w-[35.417vw]">
|
||||
<div id="cards" 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"
|
||||
@@ -77,10 +77,15 @@ const main = ref();
|
||||
let ctx;
|
||||
const pnl = ref();
|
||||
onMounted(() => {
|
||||
if (window.innerWidth < 768) {
|
||||
document.getElementById("parent").classList.remove("wrapper")
|
||||
document.getElementById("cards").classList.remove("card")
|
||||
document.getElementById("textCard").classList.remove("text-card")
|
||||
}
|
||||
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(cards, { height: 100});
|
||||
gsap.set(texts, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
|
||||
// gsap.set(cards, { zIndex: (i, target, targets) => targets.length - i });
|
||||
|
||||
@@ -95,11 +100,10 @@ onMounted(() => {
|
||||
end: "+=150%",
|
||||
pin: ".wrapper",
|
||||
scrub: true,
|
||||
markers: true,
|
||||
|
||||
},
|
||||
});
|
||||
texts.forEach((text, i) => {
|
||||
console.log('text', text);
|
||||
tl.to(
|
||||
text,
|
||||
{
|
||||
@@ -128,14 +132,8 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
cards.forEach((card, i) => {
|
||||
tl2.to(
|
||||
card,
|
||||
{
|
||||
y: -window.innerHeight * 0.001,
|
||||
yPercent: 0,
|
||||
},
|
||||
"<"
|
||||
).to(card, {
|
||||
tl2.to(card, {
|
||||
height: 0,
|
||||
autoAlpha: 0,
|
||||
duration: 5,
|
||||
});
|
||||
|
||||
+9
-11
@@ -1,6 +1,6 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
|
||||
|
||||
devtools: { enabled: true },
|
||||
modules: [
|
||||
'@nuxtjs/tailwindcss',
|
||||
@@ -8,23 +8,21 @@ export default defineNuxtConfig({
|
||||
'nuxt3-leaflet',
|
||||
'nuxt-swiper',
|
||||
"vue3-carousel-nuxt",
|
||||
|
||||
|
||||
]
|
||||
,
|
||||
tailwindcss: {
|
||||
// Options
|
||||
},
|
||||
gsap: {
|
||||
composables: true,
|
||||
provide: true,
|
||||
|
||||
extraPlugins:{
|
||||
scrollTrigger: true,
|
||||
}
|
||||
},
|
||||
css : ['~/assets/css/main.css'],
|
||||
|
||||
composables: true,
|
||||
provide: true,
|
||||
|
||||
extraPlugins: {
|
||||
scrollTrigger: true,
|
||||
}
|
||||
},
|
||||
css: ['~/assets/css/main.css'],
|
||||
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user