diff --git a/src/views/Home/layouts/Graphic/assets/message1.svg b/src/views/Home/layouts/Graphic/assets/message1.svg index 94e8691..80265ed 100644 --- a/src/views/Home/layouts/Graphic/assets/message1.svg +++ b/src/views/Home/layouts/Graphic/assets/message1.svg @@ -3,6 +3,6 @@ سلام قصه از اینجا همینجا شروع میشه. برای پایانآماده هستی؟ مطمئنی ؟ +قصه از اینجا همینجا شروع میشه. برای پایان آماده هستی؟ مطمئنی ؟" transform="matrix(0.995, -0.105, 0.105, 0.995, 1390.183, 417.602)" fill="#fff" font-size="17" font-family="IRANSansX-Regular, IRANSansX">سلام قصه از اینجا همینجا شروع میشه. برای پایانآماده هستی؟ مطمئنی ؟ - + \ No newline at end of file diff --git a/src/views/Home/layouts/Graphic/assets/message2.svg b/src/views/Home/layouts/Graphic/assets/message2.svg index 6a83711..e7b094d 100644 --- a/src/views/Home/layouts/Graphic/assets/message2.svg +++ b/src/views/Home/layouts/Graphic/assets/message2.svg @@ -2,6 +2,6 @@ - هیچ وقت برای یک ماجراجویی درست وحسابی دیر نیست + هیچ وقت برای یک ماجراجویی درست وحسابی دیر نیست diff --git a/src/views/Home/layouts/Graphic/assets/message3.svg b/src/views/Home/layouts/Graphic/assets/message3.svg new file mode 100644 index 0000000..46b4181 --- /dev/null +++ b/src/views/Home/layouts/Graphic/assets/message3.svg @@ -0,0 +1,10 @@ + + + + + + کشف کن و ماجراجویی کن + ! + + + diff --git a/src/views/Home/layouts/Graphic/assets/path2.svg b/src/views/Home/layouts/Graphic/assets/path2.svg new file mode 100644 index 0000000..74e4f26 --- /dev/null +++ b/src/views/Home/layouts/Graphic/assets/path2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/Home/layouts/Graphic/assets/path3.svg b/src/views/Home/layouts/Graphic/assets/path3.svg new file mode 100644 index 0000000..7ebf378 --- /dev/null +++ b/src/views/Home/layouts/Graphic/assets/path3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/Home/layouts/Graphic/index.js b/src/views/Home/layouts/Graphic/index.js index 271889e..11fa13d 100644 --- 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 }) => { گالری { پیام { top: "calc((100vh - 100vh / 12) / 6)", }} /> - - )} - - {animationFlags.avatar && ( - <> کاربر - {/* user2 */} - کاربر - {/* user3 */} - کاربر - {/* user4 */} - کاربر - {/* user5 */} - کاربر - {/* user6 */} - کاربر - {/* user7 */} - کاربر )} + کاربر + {/* user2 */} + کاربر + {/* user3 */} + کاربر + {/* user4 */} + کاربر + {/* user5 */} + کاربر + {/* user6 */} + کاربر + {/* user7 */} + کاربر + {animationFlags.icon && ( <> {/* icon1 */} @@ -352,23 +389,36 @@ export const Graphic = ({ uselessProps }) => { {animationFlags.paths && ( <> -
- مسیر -
+ /> + مسیر + مسیر )} diff --git a/src/views/Home/layouts/Graphic/index.scss b/src/views/Home/layouts/Graphic/index.scss index 3ca4ffb..95d89ad 100644 --- 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 @@ -130,4 +135,13 @@ 100% { transform: translateX(0px); } +} + +@keyframes message3 { + 0% { + transform : translateX(calc(-72% + -50vw)) translateY(20%); + } + 100% { + transform: translateX(-72%) translateY(20%); + } } \ No newline at end of file