Я пытаюсь создать размытый фон, когда пользователь нажимает ссылку, которая переходит на другую страницу с тем же фоном, но размытым.
Это главная страница
<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>
Это страница, на которую ведет ссылка
<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>
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);
}
На главной странице есть div, и я пытался содержать ссылки на случай, если пользователь нажмет на конкретную ссылку (воспроизведение), это приведет к размытию фона. Однако фоновое изображение сфокусировано на теле, а не на div.
🤔 А знаете ли вы, что...
JavaScript можно использовать для создания анимаций и игр на веб-страницах.
Вы можете добавить класс a при нажатии на якорь, используя element.classList, затем add или toggle. Затем примените CSS к body.your-class.
Но если вам нужно перейти на другую страницу. Просто добавьте класс непосредственно к элементу на этой странице.
Чтобы добиться эффекта размытия фона при нажатии пользователем на ссылку «Играть», нужно изменить HTML и CSS. Вместо того, чтобы пытаться размыть определенный div, вы можете применить эффект размытия ко всему телу, а затем удалить его, когда пользователь вернется на домашнюю страницу. Вот как вы можете это сделать:
<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>
<script>
function toggle() {
document.body.classList.toggle('blurred');
}
</script>
body {
/* Your existing body styles */
transition: filter 0.5s ease;
}
body.blurred {
filter: blur(10px);
}
<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>
Выполнение этих шагов приведет к размытию фона домашней страницы, когда пользователь нажимает ссылку «Играть», а переход на страницу game.html удалит эффект размытия, создавая впечатление, что фон на домашней странице размывается отдельно.
Надеюсь, что это ответ на ваш вопрос!