Have you ever noticed that while scrolling down a web page, the background image becomes blurred, and then a new image appears in the foreground? Have ever wondered how to make a background image blurred and then pop up your image on your portfolio?
In this post, we are going to learn this effect just by using HTML, CSS, and JavaScript.
All You need is a simple text editor and two images: one for the background and the other for the foreground.
first, let us see create the HTML structure.
HTML structure
- Create a folder, and open that folder in your favorite text editor.
- Add a
htmlfile,index.html, to the folder. This folder is your project’s root folder. - Enter the code below in the
index.htmlfile. - I have used a jpg image file (
gorilla.jpg) as the foreground image. you can use any image you need such as your profile image. - I have also used
mountain.jpgit as my background image. - make sure to put index.html and those two image files in the same root folder for this post.
<html>
<body>
<section class='demo'>
<h1>This is just for demo</h1>
</section>
<section class="bg-img-container">
<img class='bg-no-filter' id="bg-img" src="mountain.jpg"/>
</section>
<section id='profile'>
<img src="gorilla.jpg">
<p>if this is the year 3000...You may have forgotten me.<br />They considered me as endangered<br/>Few helped me; Most watched me<br/><b>Now..I am extinct. All I left for your 'kindness' is this beautiful mountains<br/>Please protect our mother...</p>
</section>
</body>
</html>Adding CSS
Now, time to add the CSS code. You can add this in a separate file( let’s say styles.css ) and link it in the index.html.`
<link rel="stylesheet" href="styles.css"><link rel=”stylesheet” href=”styles.css”>
If you wish to add the CSS code in the index.html, You should add the code between <style></style> Tags.
The most important thing in this CSS is that you need to position the background image as ‘absolute‘.
Note, that there are two CSS classes to make the image blurred and remove the blur effect.
*{
margin:0;
}
.demo{
height:100vh;
background-color:lightblue;
text-align:center;
margin:0;
}
.demo h1{
position:relative;
top:50%;
}
#bg-img{
position:absolute;
width: 100%;
height:100vh;
}
.bg-no-filter{
filter: blur(0);
}
.bg-img-filter{
filter: blur(15px);
}
#profile{
display: none;
margin:0 auto;
width: 35%;
border-radius:2%;
position:relative;
top:10em;
padding-top:50px;
padding-bottom:50px;
background:rgb(66,68,68,0.5);
text-align:center;
}
#profile p{
color:white;
font-size:20px;
font-weight:600;
text-shadow:2px 2px #FF0000;
font-family:Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
#profile img{
position:relative;
top:-12px;
border-radius: 50%;
width:15em;
height:15em;
opacity:0.6;
}Handling with JavaScript
The JavaScript code runs when the scroll event of the browser is triggered. Basically, what the code does is detect the pixels scrolling on Y-axis. And then, on a certain Y-coordinate, it applies CSS class with a filter on the background image while displaying the foreground image.
As you can see in the code below, the document.body.scrollTop and document.documentElement.scrollTop is used. The scrollTop property sets or returns the number of pixels the content of an element scrolls on the Y-axis. The code works fine only with document.body.scrollTop. According to this answer on StackOverflow, however, while some browsers such as Chrome and Safari have scrollTop defined in <body> element, other browsers such as Firefox define it on <html> the element.
However, when I do my experiments with this property, I did not find any concern in using document.body.scrollTop in Firefox. In fact, both Chrome and Firefox behaved in a similar manner. Anyway, just to be on the safe side, I included both document.body.scrollTop and document.documentElement.scrollTop in my code. You can read more on the scrollTop property here.
As with the CSS code, you can put the JavaScript code in a separate file( script.js ) or add it between the <script></script> tags in the index.html file.
window.onscroll = function() { effectsOnScroll();};
function effectsOnScroll() {
//console.log(document.documentElement.scrollTop )
//console.log( document.body.scrollTop );
//the value can change in your screen
if ( document.body.scrollTop > 755 || document.documentElement.scrollTop > 755 ) {
document.getElementById('profile').style.display = 'block';
document.getElementById('bg-img').className = 'bg-img-filter';
} else {
document.getElementById('profile').style.display = 'none';
document.getElementById('bg-img').className = 'bg-no-filter';
}
}If you have a concern using the scrollTop property, you can replace it with the window.scrollY property, a read-only property that returns the number of pixels the browser Window scrolling vertically, which is pretty much standard across all the browsers.
window.onscroll = function() { effectsOnScroll();};
function effectsOnScroll() {
//console.log(window.scrollY );
if ( window.scrollY > 755 ) { //the value can change in your screen
document.getElementById('profile').style.display = 'block';
document.getElementById('bg-img').className = 'bg-img-filter';
} else {
document.getElementById('profile').style.display = 'none';
document.getElementById('bg-img').className = 'bg-no-filter';
}
}Another way is to use an event listener to do the same job
window.addEventListener("scroll", event => {
// console.log( window.scrollY );
if ( window.scrollY > 755 ) { //the value can change in your screen
document.getElementById('profile').style.display = 'block';
document.getElementById('bg-img').className = 'bg-img-filter';
} else {
document.getElementById('profile').style.display = 'none';
document.getElementById('bg-img').className = 'bg-no-filter';
}
});Important Note: As you can see, in the above code snippets, I have commented on console.log statements. I did this intentionally so that you would know which value to use in the conditional statement.
depending on your set up this value could be different. For example, on a large screen monitor, it could be 755, and on a laptop, it could be 700.
Please do your experiments with this value. You can improve this code so that this value will be dynamic and will work in any screen size. I leave it as an exercise for you.