Comment réaliser une page html animée ?
Ma cliente souhaitait un site original et animée. Me voilà donc parti avec ma page blanche et vide à coder à la main comme au bon vieux temps, du travail mais pari réussi, avec une page d’accueil originale et sur mesure.
Je vous livre ici quelques éléments de départ pouvant être utilisés facilement afin de réaliser vos propres pages html animées.
Le html tout simple
<!doctype html>
<html>
<head>
<meta charset= »utf-8″>
<title>Naturo Bien – Naturopathe Montpellier</title>
<link href= »https://fonts.googleapis.com/css?family=Sacramento&display=swap » rel= »stylesheet »>
<link href= »style.css » rel= »stylesheet » type= »text/css »>
</head>
<body>
<div class= »container » align= »top »>
<div class= »bird-container bird-container–one »>
<div class= »bird bird–one »></div>
</div>
<div class= »bird-container bird-container–two »>
<div class= »bird bird–two »></div>
</div>
<div class= »bird-container bird-container–three »>
<div class= »bird bird–three »></div>
</div>
<div class= »bird-container bird-container–four »>
<div class= »bird bird–four »></div>
</div>
</div>
<div class= »center »>
<h1 class= »animated-text »>Naturo’Bien</h1>
<div class= »slogan »>Un temps pour prendre soin de soi !</div>
</div>
</div>
<div class= »flower-container »><a href= »https://naturo-bien.fr/naturopathe/ »><img class= »flower » src= »https://naturo-bien.fr/coquelicot-logo.png » alt= »Fleur »></a>
</div>
<div class= »pulse »> <a href= »https://naturo-bien.fr/naturopathe/ »>Visiter</a></div>
<div class= »footer »>
<div><a href= »https://www.s-designer.com » target= »_blank »>© www.s-designer.com</a></div>
</div>
</body>
</html>
Le css
/* Réinitialisation des marges et des rembourrages */
html, body {
margin: 0;
padding: 0;
height: 100%;
position: relative;
overflow-x: hidden;
}
/* Utilisation de flexbox pour caler le contenu en haut et le footer en bas */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
background-image: url("https://naturo-bien.fr/fond-nature.jpg");
background-size: cover;
background-position: center bottom;
background-attachment: fixed;
z-index: 6;
}
.center {
text-align: center;
}
.pulse:visited {
text-decoration: none; /* Supprime le soulignement */
color: #ffffff; /* Définit la couleur du texte en blanc */
}
.pulse {
text-decoration: none;
text-align: center;
margin: 0 auto; /* Supprimez la marge supérieure */
color: #ffffff;
background: #569e3a;
padding: 12px 24px;
border-radius: 5px;
box-shadow: 0 0 0 0 rgba(62, 115, 185);
animation: pulse-animation 3s infinite ease-in-out;
position: absolute;
left: 47%;
top: 50%;
/* transform: translate(-50%, -50%); */
}
@keyframes pulse-animation {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(102, 153, 51);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 10px 10px rgba(102, 153, 51, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(102, 153, 51);
}
}
.animated-text {
font-family: 'Sacramento', cursive;
font-size: 34px;
font-weight:400;
color: #008037;
opacity: 0;
animation-name: fadeIn;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-delay: 3s; /* Ajout du délai de 2 secondes */
}
.slogan {
font-size: 1.5em !important;
color: #213f77; /* Couleur du texte en blanc */
opacity: 0;
animation-name: fadeIn;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-delay: 4s; /* Ajout du délai de 2 secondes */
}
.footer {
position: fixed;
bottom: 0;
left: 50%;
right: 50%;
background-color: transparent; /* Fond transparent */
padding: 0px;
text-align: center;
z-index: 9999;
font-size: 1em;
}
.footer a {
text-decoration: none;
color: #ffffff;
}
.footer a:hover {
color: #000000;
}
Le site ici : https://naturo-bien.fr/