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"> <nav id="navbar_component">
<p>Saul Bon Monsieur</p> <p>Saoul Bon Monsieur</p>
</nav> </nav>
<div id="navbar_padding"></div> <div id="navbar_padding"></div>

1
css/navbar.css
View file

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

16
css/saoulbonmonsieur.css
View file

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

8
index.html
View file

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

2
js/componentloader.js
View file

@ -12,5 +12,5 @@ function load(url, element) {
} }
window.addEventListener('load', function () { 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({ var saoulAnimation = anime({
targets: '.test', targets: '.photosaoul',
autoplay: false, autoplay: false,
translateX: 250, rotate: -30,
translateX: -380,
}); });
function superAnim() { function superAnim() {
carreAnim.restart(); saoulAnimation.restart();
carreAnim.anime();
} }