reza fixed something

3 years ago · fb00a64063
parent 96a74df870
commit fb00a64063
7 changed files with 171 additions and 91 deletions
--- a/src/views/Home/layouts/Graphic/assets/message1.svg
+++ b/src/views/Home/layouts/Graphic/assets/message1.svg
@ -3,6 +3,6 @@
    <path id="Rectangle_248" data-name="Rectangle 248" d="M24,0H318a24,24,0,0,1,24,24v77a24,24,0,0,1-24,24H0a0,0,0,0,1,0,0V24A24,24,0,0,1,24,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1376.889, 390.401)" fill="#4dd8bc" opacity="0.42"/>
    <path id="Rectangle_246" data-name="Rectangle 246" d="M24,0H329a24,24,0,0,1,24,24v77a24,24,0,0,1-24,24H0a0,0,0,0,1,0,0V24A24,24,0,0,1,24,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1373.957, 400.764)" fill="#4dd8bc"/>
    <text id="سلام_قصه_از_اینجا_همینجا_شروع_میشه._برای_پایان_آماده_هستی_مطمئنی_" data-name="سلام
-قصه از اینجا همینجا شروع میشه. برای پایان آماده هستی؟ مطمئنی ؟" transform="matrix(0.995, -0.105, 0.105, 0.995, 1390.183, 417.602)" fill="#fff" font-size="17" font-family="IRANSansX-Regular, IRANSansX"><tspan x="-32.572" y="17"></tspan><tspan y="17">سلام</tspan><tspan x="-306.136" y="43"> </tspan><tspan y="43">قصه از اینجا همینجا شروع میشه. برای پایان</tspan><tspan x="-164.441" y="69">آماده هستی؟ مطمئنی ؟</tspan></text>
+قصه از اینجا همینجا شروع میشه. برای پایان آماده هستی؟ مطمئنی ؟" transform="matrix(0.995, -0.105, 0.105, 0.995, 1390.183, 417.602)" fill="#fff" font-size="17" font-family="IRANSansX-Regular, IRANSansX"><tspan x="-32.572" y="17"></tspan><tspan x="284" y="17">سلام</tspan><tspan x="-306.136" y="43"> </tspan><tspan x="12" y="43">قصه از اینجا همینجا شروع میشه. برای پایان</tspan><tspan x="152" y="69">آماده هستی؟ مطمئنی ؟</tspan></text>
  </g>
 </svg>
--- a/src/views/Home/layouts/Graphic/assets/message2.svg
+++ b/src/views/Home/layouts/Graphic/assets/message2.svg
@ -2,6 +2,6 @@
  <g id="Group_272" data-name="Group 272" transform="translate(-150.515 -280.224)">
    <path id="Rectangle_252" data-name="Rectangle 252" d="M15,0H343a15,15,0,0,1,15,15V81.484a0,0,0,0,1,0,0H15a15,15,0,0,1-15-15V15A15,15,0,0,1,15,0Z" transform="translate(154.367 292.718) rotate(-2)" fill="#b0df2d" opacity="0.49"/>
    <path id="Rectangle_251" data-name="Rectangle 251" d="M15,0H352a15,15,0,0,1,15,15V79.3a0,0,0,0,1,0,0H15a15,15,0,0,1-15-15V15A15,15,0,0,1,15,0Z" transform="translate(150.515 305.032) rotate(-2)" fill="#b0df2d"/>
