From 023b9606b5f12d16888b5fec52839c2bad405474 Mon Sep 17 00:00:00 2001 From: Yohan Boujon Date: Sun, 18 Jun 2023 23:54:21 +0200 Subject: [PATCH] Fixed Animation and presentation class --- css/saoulbonmonsieur.css | 22 +++++++++++++++++----- index.html | 10 +++++++--- js/index.js | 19 +++++++++++++++---- 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/css/saoulbonmonsieur.css b/css/saoulbonmonsieur.css index 8ad4486..4bd27ec 100644 --- a/css/saoulbonmonsieur.css +++ b/css/saoulbonmonsieur.css @@ -6,16 +6,28 @@ } .presentation { - overflow: visible; + overflow: hidden; + width: 100%; + height: 30rem; + display: flex; +} + +.presentation-text { + margin: 14rem 2rem; + padding: 0 0 0 2rem; + width: 100%; +} + +.presentation-img { width: 100%; height: 100%; } .photosaoul { - width: 30%; - height: 30%; + max-width: inherit; + height: inherit; float: right; z-index:10; - rotate: 0deg; - margin-right: -30rem; + display: none; + margin-top: auto; } \ No newline at end of file diff --git a/index.html b/index.html index a781067..6224a4a 100644 --- a/index.html +++ b/index.html @@ -16,9 +16,13 @@
-

Saoul Bonmonsieur

- - +
+

Saoul Bonmonsieur

+ +
+
+ +
diff --git a/js/index.js b/js/index.js index 2d151ca..fb92672 100644 --- a/js/index.js +++ b/js/index.js @@ -1,10 +1,21 @@ var saoulAnimation = anime({ targets: '.photosaoul', - autoplay: false, - rotate: -30, - translateX: -380, + easing: 'easeOutQuint', + translateX: [ + {value: 0, duration: 100, delay: 0 }, + {value: "100%", duration: 600, delay: 100 } + ], + rotate : [ + {value: 0, duration: 100, delay: 0 }, + {value: 30, duration: 600, delay: 100 } + ], + begin: function () { + document.getElementsByClassName("photosaoul")[0].style.display = "flex"; + }, }); +saoulAnimation.reverse() + function superAnim() { - saoulAnimation.restart(); + saoulAnimation.restart() } \ No newline at end of file