Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed Animation and presentation class

Browse source
This commit is contained in:
Yohan Boujon 2023-06-18 23:54:21 +02:00
parent ad16090dea
commit 023b9606b5
3 changed files with 39 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
css/saoulbonmonsieur.css
View file

@ -6,16 +6,28 @@
} }
.presentation { .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%; width: 100%;
height: 100%; height: 100%;
} }
.photosaoul { .photosaoul {
width: 30%; max-width: inherit;
height: 30%; height: inherit;
float: right; float: right;
z-index:10; z-index:10;
rotate: 0deg; display: none;
margin-right: -30rem; margin-top: auto;
} }

6
index.html
View file

@ -16,10 +16,14 @@
<body> <body>
<Navbar></Navbar> <Navbar></Navbar>
<div class="presentation"> <div class="presentation">
<div class="presentation-text">
<h1>Saoul Bonmonsieur</h1> <h1>Saoul Bonmonsieur</h1>
<img class="photosaoul" src="assets/saoul.png"></img>
<button onclick="superAnim()">Animate !</button> <button onclick="superAnim()">Animate !</button>
</div> </div>
<div class="presentation-img">
<img class="photosaoul" src="assets/saoul.png"></img>
</div>
</div>
</body> </body>
</html> </html>

19
js/index.js
View file

@ -1,10 +1,21 @@
var saoulAnimation = anime({ var saoulAnimation = anime({
targets: '.photosaoul', targets: '.photosaoul',
autoplay: false, easing: 'easeOutQuint',
rotate: -30, translateX: [
translateX: -380, {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() { function superAnim() {
saoulAnimation.restart(); saoulAnimation.restart()
} }