fixed animation bugs

2024-05-09 23:16:54 +03:30
parent 0ac988a9c7
commit ba0c128832
8 changed files with 307 additions and 146 deletions
@@ -1,7 +1,7 @@
 <template>
-  <section class="hidden md:block image-unmask">
+  <section class="image-unmask h-[100vh]">
    <div
-      class="autoHide absolute z-[100] left-[37.5vw] top-[20vw] text-[2.656vw] w-[25vw] text-center"
+      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>
@@ -12,10 +12,10 @@
    <svg id="svg">
      <defs>
        <mask id="mask">
-          <rect width="100vw" height="100vw" fill="white"></rect>
+          <rect width="100vw" height="100vh" fill="white"></rect>

          <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
            id="circle1"
            x="-10%"
            y="14%"
@@ -25,7 +25,7 @@
          />

          <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
            id="circle2"
            x="15%"
            y="14%"
@@ -34,7 +34,7 @@
            rx="10vw"
          />
          <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
            id="circle3"
            x="40%"
            y="14%"
@@ -44,7 +44,7 @@
          />

          <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
            id="circle4"
            x="65%"
            y="14%"
@@ -54,7 +54,7 @@
          />

          <rect
-            class="border rounded-[10vw]"
+            class="hidden md:block border rounded-[10vw]"
            id="circle5"
            x="90%"
            y="14%"
@@ -62,6 +62,34 @@
            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
@@ -75,15 +103,13 @@
  </section>

  <section class="content">
-    <div class="h-[94.615vw] lg:h-[42.938vw] flex items-center text-[#383E43]">
+    <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] md:mt-[10vw] lg:mt-0 text-[4.544vw] lg:text-[1.481vw] font-bold"
-        >
+        <h2 class="-mt-[2vw] text-[4.544vw] md:text-[1.481vw] font-bold">
          داستان ما
        </h2>
        <p
-          class="text-[3.19vw] lg:text-[0.833vw] leading-[4.5vw] lg:leading-[1.563vw] mt-[2vw]"
+          class="text-[3.19vw] md:text-[0.833vw] leading-[4.5vw] md:leading-[1.563vw] mt-[2vw]"
        >
          <span>
            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
@@ -95,39 +121,41 @@
          </span>
        </p>
        <p
-          class="hidden lg:block text-[3.19vw] lg:text-[0.833vw] leading-[1.563vw] mt-[2vw]"
+          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>
-        <span>
-          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
-          استفاده از طراحان گرافیک است، چاپگرها از صنعت چاپ، و با
-          استفاده از طراحان گرافیک است، چاپگرها
-        </span>
+          <span>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+            استفاده از طراحان گرافیک است، چاپگرها
+          </span>
+          <span>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهو لورم ایپسوم متن ساختگی
+            با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک
+            است، چاپگرهام از صنعت چاپ، و با استفاده از طراحان گرافیک است،
+            چاپگرها
+          </span>
+          <span>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+            استفاده از طراحان گرافیک است، چاپگرها
+          </span>
+          <span>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهو لورم ایپسوم متن ساختگی
+            با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک
+            است، چاپگرهام از صنعت چاپ، و با استفاده از طراحان گرافیک است،
+            چاپگرها
+          </span>
+          <span>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+            استفاده از طراحان گرافیک است، چاپگرها
+          </span>
+          <span>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
+            استفاده از طراحان گرافیک است، چاپگرها
+          </span>
+          <span>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم لورم ایپسوم متن ساختگی
+            با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک
+            است، چاپگرها از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها
+          </span>
          <span>
            در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را
            می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی
@@ -136,11 +164,10 @@
            الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این
            صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و
          </span>
- 
        </p>
      </div>
    </div>
-    <div class="fade"></div>
+    <div class="fade !mt-[10vw]"></div>
  </section>
  <img id="img-fixed" src="/public/images/aboutBg.jpg" />
 </template>
@@ -218,6 +245,42 @@ onMounted(() => {
    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;

@@ -240,8 +303,9 @@ onMounted(() => {
          trigger: ".image-unmask",
          pin: true,
          start: "top top",
-          end: "+=500",
-          //end: "bottom bottom",
+          //end: "+=100",
+          end: "bottom 20%",
+          ease: "slow(0.7,0.7,false)",
          scrub: true,
        },
        defaults: {
@@ -315,6 +379,46 @@ onMounted(() => {
        },
        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,
@@ -342,53 +446,53 @@ onMounted(() => {
      },
    });

-    window.addEventListener("load", init);
-    window.addEventListener("resize", resize);
+    // window.addEventListener("load", init);
+    // window.addEventListener("resize", resize);

-    function init() {
-      imgWidth = img.naturalWidth;
-      imgHeight = img.naturalHeight;
+    // function init() {
+    //   imgWidth = img.naturalWidth;
+    //   imgHeight = img.naturalHeight;

-      resize();
-    }
+    //   resize();
+    // }

-    function resize() {
-      tl.progress(0);
+    // function resize() {
+    //   tl.progress(0);

-      const r = svg.getBoundingClientRect();
-      const rectWidth = r.width + pad;
-      const rectHeight = r.height + pad;
+    //   const r = svg.getBoundingClientRect();
+    //   const rectWidth = r.width + pad;
+    //   const rectHeight = r.height + pad;

-      const rx = rectWidth / imgWidth;
-      const ry = rectHeight / imgHeight;
+    //   const rx = rectWidth / imgWidth;
+    //   const ry = rectHeight / imgHeight;

-      const ratio = Math.max(rx, ry);
+    //   const ratio = Math.max(rx, ry);

-      const width = imgWidth * ratio;
-      const height = imgHeight * ratio;
+    //   const width = imgWidth * ratio;
+    //   const height = imgHeight * ratio;

-      const dx = rectWidth / 2;
-      const dy = rectHeight / 2;
-      radius = Math.sqrt(dx * dx + dy * dy);
+    //   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 });
+    //   gsap.set(img, { width, height });
+    //   gsap.set(imgFixed, { width, height });

-      tl.invalidate();
+    //   tl.invalidate();

-      ScrollTrigger.refresh();
-    }
+    //   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
+        end: "top", // Can be top, center, bottom
        pin: true,
      },
    });
    let stagger = 0.8;
-  
+
    timeline
      .from(".autoHide", { autoAlpha: 1, display: "block", stagger: stagger })
      .to(
@@ -397,7 +501,6 @@ onMounted(() => {
        stagger
      );
  });
-
 });
 </script>

@@ -414,8 +517,12 @@ body {
  padding: 0;
 }
 .border {
-  outline: 0.3vw solid red;
-  outline-offset: 0.8vw;
+  outline: 0.3vw solid !important;
+  outline-offset: 0.8vw !important;
+}
+.thickborder {
+  outline: 1vw solid !important;
+  outline-offset: 2vw !important;
 }
 section.spacer {
  height: 100vh;
@@ -466,6 +573,24 @@ section.image-unmask {
  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,
@@ -44,8 +44,8 @@
          </div>
        </div>
      </div>
-      <div class="w-full md:w-[35%] rounded-[1.302vw]">
-        <LMap
+      <div class="w-full md:w-[35%] rounded-[1.302vw] min-h-[50vh]">
+         <LMap
          class="rounded-lg"
          ref="map"
          :zoom="zoom"
@@ -57,8 +57,11 @@
            layer-type="base"
            name="OpenStreetMap"
          />
-        </LMap>
+        </LMap> 
      </div>
    </div>
  </div>
-</template>
+</template>
+<script setup>
+const zoom = ref(16)
+</script>