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>
|
||||
Reference in New Issue
Block a user