Question 212705 in Html Question posted in
Some basic documentation can be found here.

Html – How do I blur the whole web page by clicking the link?

I’m trying to create a blurred background when the user clicks on the link that navigates to another page which is the same background but blurred.

This is the main page

<body>
    
    <div class = "container">
        <header>
            <h2 class = "logo">Logo</h2>
            <nav class = "navigation">
                <a href="game.html" onclick = "toggle()">Play</a>
                <a href="#">Book</a>
                <a href="#">Memo</a>
                <a href="#">Quote</a>
                <button id = 'playSound' onclick="sound()">
                Music: Off
                </button>
              
            </nav>
           
        </header>
    </div>
        <audio id="audio" loop>
            <source src="September.mp3" type="audio/mpeg">
                  </audio>
        
      <!--<div class = 'circle'></div> -->  
        

        <script>
           
            function sound(){
                var web_audio = document.getElementById('audio')
                if(web_audio.paused){
                    audio.play()
                    playSound.innerHTML = 'Music: On'
                }
                else{
                    audio.pause()
                    playSound.innerHTML = 'Music: Off'
                }
            }
           
            function toggle(){
                var blur = document.getElementById('blur');
                blur.classList.toggle('active')
            }
           
           
          </script>
</body>

This is the page the link navigates to

<body>
    
   
        <header>
            <h2 class = "logo">Logo</h2>
            <nav class = "navigation">
                <a href="game.html">Play</a>
                <a href="#">Book</a>
                <a href="#">Memo</a>
                <a href="#">Quote</a>
                <button id = 'playSound' onclick="sound()">
                Music: Off
                </button>
              
            </nav>
           
        </header>
    
       
        <audio id="audio" loop>
            <source src="September.mp3" type="audio/mpeg">
                  </audio>
        
      <!--<div class = 'circle'></div> -->  
        

        <script>
           
            function sound(){
                var web_audio = document.getElementById('audio')
                if(web_audio.paused){
                    audio.play()
                    playSound.innerHTML = 'Music: On'
                }
                else{
                    audio.pause()
                    playSound.innerHTML = 'Music: Off'
                }
            }

           
           

           
          </script>
          
</body>

The css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Georgia, 'Times New Roman', Times, serif;

}

body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url('art.jpg') no-repeat;
background-size: cover;
background-position:center ;

}


.container#blur.active{
filter:blur(20px);
}

header {
position: fixed;
top:0;
left:0;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99;
}

.logo{
font-size: 2em;
color: #fff;
user-select: none;
}

.navigation a {
position: relative;
font-size: 1.1em;
color: #fff;
text-decoration: none;
font-weight: 500;
margin-left: 40px;

}

.navigation a::after{
content: '';
position: absolute;
width: 100%;
height:3px;
background: #fff;
border-radius: 5px;
transform-origin: right;
left:0;
bottom: -6px;
transform: scaleX(0);
transition: transform .5s;
}

.navigation a:hover::after{
transform: scaleX(1);
transform-origin: left;
}

.navigation #playSound {
width: 130px;
height: 50px;
background: transparent;
border: 2px solid #fff;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
color: #fff;
font-weight: 500;
margin-left: 40px;
}

.navigation #playSound:hover{
background: #fff;
color: #162938;
}

/*.circle{
background-color: aliceblue;
height: 150px;
width: 160px;
border-radius: 50%;
position: relative;
opacity: 0.6;
}*/

.block.active{
filter: blur(2px);
}

The main page has div and I tried to contain the links in case when the user clicks on the specific link (play) it would blur the background. However, the background image is focused on the body not on a div.

Tags:

2

Answers


  1. 0

    You could add the a class when the anchor is clicked using element.classList thenadd or toggle. Then apply the css to body.your-class.
    But if you need to move to another page. Just directly add the class to the element in that page.

    Login or Signup to reply.
  2. 0

    Implementation

    To achieve the effect of blurring the background when the user clicks on the "Play" link, you need to change the HTML and CSS. Instead of trying to blur a specific div, you can apply the blur effect to the entire body and then remove it when the user navigates back to the home page. You can do it:

    1. Edit the main page (index.html) to use a link with the ‘onclick’ event to toggle the blur effect:
    <body>
    <div class="container">
        <!-- ... Your header and other content ... -->
        <a href="game.html" onclick="toggle()">Play</a>
        <!-- ... Other links ... -->
    </div>

    <!-- Rest of your content and script ... -->
</body>
    1. Add function to toggle body blur:
    <script>
    function toggle() {
        document.body.classList.toggle('blurred');
    }
</script>
    1. Edit the CSS to add a blur class to apply a blur effect to the body:
    body {
    /* Your existing body styles */
    transition: filter 0.5s ease;
}

body.blurred {
    filter: blur(10px);
}
    1. In game.html (the linked page), you can remove the "blur" class from the body to remove the blur effect:
    <body>
    <header>
        <!-- ... Your header and other content ... -->
    </header>

    <!-- Rest of your content and script ... -->

    <script>
        // Remove the 'blurred' class when the page loads
        document.body.classList.remove('blurred');
    </script>
</body>

    Doing these steps will blur the home page background when the user clicks on the "Play" link, while going to the game.html page will remove the blur effect, giving the impression that the background on the home page is blurred separately.

    Hope this answers your question!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search