Développement web : Image loading Blur effet, avec HTML CSS & JS.
292
0
Mukaz
Jan,01,1970
L'effet de flouer est une technique souvent utilisée dans le design web pour créer une sensation de mouvement et d'atmosphère afin d'alléger le chargement du site. Dans cet article, nous allons apprendre à créer un effet blur simple en utilisant HTML, CSS et JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Loading Blur Effect</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="loader-container">
<div id="image" class="image">
<img src="background.jpg" class="center" />
</div>
<div id="number" class="number center">0</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
}
.loader-container {
height: 100vh;
width: 100vw;
position: relative;
}
.image {
position: relative;
height: 100vh;
}
.center {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.image img {
width: min(95%, 900px);
}
.number {
font-size: 50px;
font-family: "Poppins", sans-serif;
font-weight: 600;
color: #ffffff;
-webkit-text-stroke: 2px #000000;
}
JS
const imageElement = document.getElementById("image");
const numberElement = document.getElementById("number");
let count = 0;
const maxCount = 100;
const incrementLoader = () => {
//Check if count is less than maxCount
if (count < maxCount) {
count++;
//Update the text content of numberElement with the current count
numberElement.textContent = count + "%";
//Calculate the opacity as ratio of count to maxCount
const opacity = count / maxCount;
imageElement.style.opacity = opacity;
//Set a blue filter on imageElement with an amount that decreases as opacity increases
imageElement.style.filter = `blue($(10 - 10 * opacity)px)`;
} else if (count === maxCount) {
clearInterval(loaderInterval);
numberElement.textContent = "";
}
};
const loaderInterval = setInterval(incrementLoader, 60);
Et voilà 🙂en utilisant ce code de base, vous pouvez facilement créer un effet de flouer avec téléchargement sur les images de votre votre page web. N'hésitez pas à expérimenter avec les paramètres de flouer et les styles pour créer des effets uniques et visuellement attrayants.