-    <text id="هیچ_وقت_برای_یک_ماجراجویی_درست_و_حسابی_دیر_نیست" data-name="هیچ وقت برای یک ماجراجویی درست و حسابی دیر نیست" transform="matrix(0.999, -0.035, 0.035, 0.999, 171.078, 317.73)" fill="#fff" font-size="17" font-family="IRANSansX-Regular, IRANSansX"><tspan x="-268.243" y="17"> </tspan><tspan y="17">هیچ وقت برای یک ماجراجویی درست و</tspan><tspan x="-121.227" y="43">حسابی دیر نیست</tspan></text>
+    <text id="هیچ_وقت_برای_یک_ماجراجویی_درست_و_حسابی_دیر_نیست" data-name="هیچ وقت برای یک ماجراجویی درست و حسابی دیر نیست" transform="matrix(0.999, -0.035, 0.035, 0.999, 171.078, 317.73)" fill="#fff" font-size="17" font-family="IRANSansX-Regular, IRANSansX"><tspan x="-268.243" y="17"> </tspan><tspan x="40" y="17">هیچ وقت برای یک ماجراجویی درست و</tspan><tspan x="185" y="43">حسابی دیر نیست</tspan></text>
  </g>
 </svg>
--- a/src/views/Home/layouts/Graphic/assets/message3.svg
+++ b/src/views/Home/layouts/Graphic/assets/message3.svg
@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="324.518" height="72.317" viewBox="0 0 324.518 72.317">
+  <g id="Group_266" data-name="Group 266" transform="translate(-142.078 -923.692)">
+    <path id="Rectangle_254" data-name="Rectangle 254" d="M24,0H161.956a24,24,0,0,1,24,24V58.3a0,0,0,0,1,0,0H24a24,24,0,0,1-24-24V24A24,24,0,0,1,24,0Z" transform="translate(267.917 930.182) rotate(-2)" fill="#fce256" opacity="0.2"/>
+    <path id="Rectangle_253" data-name="Rectangle 253" d="M24,0H184.956a24,24,0,0,1,24,24V58.3a0,0,0,0,1,0,0H24a24,24,0,0,1-24-24V24A24,24,0,0,1,24,0Z" transform="translate(255.733 937.748) rotate(-2)" fill="#fce256"/>
+    <g id="Group_226" data-name="Group 226" transform="translate(0 38)">
+      <text id="کشف_کن_و_ماجراجویی_کن" data-name="کشف کن و ماجراجویی کن" transform="matrix(0.999, -0.035, 0.035, 0.999, 142.078, 919.97)" fill="#202020" font-size="17" font-family="IRANSansX-Regular, IRANSansX"><tspan x="135" y="17">کشف کن و ماجراجویی کن</tspan></text>
+      <text id="_" data-name="!" transform="matrix(0.999, -0.035, 0.035, 0.999, 258.895, 918.009)" fill="#202020" font-size="17" font-family="IRANSansX-Regular, IRANSansX"><tspan x="10.59" y="17">!</tspan></text>
+    </g>
+  </g>
+</svg>
--- a/src/views/Home/layouts/Graphic/assets/path2.svg
+++ b/src/views/Home/layouts/Graphic/assets/path2.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="404.328" height="602.832" viewBox="0 0 404.328 602.832">
+  <path id="Path_215" data-name="Path 215" d="M1466,984.981S1353.753,1065,1280.256,1018.75c-39.541-24.884,55.521-100.932,35.825-152.505-6.3-16.487-51.325-43.066-94.352-41.077-71.524,3.306-152.885,41.253-151.661,8.466,2.7-72.443,135.243-136.047,179.051-188.3,24.633-29.382-28.261-51.8-27.39-78.49,2.412-73.931,129.627-33.893,139.135-50.172,18.806-32.2,8.727-78.514,8.727-78.514" transform="translate(-1066.553 -433.994)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="7" stroke-dasharray="13 22" opacity="0.12"/>
+</svg>
--- a/src/views/Home/layouts/Graphic/assets/path3.svg
+++ b/src/views/Home/layouts/Graphic/assets/path3.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1255.525" height="495.659" viewBox="0 0 1255.525 495.659">
+  <path id="Path_216" data-name="Path 216" d="M1349.918,771.061s-151.746,164.179-286.575,190.37S939.623,858.807,829.558,845.864s-82.5,92.688-206.472,63.8S375.645,670.577,375.645,670.577,152.1,676.335,110.676,625.736s99.262-148.179,99.262-148.179" transform="translate(-99.339 -472.686)" fill="none" stroke="#eee" stroke-linecap="round" stroke-width="7" stroke-dasharray="13 24"/>
+</svg>
--- a/src/views/Home/layouts/Graphic/index.js
+++ b/src/views/Home/layouts/Graphic/index.js
@ -8,6 +8,7 @@ import galleryImage from "./assets/gallery.svg";
 import voiceImage from "./assets/voice.svg";
 import message1Image from "./assets/message1.svg";
 import message2Image from "./assets/message2.svg";
