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 {
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;
}

10
index.html
View file

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

19
js/index.js
View file

@ -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()
}