@ -8,6 +8,7 @@ import galleryImage from "./assets/gallery.svg";
import voiceImage from "./assets/voice.svg" ; import voiceImage from "./assets/voice.svg" ;
import message1Image from "./assets/message1.svg" ; import message1Image from "./assets/message1.svg" ;
import message2Image from "./assets/message2.svg" ; import message2Image from "./assets/message2.svg" ;
import message3Image from "./assets/message3.svg" ;
import robanImage from "./assets/roban.svg" ; import robanImage from "./assets/roban.svg" ;
import user1Image from "./assets/user1.svg" ; import user1Image from "./assets/user1.svg" ;
import user2Image from "./assets/user2.svg" ; import user2Image from "./assets/user2.svg" ;
@ -20,6 +21,8 @@ import icon1Image from "./assets/icon1.svg";
import icon2Image from "./assets/icon2.svg" ; import icon2Image from "./assets/icon2.svg" ;
import icon3Image from "./assets/icon3.svg" ; import icon3Image from "./assets/icon3.svg" ;
import path1Image from "./assets/path1.svg" ; import path1Image from "./assets/path1.svg" ;
import path2Image from "./assets/path2.svg" ;
import path3Image from "./assets/path3.svg" ;
export const Graphic = ( { uselessProps } ) => { export const Graphic = ( { uselessProps } ) => {
const [ animationFlags , setAnimationFlags ] = React . useState ( { const [ animationFlags , setAnimationFlags ] = React . useState ( {
@ -134,6 +137,21 @@ export const Graphic = ({ uselessProps }) => {
avatar : true , avatar : true ,
} ) ; } ) ;
} , 6500 ) ; } , 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 ( return (
@ -188,7 +206,7 @@ export const Graphic = ({ uselessProps }) => {
< img < img
src = { galleryImage } src = { galleryImage }
alt = "گالری" alt = "گالری"
className = "absolute left-0 gallery" className = "absolute left-0 gallery z-10 "
style = { { style = { {
width : "19.11vw" , width : "19.11vw" ,
bottom : "calc((100vh - 100vh / 12) / 10)" , bottom : "calc((100vh - 100vh / 12) / 10)" ,
@ -215,7 +233,7 @@ export const Graphic = ({ uselessProps }) => {
< img < img
src = { message1Image } src = { message1Image }
alt = "پیام" alt = "پیام"
className = "absolute message1" className = "absolute message1 text-right "
style = { { style = { {
width : "18.95vw" , width : "18.95vw" ,
top : "calc((100vh - 100vh / 12) / 3.5)" , top : "calc((100vh - 100vh / 12) / 3.5)" ,
@ -231,15 +249,24 @@ export const Graphic = ({ uselessProps }) => {
top : "calc((100vh - 100vh / 12) / 6)" , 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 < img
src = { user1Image } src = { user1Image }
alt = "کاربر" alt = "کاربر"
className = "absolute right-0 animate-pulse" className = { ` absolute right-0 transition-all duration-700 animate-pulse ${
animationFlags . avatar ? "scale-100" : "scale-0"
} ` }
style = { { style = { {
width : "5.20vw" , width : "5.20vw" ,
top : "calc((100vh - 100vh / 12) / 20)" , top : "calc((100vh - 100vh / 12) / 20)" ,
@ -249,7 +276,9 @@ export const Graphic = ({ uselessProps }) => {
< img < img
src = { user2Image } src = { user2Image }
alt = "کاربر" 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 = { { style = { {
width : "5.20vw" , width : "5.20vw" ,
top : "calc((100vh - 100vh / 12) / 18)" , top : "calc((100vh - 100vh / 12) / 18)" ,
@ -260,7 +289,9 @@ export const Graphic = ({ uselessProps }) => {
< img < img
src = { user3Image } src = { user3Image }
alt = "کاربر" alt = "کاربر"
className = "absolute animate-pulse" className = { ` absolute transition-all duration-700 animate-pulse ${
animationFlags . avatar ? "scale-100 " : "scale-0"
} ` }
style = { { style = { {
width : "8.07vw" , width : "8.07vw" ,
top : "calc((100vh - 100vh / 12) / 7)" , top : "calc((100vh - 100vh / 12) / 7)" ,
@ -271,7 +302,9 @@ export const Graphic = ({ uselessProps }) => {
< img < img
src = { user4Image } src = { user4Image }
alt = "کاربر" 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 = { { style = { {
width : "5.20vw" , width : "5.20vw" ,
top : "calc((100vh - 100vh / 12) / 2.5)" , top : "calc((100vh - 100vh / 12) / 2.5)" ,
@ -282,7 +315,9 @@ export const Graphic = ({ uselessProps }) => {
< img < img
src = { user5Image } src = { user5Image }
alt = "کاربر" 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 = { { style = { {
width : "6.71vw" , width : "6.71vw" ,
bottom : "calc((100vh - 100vh / 12) / 6)" , bottom : "calc((100vh - 100vh / 12) / 6)" ,
@ -293,7 +328,9 @@ export const Graphic = ({ uselessProps }) => {
< img < img
src = { user6Image } src = { user6Image }
alt = "کاربر" 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 = { { style = { {
width : "4.32vw" , width : "4.32vw" ,
left : "calc(19.11vw)" , left : "calc(19.11vw)" ,
@ -303,14 +340,14 @@ export const Graphic = ({ uselessProps }) => {
< img < img
src = { user7Image } src = { user7Image }
alt = "کاربر" 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 = { { style = { {
width : "7.18vw" , width : "7.18vw" ,
right : "calc(19.11vw / 1.5)" , right : "calc(19.11vw / 1.5)" ,
} } } }
/ > / >
< / >
) }
{ animationFlags . icon && ( { animationFlags . icon && (
< > < >
@ -352,23 +389,36 @@ export const Graphic = ({ uselessProps }) => {
{ animationFlags . paths && ( { animationFlags . paths && (
< > < >
< div < img
src = { path1Image }
className = "absolute" className = "absolute"
alt = "مسیر"
style = { { style = { {
width : "25.78vw" ,
left : "-1vw" , left : "-1vw" ,
top : "calc((100vh - 100vh / 12) / 4)" , top : "calc((100vh - 100vh / 12) / 4)" ,
} } } }
> / >
< img < img
src = { path1Image } src = { path2Image }
className = "absolute"
alt = "مسیر" alt = "مسیر"
style = { { 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" , left : "-1vw" ,
top : "calc((100vh - 100vh / 12) / 4)" , top : "calc((100vh - 100vh / 12) / 1.90 )" ,
} } } }
/ > / >
< / d i v >
< / > < / >
) } ) }
< / h e a d e r > < / h e a d e r >
Reza_ashrafi
3 years ago
