Step-by-step tutorial on implementing Image Blurry Loading Effect using HTML, CSS, and JavaScript.
Table of Contents
Blurry loading effects have become crucial in modern web design, offering a visually appealing transition during the loading of images. This subtle yet impactful technique not only adds an aesthetic touch to your website but also provides users with a clear indication that content is on its way. In this comprehensive guide, we'll explore the step-by-step process of creating a captivating blurry loading effect using HTML, CSS, and JavaScript. By the end of this tutorial, you'll have the skills to elevate your web design and improve user experience through this dynamic loading approach. Let's dive in!
Source Code
Step 1 (HTML Code):
Ensure a solid foundation for your project. Create a well-structured HTML file to accommodate the Blurry Loading Effect seamlessly.
- Create a new HTML file.
- Define the essential structure with HTML5 elements.
Let's break down each part:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used, which is HTML5 in this case.
2. <html lang="en">: This opening tag signifies the beginning of the HTML document. The lang="en" attribute indicates that the document is written in English.
3. <head>: This section contains metadata about the HTML document, such as character set, viewport settings, and the title of the page.
- <meta charset="UTF-8">: Sets the character encoding to UTF-8, which supports a wide range of characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used to specify the version of Internet Explorer to be used (in this case, the latest version).
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport settings for better responsiveness on different devices.
- <title>Blurry Loading Effect</title>: Sets the title of the web page, which typically appears in the browser tab or window.
- <link rel="stylesheet" href="styles.css">: Links to an external CSS stylesheet (styles.css) to apply styles to the HTML document.
4. <body>: This is the main content of the HTML document.
- <section class="bg"></section>: Defines a section with the class "bg," which is intended for styling purposes.
- <div class="loading-text">0%</div>: Creates a div element with the class "loading-text" that contains the text "0%." This element will be used to display a loading progress indicator.
- <script src="script.js"></script>: Links to an external JavaScript file (script.js) to include dynamic functionality in the web page.
Step 2 (CSS Code):
Bring your loading screen to life with stylish CSS. Add the desired blur and other aesthetic touches to make your loading animation visually appealing.
- Link your HTML file to a CSS stylesheet.
- Define the key styling rules for the loading effect.
Let's break down each part:
1. * { box-sizing: border-box; }: This rule applies the box-sizing: border-box; property to all elements (*). It ensures that the total width and height of an element include padding and border, not just the content.
2. body { ... }: Styles applied to the <body> element.
- display: flex;: Sets the display property to flex, allowing for flexible box layout.
- align-items: center;: Centers the content vertically within the flex container.
- justify-content: center;: Centers the content horizontally within the flex container.
- height: 100vh;: Sets the height of the body to 100% of the viewport height (vh stands for viewport height).
- margin: 0;: Removes any default margin on the body element.
3. .bg { ... }: Styles applied to elements with the class "bg."
- background-image: url('...');: Sets a background image for the element, using the provided URL.
- background-repeat: no-repeat;: Prevents the background image from repeating.
- background-size: cover;: Ensures the background image covers the entire element.
- position: absolute;: Positions the element absolutely within its containing element.
- top: -30px; left: -30px;: Shifts the element 30 pixels up and left from its normal position.
- width: calc(100vw + 60px); height: calc(100vh + 60px);: Sets the width and height of the element to be 60 pixels larger than the viewport width and height.
- z-index: -1;: Places the element behind other content (negative z-index).
- filter: blur(0px);: Initially sets no blur on the background image.
4. .loading-text { ... }: Styles applied to elements with the class "loading-text."
- color: #fff;: Sets the text color to white.
- font-size: 50px;: Sets the font size to 50 pixels.
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.bg {
background-image: url('https://images.pexels.com/photos/161254/snow-romantic-village-snowy-161254.jpeg?auto=compress&cs=tinysrgb&w=1920');
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: -30px;
left: -30px;
width: calc(100vw + 60px);
height: calc(100vh + 60px);
z-index: -1;
filter: blur(0px);
}
.loading-text {
color: #fff;
font-size: 50px;
} Step 3 (JavaScript Code):
Make your loading effect dynamic with JavaScript. Add functionality to control the blur intensity and create a smooth transition.
- Link your HTML file to a JavaScript file.
- Implement the JavaScript logic for dynamic loading.
Let's break down each part:
1. const loadText = document.querySelector('.loading-text'); and const bg = document.querySelector('.bg');: These lines of code select HTML elements with the classes "loading-text" and "bg" and store them in the variables loadText and bg, respectively. These elements are the loading text and background of the webpage.
2. let load = 0;: Initializes a variable load to 0, representing the initial loading progress.
3. let int = setInterval(blurring, 30);: Creates an interval (setInterval) that repeatedly calls the blurring function every 30 milliseconds. This interval is stored in the variable int.
4. function blurring() { ... }: Defines the blurring function that is called at regular intervals.
- load++;: Increments the load variable, representing the loading progress.
- if(load > 99) { ... }: Checks if the loading progress has reached 100%.
- clearInterval(int);: Clears the interval, stopping the blurring effect.
- setTimeout(() => { ... }, 2000);: Sets a timeout to reset the loading progress to 0 and restart the blurring effect after a delay of 2000 milliseconds (2 seconds).
- loadText.innerText = load + '%';: Updates the text content of the loading text element with the current loading progress.
- loadText.style.opacity = scale(load, 0, 100, 1, 0);: Adjusts the opacity of the loading text based on the loading progress using a scaling function (scale). As the loading progresses from 0 to 100, the opacity decreases from 1 to 0.
- bg.style.filter = blur(${scale(load, 0, 100, 30, 0)}px);: Applies a blur effect to the background element (bg) based on the loading progress. The scale function is used to map the loading progress from 0 to 100 to a blur range of 30px to 0px.
5. const scale = (num, in_min, in_max, out_min, out_max) => { ... }: Defines a helper function scale that scales a given number (num) from one range to another. This function is used to adjust opacity and blur values based on the loading progress.
const loadText = document.querySelector('.loading-text');
const bg = document.querySelector('.bg');
let load = 0;
let int = setInterval(blurring, 30);
function blurring() {
load++;
if(load > 99) {
clearInterval(int);
setTimeout(() => {
load = 0;
int = setInterval(blurring, 30);
}, 2000);
}
loadText.innerText = load + '%';
loadText.style.opacity = scale(load, 0, 100, 1, 0);
bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
}
const scale = (num, in_min, in_max, out_min, out_max) => {
return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}Final Output:
See the Pen Image Blurry Loading Effect by Faraz (@codewithfaraz) on CodePen.
Conclusion:
In conclusion, mastering the art of blurry image loading can significantly elevate your web design. By combining HTML, CSS, and JavaScript, you can create visually stunning and user-friendly loading effects that leave a lasting impression on your audience. Start implementing these techniques today and enhance the overall experience of your website.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
