HAM!DREZA
584 lines
16 KiB
Vue
584 lines
16 KiB
Vue
<template>
|
|
<section class="image-unmask h-[100vh]">
|
|
<div
|
|
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>
|
|
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="100vh" fill="white"></rect>
|
|
|
|
<rect
|
|
class="hidden md:block border rounded-[10vw]"
|
|
id="circle1"
|
|
x="-10%"
|
|
y="14%"
|
|
width="21vw"
|
|
height="34vw"
|
|
rx="10vw"
|
|
/>
|
|
|
|
<rect
|
|
class="hidden md:block border rounded-[10vw]"
|
|
id="circle2"
|
|
x="15%"
|
|
y="14%"
|
|
width="21vw"
|
|
height="34vw"
|
|
rx="10vw"
|
|
/>
|
|
<rect
|
|
class="hidden md:block border rounded-[10vw]"
|
|
id="circle3"
|
|
x="40%"
|
|
y="14%"
|
|
width="21vw"
|
|
height="34vw"
|
|
rx="10vw"
|
|
/>
|
|
|
|
<rect
|
|
class="hidden md:block border rounded-[10vw]"
|
|
id="circle4"
|
|
x="65%"
|
|
y="14%"
|
|
width="21vw"
|
|
height="34vw"
|
|
rx="10vw"
|
|
/>
|
|
|
|
<rect
|
|
class="hidden md:block border rounded-[10vw]"
|
|
id="circle5"
|
|
x="90%"
|
|
y="14%"
|
|
width="21vw"
|
|
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
|
|
id="rect"
|
|
width="100vw"
|
|
height="100%"
|
|
fill="white"
|
|
mask="url(#mask)"
|
|
></rect>
|
|
</svg>
|
|
</section>
|
|
|
|
<section class="content">
|
|
<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] text-[4.544vw] md:text-[1.481vw] font-bold">
|
|
داستان ما
|
|
</h2>
|
|
<p
|
|
class="text-[3.19vw] md:text-[0.833vw] leading-[4.5vw] md:leading-[1.563vw] mt-[2vw]"
|
|
>
|
|
<span>
|
|
در جشنواره روز ملی نان که توسط دانشگاه علوم پزشکی برگزار شد، این مجموعه توسط امام جمعه و استاندار
|
|
محترم و رئیس اداره غله به عنوان برگزیده این جشنواره معرفی و موفق به کسب تندیس برتر این جشنواره گردید.
|
|
</span>
|
|
|
|
</p>
|
|
<p
|
|
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>
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="fade !mt-[10vw]"></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 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;
|
|
|
|
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: "+=100",
|
|
end: "bottom 20%",
|
|
ease: "slow(0.7,0.7,false)",
|
|
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(
|
|
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,
|
|
{
|
|
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: "top", // 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 !important;
|
|
outline-offset: 0.8vw !important;
|
|
}
|
|
.thickborder {
|
|
outline: 1vw solid !important;
|
|
outline-offset: 2vw !important;
|
|
}
|
|
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;
|
|
}
|
|
@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,
|
|
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> |