danak/javaneh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animations of pages 7 and 8

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-07 20:11:44 +03:30
parent 900d87fa55
commit 9e8d5abc19
10 changed files with 1104 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/about-page/Header.vue
+379
View File
@@ -0,0 +1,379 @@
<template>
<section class="image-unmask">
<img
id="img"
src="/public/images/aboutBg.jpg"
/>
<svg id="svg">
<defs>
<mask id="mask">
<rect
width="100%" height="100%" fill="white"></rect>
<ellipse class="border rounded-[50%]" id="circle1" cx="-4%" cy="50%" rx="180" ry="270">
</ellipse>
<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">
</ellipse>
<ellipse class="border rounded-[50%]" id="circle4" cx="77%" cy="50%" rx="180" ry="270">
</ellipse>
<ellipse class="border rounded-[50%]" id="circle5" cx="104%" cy="50%" rx="180" ry="270">
</ellipse>
</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>
</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> -->
</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 radiusX1 = +circle1.getAttribute("rx");
let radiusY1 = +circle1.getAttribute("ry");
let space1 = circle1.getAttribute("cx");
let spaceToIng1 = parseInt(space1)
const circle2 = document.querySelector("#circle2");
let radiusX2 = +circle2.getAttribute("rx");
let radiusY2 = +circle2.getAttribute("ry");
let space2 = circle2.getAttribute("cx");
let spaceToIng2 = parseInt(space2)
const circle3 = document.querySelector("#circle3");
let radiusX3 = +circle3.getAttribute("rx");
let radiusY3 = +circle3.getAttribute("ry");
const circle4 = document.querySelector("#circle4");
let radiusX4 = +circle4.getAttribute("rx");
let radiusY4 = +circle4.getAttribute("ry");
let space4 = circle4.getAttribute("cx");
let spaceToIng4 = parseInt(space4)
const circle5 = document.querySelector("#circle5");
let radiusX5 = +circle5.getAttribute("rx");
let radiusY5 = +circle5.getAttribute("ry");
let space5 = circle5.getAttribute("cx");
let spaceToIng5 = parseInt(space5)
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: 3,
},
})
.to(
circle1,
{
attr: {
ry: () => radiusY1 * 10,
rx: () => radiusX1 * 10,
cx: () => spaceToIng1 * 120 + '%'
},
},
0
)
.to(
circle2,
{
attr: {
ry: () => radiusY2 * 10,
rx: () => radiusX2 * 10,
cx: () => spaceToIng2 * -9 + '%'
},
},
0
)
.to(
circle3,
{
attr: {
ry: () => radiusY3 * 10,
rx: () => radiusX3 * 10,
},
},
0
)
.to(
circle4,
{
attr: {
ry: () => radiusY4 * 10,
rx: () => radiusX4 * 10,
cx: () => spaceToIng4 * 3.9 + '%'
},
},
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,
{
scale: 1,
opacity: 1,
},
0
)
.set(img, {
opacity: 0,
})
.set(imgFixed, {
opacity: 1,
});
//.to("#whiteLayer", {
// alpha: 0,
// ease: "power1.in",
// duration: 1 - 0.25
//}, 0.25)
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();
}
});
});
</script>
<style scoped>
html,
body {
font-family: "Signika Negative", sans-serif;
margin: 0;
padding: 0;
}
.border{
outline: 5px solid red;
outline-offset:10px;
}
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;
}
</style>