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

balise Navbar, placement de ma grosse tête

Browse source
This commit is contained in:
Yohan Boujon 2023-06-18 20:14:24 +02:00
parent dd303c50f4
commit ad16090dea
6 changed files with 27 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/navbar.html
View file

@ -1,4 +1,4 @@
<nav id="navbar_component">
<p>Saul Bon Monsieur</p>
<p>Saoul Bon Monsieur</p>
</nav>
<div id="navbar_padding"></div>

1
css/navbar.css
View file

@ -7,6 +7,7 @@
top: 0;
width: 100%;
background-color: #f5a122;
z-index:0;
}
#navbar_padding{

16
css/saoulbonmonsieur.css
View file

@ -5,7 +5,17 @@
scroll-behavior: smooth;
}
.test {
width: 15%;
height: 15%;
.presentation {
overflow: visible;
width: 100%;
height: 100%;
}
.photosaoul {
width: 30%;
height: 30%;
float: right;
z-index:10;
rotate: 0deg;
margin-right: -30rem;
}

10
index.html
View file

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

2
js/componentloader.js
View file

@ -12,5 +12,5 @@ function load(url, element) {
}
window.addEventListener('load', function () {
load("../components/navbar.html", document.getElementById("navbar"));
load("../components/navbar.html", document.getElementsByTagName("Navbar")[0]);
})

10
js/index.js
View file

@ -1,10 +1,10 @@
var carreAnim = anime({
targets: '.test',
var saoulAnimation = anime({
targets: '.photosaoul',
autoplay: false,
translateX: 250,
rotate: -30,
translateX: -380,
});
function superAnim() {
carreAnim.restart();
carreAnim.anime();
saoulAnimation.restart();
}