HAM!DREZA
481 lines
14 KiB
Vue
481 lines
14 KiB
Vue
<template>
|
|
<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
|
|
class="border rounded-[10vw]"
|
|
id="circle1"
|
|
x="-10%"
|
|
y="14%"
|
|
width="21vw"
|
|
height="34vw"
|
|
rx="10vw"
|
|
/>
|
|
|
|
<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"
|
|
/>
|
|
|
|
<rect
|
|
class="border rounded-[10vw]"
|
|
id="circle4"
|
|
x="65%"
|
|
y="14%"
|
|
width="21vw"
|
|
height="34vw"
|
|
rx="10vw"
|
|
/>
|
|
|
|
<rect
|
|
class="border rounded-[10vw]"
|
|
id="circle5"
|
|
x="90%"
|
|
y="14%"
|
|
width="21vw"
|
|
height="34vw"
|
|
rx="10vw"
|
|
/>
|
|
</mask>
|
|
</defs>
|
|
<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="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>
|
|
import { onMounted, onUnmounted, ref } from "vue";
|
|
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
let ctx;
|
|
onMounted(() => {
|
|
ctx = gsap.context((self) => {
|
|
const svg = document.querySelector("#svg");
|
|
const img = document.querySelector("#img");
|
|
const imgFixed = document.querySelector("#img-fixed");
|
|
|
|
const circle1 = document.querySelector("#circle1");
|
|
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 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 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 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 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, {
|
|
scale: 1.1,
|
|
xPercent: -50,
|
|
yPercent: -50,
|
|
});
|
|
|
|
gsap.set(imgFixed, {
|
|
xPercent: -50,
|
|
yPercent: -50,
|
|
});
|
|
|
|
var tl = gsap
|
|
.timeline({
|
|
scrollTrigger: {
|
|
trigger: ".image-unmask",
|
|
pin: true,
|
|
start: "top top",
|
|
end: "+=500",
|
|
//end: "bottom bottom",
|
|
scrub: true,
|
|
},
|
|
defaults: {
|
|
duration: 5,
|
|
},
|
|
})
|
|
|
|
.to(
|
|
circle1,
|
|
{
|
|
attr: {
|
|
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(
|
|
circle3,
|
|
{
|
|
attr: {
|
|
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(
|
|
circle4,
|
|
{
|
|
attr: {
|
|
height: () => heightInt4 * 10 + "vw",
|
|
width: () => widthInt4 * 10 + "vw",
|
|
x: () => spaceIntX4 * 3 + "%",
|
|
y: () => spaceIntY4 - (heightInt4 * 10) / 1 + "%",
|
|
rx: () => rx4Int * 7 + "vw",
|
|
},
|
|
},
|
|
0
|
|
)
|
|
.to(
|
|
circle5,
|
|
{
|
|
attr: {
|
|
height: () => heightInt5 * 10 + "vw",
|
|
width: () => widthInt5 * 10 + "vw",
|
|
x: () => spaceIntX5 * 5 + "%",
|
|
y: () => spaceIntY5 - (heightInt5 * 10) / 1 + "%",
|
|
rx: () => rx5Int * 7 + "vw",
|
|
},
|
|
},
|
|
0
|
|
)
|
|
|
|
.to(
|
|
img,
|
|
{
|
|
scale: 1,
|
|
opacity: 1,
|
|
},
|
|
0
|
|
)
|
|
.set(img, {
|
|
opacity: 0,
|
|
})
|
|
.set(imgFixed, {
|
|
opacity: 1,
|
|
});
|
|
|
|
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);
|
|
|
|
function init() {
|
|
imgWidth = img.naturalWidth;
|
|
imgHeight = img.naturalHeight;
|
|
|
|
resize();
|
|
}
|
|
|
|
function resize() {
|
|
tl.progress(0);
|
|
|
|
const r = svg.getBoundingClientRect();
|
|
const rectWidth = r.width + pad;
|
|
const rectHeight = r.height + pad;
|
|
|
|
const rx = rectWidth / imgWidth;
|
|
const ry = rectHeight / imgHeight;
|
|
|
|
const ratio = Math.max(rx, ry);
|
|
|
|
const width = imgWidth * ratio;
|
|
const height = imgHeight * ratio;
|
|
|
|
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 });
|
|
|
|
tl.invalidate();
|
|
|
|
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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
html,
|
|
body {
|
|
font-family: "Signika Negative", sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.border {
|
|
outline: 0.3vw solid red;
|
|
outline-offset: 0.8vw;
|
|
}
|
|
section.spacer {
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
section.image-unmask {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.inner {
|
|
margin: 50px;
|
|
padding: 50px;
|
|
min-height: 25vh;
|
|
margin-left: 10vw;
|
|
max-width: 80vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#img {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
opacity: 0.8;
|
|
z-index: -1;
|
|
}
|
|
|
|
#svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
#img-fixed {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
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> |