reza fixed something

master
Reza_ashrafi 2 years ago
parent 96a74df870
commit fb00a64063
  1. 4
      src/views/Home/layouts/Graphic/assets/message1.svg
  2. 2
      src/views/Home/layouts/Graphic/assets/message2.svg
  3. 10
      src/views/Home/layouts/Graphic/assets/message3.svg
  4. 3
      src/views/Home/layouts/Graphic/assets/path2.svg
  5. 3
      src/views/Home/layouts/Graphic/assets/path3.svg
  6. 226
      src/views/Home/layouts/Graphic/index.js
  7. 14
      src/views/Home/layouts/Graphic/index.scss

@ -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>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

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

After

Width:  |  Height:  |  Size: 1.2 KiB

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

After

Width:  |  Height:  |  Size: 642 B

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

After

Width:  |  Height:  |  Size: 493 B

@ -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,87 +249,106 @@ export const Graphic = ({ uselessProps }) => {
top: "calc((100vh - 100vh / 12) / 6)",
}}
/>
</>
)}
{animationFlags.avatar && (
<>
<img
src={user1Image}
alt="کاربر"
className="absolute right-0 animate-pulse"
style={{
width: "5.20vw",
top: "calc((100vh - 100vh / 12) / 20)",
}}
/>
{/* user2 */}
<img
src={user2Image}
alt="کاربر"
className="absolute transform -translate-x-1/2 animate-pulse"
style={{
width: "5.20vw",
top: "calc((100vh - 100vh / 12) / 18)",
left: "calc(19.11vw / 2)",
}}
/>
{/* user3 */}
<img
src={user3Image}
alt="کاربر"
className="absolute animate-pulse"
style={{
width: "8.07vw",
top: "calc((100vh - 100vh / 12) / 7)",
left: "22.11vw",
}}
/>
{/* user4 */}
<img
src={user4Image}
alt="کاربر"
className="absolute transform -translate-x-full translate-y-1/4 animate-pulse"
style={{
width: "5.20vw",
top: "calc((100vh - 100vh / 12) / 2.5)",
left: "calc(19.11vw / 2.4)",
}}
/>
{/* user5 */}
<img
src={user5Image}
alt="کاربر"
className="absolute transform -translate-y-full translate-x-full animate-pulse"
style={{
width: "6.71vw",
bottom: "calc((100vh - 100vh / 12) / 6)",
right: "calc(19.11vw)",
}}
/>
{/* user6 */}
<img
src={user6Image}
alt="کاربر"
className="absolute bottom-0 transform -translate-x-full translate-y-1/3 animate-pulse"
style={{
width: "4.32vw",
left: "calc(19.11vw)",
}}
/>
{/* user7 */}
<img
src={user7Image}
alt="کاربر"
className="absolute bottom-0 transform translate-x-full translate-y-1/2 animate-pulse"
src={message3Image}
alt="پیام"
className="absolute bottom-0 message3"
style={{
width: "7.18vw",
right: "calc(19.11vw / 1.5)",
width: "15.83vw",
left: "9.66vw",
}}
/>
</>
)}
<img
src={user1Image}
alt="کاربر"
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)",
}}
/>
{/* user2 */}
<img
src={user2Image}
alt="کاربر"
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)",
left: "calc(19.11vw / 2)",
}}
/>
{/* user3 */}
<img
src={user3Image}
alt="کاربر"
className={`absolute transition-all duration-700 animate-pulse ${
animationFlags.avatar ? "scale-100 " : "scale-0"
}`}
style={{
width: "8.07vw",
top: "calc((100vh - 100vh / 12) / 7)",
left: "22.11vw",
}}
/>
{/* user4 */}
<img
src={user4Image}
alt="کاربر"
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)",
left: "calc(19.11vw / 2.4)",
}}
/>
{/* user5 */}
<img
src={user5Image}
alt="کاربر"
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)",
right: "calc(19.11vw)",
}}
/>
{/* user6 */}
<img
src={user6Image}
alt="کاربر"
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)",
}}
/>
{/* user7 */}
<img
src={user7Image}
alt="کاربر"
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 && (
<>
{/* icon1 */}
@ -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}
alt="مسیر"
style={{
width: "25.78vw",
left: "-1vw",
top: "calc((100vh - 100vh / 12) / 4)",
}}
/>
</div>
/>
<img
src={path2Image}
className="absolute"
alt="مسیر"
style={{
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) / 1.90)",
}}
/>
</>
)}
</header>

@ -45,6 +45,11 @@
transform: translateX(0px);
}
.message3{
animation: message3 0.7s 1;
transform: translateX(-72%) translateY(20%);
}
// keyframes
@ -130,4 +135,13 @@
100% {
transform: translateX(0px);
}
}
@keyframes message3 {
0% {
transform : translateX(calc(-72% + -50vw)) translateY(20%);
}
100% {
transform: translateX(-72%) translateY(20%);
}
}
Loading…
Cancel
Save