javaneh/components/about-page/Header.vue

<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>