From bcc1d2f1f11f6cbc82f3119ad0cd311452b22bad Mon Sep 17 00:00:00 2001 From: leo <leopold@lchappuis.fr> Date: Sun, 28 Jan 2024 10:31:58 +0100 Subject: [PATCH] update graphics --- src/components/Legals.jsx | 9 ++++++++- src/components/Lights.jsx | 2 +- src/components/Son.jsx | 32 +++++++++++++++++--------------- src/pages/MentionLegals.jsx | 7 ++++++- src/style/Lights.css | 4 ++++ src/style/Son.css | 19 ++++++++++--------- 6 files changed, 46 insertions(+), 27 deletions(-) diff --git a/src/components/Legals.jsx b/src/components/Legals.jsx index 7106027..a359d19 100644 --- a/src/components/Legals.jsx +++ b/src/components/Legals.jsx @@ -15,7 +15,14 @@ function Legals(){ }/> </div> <div className={"div-son-legals"}> - <img src={item2} className={"item-son-legals"} /> + <motion.img + initial={{opacity: 0, scale: 0.9}} + whileInView={{opacity: 1, scale: 1}} + viewport={{once: true}} + transition={{duration: 2}} + src={item2} className={"item-son-legals"} > + + </motion.img> </div> diff --git a/src/components/Lights.jsx b/src/components/Lights.jsx index 5cdf306..b92acc0 100644 --- a/src/components/Lights.jsx +++ b/src/components/Lights.jsx @@ -13,7 +13,7 @@ function Lights(){ <h1 className={"title title-lights"} >Lumières</h1> <div className={"text-middle text-middle-light"} > <motion.img src={onde4} className={"light-onde4"}></motion.img> - <Container height={600} width={600} text={"Décibels c'est aussi de la lumière : " + "\n" + ""}/> + <Container classname={"container-light"} height={300} width={400} text={"Décibels c'est aussi de la lumière : " + "\n" + ""}/> </div> diff --git a/src/components/Son.jsx b/src/components/Son.jsx index 9cc37b3..88b93bb 100644 --- a/src/components/Son.jsx +++ b/src/components/Son.jsx @@ -15,25 +15,27 @@ function Son(){ <div className="page-son"> <h1 className={"title son-title"}>Son</h1> <div className={"text-middle"}> - <Container classname={"text-son"} height={600} width={600} text={"Décibels c'est de la technique du son " + "\n"+ - ""}/> - </div> - <motion.div - initial={{x: 150, opacity: 0.2, scale: 1, rotate: 0}} - whileInView={{x: 0, opacity: 1, scale: 1, rotate: 0}} - viewport={{once: true}} - transition={{duration: 3}} - > - <img src={item2} className={"item son"}/> - </motion.div> - <motion.div className={"vid1"} - initial={{x: 50, opacity: 0.5, scale: 1, rotate: 0}} + <Container classname={"text-son"} height={300} width={400} + text={"Décibels c'est de la technique du son " + "\n" + + ""}/> + <motion.div className={"vid1"} + initial={{x: 50, opacity: 0.5, scale: 1, rotate: 0}} whileInView={{x: 0, opacity: 1, scale: 1, rotate: 0}} viewport={{once: true}} transition={{duration: 2}} + > + <VideoComponent src={vid1} width={"38%"} height={"auto"}/> + </motion.div> + </div> + <motion.div + initial={{x: 150, opacity: 0.2, scale: 1, rotate: 0}} + whileInView={{x: 0, opacity: 1, scale: 1, rotate: 0}} + viewport={{once: true}} + transition={{duration: 3}} > - <VideoComponent src={vid1} width={"38%"} height={"auto"}/> - </motion.div> + <img src={item2} className={"item son"}/> + </motion.div> + <div> <motion.img src={item1} className={"item item1-son"} initial={{x: 150, opacity: 0.8, scale: 1, rotate: 90}} diff --git a/src/pages/MentionLegals.jsx b/src/pages/MentionLegals.jsx index 058e259..fa808c6 100644 --- a/src/pages/MentionLegals.jsx +++ b/src/pages/MentionLegals.jsx @@ -6,7 +6,12 @@ import decibels from "../ressources/decibels.png"; function MentionLegals(){ return(<> - <a href={"/"}><motion.img src={decibels} className={"logo-legals"}> + <a href={"/"}><motion.img + initial={{opacity: 0, scale: 0.7}} + whileInView={{opacity: 1, scale: 1}} + viewport={{once: true}} + transition={{duration: 1.5}} + src={decibels} className={"logo-legals"}> </motion.img></a> <Legals/> diff --git a/src/style/Lights.css b/src/style/Lights.css index cba6ca4..b4579d3 100644 --- a/src/style/Lights.css +++ b/src/style/Lights.css @@ -38,5 +38,9 @@ .light-onde4{ position: relative; z-index: 0; + margin-bottom: -4em; +} +.container-light{ + margin-top: -2em; } \ No newline at end of file diff --git a/src/style/Son.css b/src/style/Son.css index 62767b8..fe9996a 100644 --- a/src/style/Son.css +++ b/src/style/Son.css @@ -6,6 +6,7 @@ position: relative; display: block; z-index: 2; + margin-left: 10em; } .item{ @@ -22,8 +23,8 @@ .son{ position: absolute; - margin-left: 25%; - margin-top: -60%; + margin-left: 18em; + margin-top: -28em; } .text-son{ @@ -34,20 +35,20 @@ .vid1{ - position: absolute; + position: absolute; z-index: 3; - right: -35%; - top: 225%; - + margin-left: 43em; + margin-top: -30em; + width: 80%; } .son-onde2{ z-index: 1; position: absolute; width: 50%; - right: 5%; - bottom: -130em; -} + margin-right: 1em; + margin-left: 7em; + } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {