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

Added text animation and a background image

Browse source
This commit is contained in:
Yohan Boujon 2023-06-19 02:07:08 +02:00
parent 023b9606b5
commit 16294ee25f
7 changed files with 85 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/cabinet-avocats-900x601.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 77 KiB

2
components/navbar.html
View file

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

2
css/navbar.css
View file

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

31
css/saoulbonmonsieur.css
View file

@ -5,29 +5,56 @@
scroll-behavior: smooth;
}
h1 {
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
p {
font-family: 'Josefin Sans', sans-serif;
}
.anim-text {
display: none;
opacity: 0;
}
.presentation {
overflow: hidden;
width: 100%;
height: 30rem;
display: flex;
background-image: url("../assets/cabinet-avocats-900x601.jpeg");
background-position-y: 100%;
background-size: cover;
position: relative;
}
.presentation-text{
width: 100%;
margin: 14rem 2rem;
padding: 0 0 0 2rem;
width: 100%;
z-index:1;
}
.presentation-img {
width: 100%;
height: 100%;
z-index:10;
}
.photosaoul {
max-width: inherit;
height: inherit;
float: right;
z-index:10;
display: none;
margin-top: auto;
}
.whiteband {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(16px);
height: 10rem;
top: 40%;
z-index:0;
position: absolute;
}

14
index.html
View file

@ -5,24 +5,30 @@
<title>Saoul Bonmonsieur | Site Web Officiel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="lib/anime.min.js"></script>
<script src="js/componentloader.js"></script>
<link href="css/navbar.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/saoulbonmonsieur.css" rel="stylesheet">
</head>
<body>
<Navbar></Navbar>
<div class="presentation">
<div class="presentation-text">
<div class="presentation-text anim-text">
<h1>Saoul Bonmonsieur</h1>
<button onclick="superAnim()">Animate !</button>
<p>Avocat sur loi de Toulouse</p>
</div>
<div class="presentation-img">
<img class="photosaoul" src="assets/saoul.png"></img>
</div>
<div class="whiteband"></div>
</div>
</body>

11
js/componentloader.js
View file

@ -14,3 +14,14 @@ function load(url, element) {
window.addEventListener('load', function () {
load("../components/navbar.html", document.getElementsByTagName("Navbar")[0]);
})
function ready(callback){
// in case the document is already rendered
if (document.readyState!='loading') callback();
// modern browsers
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') callback();
});
}

34
js/index.js
View file

@ -2,20 +2,46 @@ var saoulAnimation = anime({
targets: '.photosaoul',
easing: 'easeOutQuint',
translateX: [
{value: 0, duration: 100, delay: 0 },
{value: "100%", duration: 600, delay: 100 }
{value: "", duration: 100, delay: 0 },
{value: "130%", duration: 1000, delay: 100 }
],
rotate : [
{value: 0, duration: 100, delay: 0 },
{value: 30, duration: 600, delay: 100 }
{value: -60, duration: 1000, delay: 100 }
],
begin: function () {
document.getElementsByClassName("photosaoul")[0].style.display = "flex";
},
});
var whiteBandAnimation = anime({
targets: '.whiteband',
easing: 'easeInExpo',
width: "100%",
duration: 2200,
})
var textAnimation = anime({
targets: '.anim-text',
easing: 'easeInOutExpo',
opacity : [
{value: 0, duration: 2000, delay: 0 },
{value: 100, duration: 1000, delay: 100 }
],
begin: function () {
document.getElementsByClassName("anim-text")[0].style.display = "block";
},
})
saoulAnimation.reverse()
ready(function(){
setTimeout(() => {
saoulAnimation.play();
whiteBandAnimation.play();
textAnimation.play();
}, 1000);
});
function superAnim() {
saoulAnimation.restart()
saoulAnimation.play()
}