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

2
css/navbar.css
View file

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

31
css/saoulbonmonsieur.css
View file

@ -5,29 +5,56 @@
scroll-behavior: smooth; 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 { .presentation {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 30rem; height: 30rem;
display: flex; display: flex;
background-image: url("../assets/cabinet-avocats-900x601.jpeg");
background-position-y: 100%;
background-size: cover;
position: relative;
} }
.presentation-text{ .presentation-text{
width: 100%;
margin: 14rem 2rem; margin: 14rem 2rem;
padding: 0 0 0 2rem; padding: 0 0 0 2rem;
width: 100%; z-index:1;
} }
.presentation-img { .presentation-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index:10;
} }
.photosaoul { .photosaoul {
max-width: inherit; max-width: inherit;
height: inherit; height: inherit;
float: right; float: right;
z-index:10;
display: none; display: none;
margin-top: auto; 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> <title>Saoul Bonmonsieur | Site Web Officiel</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="lib/anime.min.js"></script> <script src="lib/anime.min.js"></script>
<script src="js/componentloader.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"> <link href="css/saoulbonmonsieur.css" rel="stylesheet">
</head> </head>
<body> <body>
<Navbar></Navbar> <Navbar></Navbar>
<div class="presentation"> <div class="presentation">
<div class="presentation-text"> <div class="presentation-text anim-text">
<h1>Saoul Bonmonsieur</h1> <h1>Saoul Bonmonsieur</h1>
<button onclick="superAnim()">Animate !</button> <p>Avocat sur loi de Toulouse</p>
</div> </div>
<div class="presentation-img"> <div class="presentation-img">
<img class="photosaoul" src="assets/saoul.png"></img> <img class="photosaoul" src="assets/saoul.png"></img>
</div> </div>
<div class="whiteband"></div>
</div> </div>
</body> </body>

11
js/componentloader.js
View file

@ -14,3 +14,14 @@ function load(url, element) {
window.addEventListener('load', function () { window.addEventListener('load', function () {
load("../components/navbar.html", document.getElementsByTagName("Navbar")[0]); 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', targets: '.photosaoul',
easing: 'easeOutQuint', easing: 'easeOutQuint',
translateX: [ translateX: [
{value: 0, duration: 100, delay: 0 }, {value: "", duration: 100, delay: 0 },
{value: "100%", duration: 600, delay: 100 } {value: "130%", duration: 1000, delay: 100 }
], ],
rotate : [ rotate : [
{value: 0, duration: 100, delay: 0 }, {value: 0, duration: 100, delay: 0 },
{value: 30, duration: 600, delay: 100 } {value: -60, duration: 1000, delay: 100 }
], ],
begin: function () { begin: function () {
document.getElementsByClassName("photosaoul")[0].style.display = "flex"; 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() saoulAnimation.reverse()
ready(function(){
setTimeout(() => {
saoulAnimation.play();
whiteBandAnimation.play();
textAnimation.play();
}, 1000);
});
function superAnim() { function superAnim() {
saoulAnimation.restart() saoulAnimation.play()
} }