+import message3Image from "./assets/message3.svg";
 import robanImage from "./assets/roban.svg";
 import user1Image from "./assets/user1.svg";
 import user2Image from "./assets/user2.svg";
@ -20,6 +21,8 @@ import icon1Image from "./assets/icon1.svg";
 import icon2Image from "./assets/icon2.svg";
 import icon3Image from "./assets/icon3.svg";
 import path1Image from "./assets/path1.svg";
+import path2Image from "./assets/path2.svg";
+import path3Image from "./assets/path3.svg";

 export const Graphic = ({ uselessProps }) => {
  const [animationFlags, setAnimationFlags] = React.useState({
@ -134,6 +137,21 @@ export const Graphic = ({ uselessProps }) => {
        avatar: true,
      });
    }, 6500);
+    //path
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        icon: true,
+        roban: true,
+        title: true,
+        messages: true,
+        gallery: true,
+        voice: true,
+        description: true,
+        avatar: true,
+        paths: true,
+      });
+    }, 7200);
  }, []);

  return (
@ -188,7 +206,7 @@ export const Graphic = ({ uselessProps }) => {
        <img
          src={galleryImage}
          alt="گالری"
-          className="absolute left-0 gallery"
+          className="absolute left-0 gallery z-10"
          style={{
            width: "19.11vw",
            bottom: "calc((100vh - 100vh / 12) / 10)",
@ -215,7 +233,7 @@ export const Graphic = ({ uselessProps }) => {
          <img
            src={message1Image}
            alt="پیام"
-            className="absolute message1"
+            className="absolute message1 text-right"
            style={{
              width: "18.95vw",
              top: "calc((100vh - 100vh / 12) / 3.5)",
@ -231,15 +249,24 @@ export const Graphic = ({ uselessProps }) => {
              top: "calc((100vh - 100vh / 12) / 6)",
            }}
          />
+          <img
+            src={message3Image}
+            alt="پیام"
+            className="absolute bottom-0 message3"
+            style={{
+              width: "15.83vw",
+              left: "9.66vw",
+            }}
+          />
        </>
      )}

-      {animationFlags.avatar && (
-        <>
      <img
        src={user1Image}
        alt="کاربر"
-            className="absolute right-0 animate-pulse"
+        className={`absolute right-0 transition-all duration-700 animate-pulse ${
+          animationFlags.avatar ? "scale-100" : "scale-0"
+        }`}
        style={{
          width: "5.20vw",
          top: "calc((100vh - 100vh / 12) / 20)",
@ -249,7 +276,9 @@ export const Graphic = ({ uselessProps }) => {
      <img
        src={user2Image}
        alt="کاربر"
-            className="absolute transform -translate-x-1/2 animate-pulse"
+        className={`absolute transform transition-all duration-700 -translate-x-1/2 animate-pulse ${
+          animationFlags.avatar ? "scale-100" : "scale-0"
+        }`}
        style={{
          width: "5.20vw",
          top: "calc((100vh - 100vh / 12) / 18)",
@ -260,7 +289,9 @@ export const Graphic = ({ uselessProps }) => {
      <img
        src={user3Image}
        alt="کاربر"
-            className="absolute animate-pulse"
+        className={`absolute transition-all duration-700 animate-pulse ${
+          animationFlags.avatar ? "scale-100 " : "scale-0"
+        }`}
        style={{
          width: "8.07vw",
          top: "calc((100vh - 100vh / 12) / 7)",
@ -271,7 +302,9 @@ export const Graphic = ({ uselessProps }) => {
      <img
        src={user4Image}
        alt="کاربر"
-            className="absolute transform -translate-x-full translate-y-1/4 animate-pulse"
+        className={`absolute transform -translate-x-full translate-y-1/4 transition-all duration-700 animate-pulse ${
+          animationFlags.avatar ? "scale-100" : "scale-0"
+        }`}
        style={{
          width: "5.20vw",
          top: "calc((100vh - 100vh / 12) / 2.5)",
@ -282,7 +315,9 @@ export const Graphic = ({ uselessProps }) => {
      <img
        src={user5Image}
        alt="کاربر"
-            className="absolute transform -translate-y-full translate-x-full animate-pulse"
+        className={`absolute transform -translate-y-full translate-x-full transition-all duration-700 animate-pulse ${
+          animationFlags.avatar ? "scale-100" : "scale-0"
+        }`}
        style={{
          width: "6.71vw",
          bottom: "calc((100vh - 100vh / 12) / 6)",
@ -293,7 +328,9 @@ export const Graphic = ({ uselessProps }) => {
      <img
        src={user6Image}
        alt="کاربر"
-            className="absolute bottom-0 transform  -translate-x-full translate-y-1/3 animate-pulse"
+        className={`absolute bottom-0 transform  -translate-x-full translate-y-1/3 transition-all duration-700 animate-pulse ${
+          animationFlags.avatar ? "scale-100" : "scale-0"
+        }`}
        style={{
          width: "4.32vw",
          left: "calc(19.11vw)",
@ -303,14 +340,14 @@ export const Graphic = ({ uselessProps }) => {
      <img
        src={user7Image}
        alt="کاربر"
-            className="absolute bottom-0 transform translate-x-full translate-y-1/2 animate-pulse"
+        className={`absolute bottom-0 transform translate-x-full translate-y-1/2 transition-all duration-700 animate-pulse ${
+          animationFlags.avatar ? "scale-100" : "scale-0"
+        }`}
        style={{
          width: "7.18vw",
          right: "calc(19.11vw / 1.5)",
        }}
      />
-        </>
-      )}

      {animationFlags.icon && (
        <>
@ -352,23 +389,36 @@ export const Graphic = ({ uselessProps }) => {

      {animationFlags.paths && (
        <>
-          <div
+          <img
+            src={path1Image}
            className="absolute"
+            alt="مسیر"
            style={{
+              width: "25.78vw",
              left: "-1vw",
              top: "calc((100vh - 100vh / 12) / 4)",
            }}
-          >
+          />
          <img
-              src={path1Image}
+            src={path2Image}
+            className="absolute"
            alt="مسیر"
            style={{
-                width: "25.78vw",
+              width: "20.57vw",
+              left: "50.3vw",
+              top: "calc((100vh - 100vh / 12) / 2.2)",
+            }}
+          />
+          <img
+            src={path3Image}
+            className="absolute"
+            alt="مسیر"
+            style={{
+              width: "64.89vw",
              left: "-1vw",
-                top: "calc((100vh - 100vh / 12) / 4)",
+              top: "calc((100vh - 100vh / 12) / 1.90)",
            }}
          />
-          </div>
        </>
      )}
    </header>
--- a/src/views/Home/layouts/Graphic/index.scss
+++ b/src/views/Home/layouts/Graphic/index.scss
@ -45,6 +45,11 @@
  transform: translateX(0px);
 }

+.message3{
+  animation: message3 0.7s 1;
+  transform: translateX(-72%) translateY(20%);
+}
+


 // keyframes
@ -131,3 +136,12 @@
    transform: translateX(0px);
  }
 }
+
+@keyframes message3 {
+  0% {
+    transform : translateX(calc(-72% + -50vw)) translateY(20%);
+  }
+  100% {
+    transform: translateX(-72%) translateY(20%);
+  }
+}