Reverse fade effect on mouseleave with keyframes
Question
I asked a similar question a couple days ago, however I have been working on the project a bit more and got stuck at another problem. The project is that when the mouse is hovering over a button the background switches to another image. I have added a fade-in effect with @keyframes however it only works on they way in and I can't seem to work out the solution. I'm also not sure why the background is flashing at the first hover over the button. Is it just loading time for the image? It happens when I download it and link it locally also. You can see my code and snippet below, thanks for the help!
const switcheroo = document.getElementById('wrapper'); const btn1 = document.getElementById('btn1'); const btn2 = document.getElementById('btn2'); const btn3 = document.getElementById('btn3'); btn1.addEventListener('mouseenter', e => { switcheroo.classList.add('keyimg1'); }); btn1.addEventListener('mouseleave', e => { switcheroo.classList.remove('keyimg1'); }); btn2.addEventListener('mouseenter', e => { switcheroo.classList.add('keyimg2'); }); btn2.addEventListener('mouseleave', e => { switcheroo.classList.remove('keyimg2'); }); btn3.addEventListener('mouseenter', e => { switcheroo.classList.add('keyimg3'); }); btn3.addEventListener('mouseleave', e => { switcheroo.classList.remove('keyimg3'); });
*,*::before,*::after { box-sizing: border-box; padding: 0; margin: 0; } #wrapper{ height: 100vh; width: 100%; background-position: center center; background-size: cover; backface-visibility: hidden; background-image: url('https://wallpaperaccess.com/full/2029165.jpg'); } #keydefault{ -webkit-animation: imgdefault.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; }.keyimg1{ -webkit-animation: img1.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; }.keyimg2{ -webkit-animation: img2.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; }.keyimg3{ -webkit-animation: img3.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes img1{ 100%{ background-image: url('https://wallpapercave.com/wp/wp2618282.png'); } } @-webkit-keyframes img2{ 100%{ background-image: url('https://images8.alphacoders.com/926/thumb-1920-926492.jpg'); } } @-webkit-keyframes img3{ 100%{ background-image: url('https://external-preview.redd.it/btq3MWGxjKZFzuASimEuCb0PyvKuHAy1eHEmSWtF5fQ.jpg?auto=webp&s=2735c13f57c7b901336437489322694533d1d3dd'); } } @-webkit-keyframes imgdefault{ 100%{ background-image: url('https://wallpapercave.com/wp/wp2618282.png'); } }.ulwrapper{ display: flex; height: 100vh; align-items: center; } ul{ display: flex; width: 100%; height: 4rem; } li{ margin: auto; cursor: pointer; } li a{ font-size: large; font-weight: bolder; text-decoration: none; color: black; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id='wrapper'> <div class="ulwrapper"> <ul> <li id="btn1"><a>Button1</a></li> <li id="btn2"><a>Button2</a></li> <li id="btn3"><a>Button3</a></li> </ul> </div> </div> <script src="app.js"></script> </body> </html>
2 answers
solution1
1 2021-01-07 17:46:01
Here's a solution, you can add another class on mouseleave in js, and this time have the keyframes go from that current background image, back to the default one. Take a look:
const switcheroo = document.getElementById('wrapper'); const btn1 = document.getElementById('btn1'); const btn2 = document.getElementById('btn2'); const btn3 = document.getElementById('btn3'); btn1.addEventListener('mouseenter', e => { switcheroo.classList.add('keyimg1'); }); btn1.addEventListener('mouseleave', e => { switcheroo.classList.remove('keyimg1'); switcheroo.classList.remove('keydefault1'); switcheroo.classList.remove('keydefault2'); switcheroo.classList.remove('keydefault3'); switcheroo.classList.add('keydefault1'); }); btn2.addEventListener('mouseenter', e => { switcheroo.classList.add('keyimg2'); }); btn2.addEventListener('mouseleave', e => { switcheroo.classList.remove('keyimg2'); switcheroo.classList.remove('keydefault1'); switcheroo.classList.remove('keydefault2'); switcheroo.classList.remove('keydefault3'); switcheroo.classList.add('keydefault2'); }); btn3.addEventListener('mouseenter', e => { switcheroo.classList.add('keyimg3'); }); btn3.addEventListener('mouseleave', e => { switcheroo.classList.remove('keyimg3'); switcheroo.classList.remove('keydefault1'); switcheroo.classList.remove('keydefault2'); switcheroo.classList.remove('keydefault3'); switcheroo.classList.add('keydefault3'); });
*,*::before,*::after { box-sizing: border-box; padding: 0; margin: 0; } #wrapper{ height: 100vh; width: 100%; background-position: center center; background-size: cover; backface-visibility: hidden; background-image: url('https://wallpaperaccess.com/full/2029165.jpg'); }.keydefault1{ -webkit-animation: imgdefault1.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; }.keydefault2{ -webkit-animation: imgdefault2.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; }.keydefault3{ -webkit-animation: imgdefault3.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; }.keyimg1{ -webkit-animation: img1.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; }.keyimg2{ -webkit-animation: img2.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; }.keyimg3{ -webkit-animation: img3.5s linear 0s; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes img1{ 100%{ background-image: url('https://wallpapercave.com/wp/wp2618282.png'); } } @-webkit-keyframes img2{ 100%{ background-image: url('https://images8.alphacoders.com/926/thumb-1920-926492.jpg'); } } @-webkit-keyframes img3{ 100%{ background-image: url('https://external-preview.redd.it/btq3MWGxjKZFzuASimEuCb0PyvKuHAy1eHEmSWtF5fQ.jpg?auto=webp&s=2735c13f57c7b901336437489322694533d1d3dd'); } } @-webkit-keyframes imgdefault1{ 0% {background-image: url('https://wallpapercave.com/wp/wp2618282.png'); } 100%{ background-image: url('https://wallpaperaccess.com/full/2029165.jpg'); } } @-webkit-keyframes imgdefault2{ 0% {background-image: url('https://images8.alphacoders.com/926/thumb-1920-926492.jpg'); } 100%{ background-image: url('https://wallpaperaccess.com/full/2029165.jpg'); } } @-webkit-keyframes imgdefault3{ 0% {background-image: url('https://external-preview.redd.it/btq3MWGxjKZFzuASimEuCb0PyvKuHAy1eHEmSWtF5fQ.jpg?auto=webp&s=2735c13f57c7b901336437489322694533d1d3dd'); } 100%{ background-image: url('https://wallpaperaccess.com/full/2029165.jpg'); } }.ulwrapper{ display: flex; height: 100vh; align-items: center; } ul{ display: flex; width: 100%; height: 4rem; } li{ margin: auto; cursor: pointer; } li a{ font-size: large; font-weight: bolder; text-decoration: none; color: black; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id='wrapper'> <div class="ulwrapper"> <ul> <li id="btn1"><a>Button1</a></li> <li id="btn2"><a>Button2</a></li> <li id="btn3"><a>Button3</a></li> </ul> </div> </div> <script src="app.js"></script> </body> </html>
Also the reason for your blinking is because the page is loading that large image for the first time and it takes a split second to load.
solution2
0 ACCPTED 2021-01-07 18:40:11
There were many duplicates in your code that can be shortened by using a collection with a class and the forEach() method in javascript .
I changed your buttons like class="btn" :
<ul>
<li class="btn"><a>Button1</a></li>
<li class="btn"><a>Button2</a></li>
<li class="btn"><a>Button3</a></li>
</ul>
Next, I removed the keyframes from the css. Instead of all these keyframes, you can specify transition: all.5s ease-in-out to #wrapper .
I used the forEach() method in conjunction with style.backgroundImage . And an array of images:
let images = ['https://wallpapercave.com/wp/wp2618282.png', 'https://images8.alphacoders.com/926/thumb-1920-926492.jpg', 'https://external-preview.redd.it/btq3MWGxjKZFzuASimEuCb0PyvKuHAy1eHEmSWtF5fQ.jpg?auto=webp&s=2735c13f57c7b901336437489322694533d1d3dd'];
And your code is much smaller.
let switcheroo = document.getElementById('wrapper'); let btn = document.querySelectorAll('.btn'); let images = ['https://wallpapercave.com/wp/wp2618282.png', 'https://images8.alphacoders.com/926/thumb-1920-926492.jpg', 'https://external-preview.redd.it/btq3MWGxjKZFzuASimEuCb0PyvKuHAy1eHEmSWtF5fQ.jpg?auto=webp&s=2735c13f57c7b901336437489322694533d1d3dd']; btn.forEach(function(btn_current, index) { btn_current.addEventListener('mouseenter', function() { switcheroo.style.backgroundImage = 'url(' + images[index] + ')'; }); btn_current.addEventListener('mouseleave', function() { switcheroo.style.backgroundImage = 'url(https://wallpaperaccess.com/full/2029165.jpg)'; }); });
*,*::before,*::after { box-sizing: border-box; padding: 0; margin: 0; } #wrapper{ height: 100vh; width: 100%; background-position: center center; background-size: cover; backface-visibility: hidden; background-image: url('https://wallpaperaccess.com/full/2029165.jpg'); transition: all.5s ease-in-out; }.ulwrapper{ display: flex; height: 100vh; align-items: center; } ul{ display: flex; width: 100%; height: 4rem; list-style: none; } li{ margin: auto; cursor: pointer; } li a{ font-size: large; font-weight: bolder; text-decoration: none; color: black; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id='wrapper'> <div class="ulwrapper"> <ul> <li class="btn"><a>Button1</a></li> <li class="btn"><a>Button2</a></li> <li class="btn"><a>Button3</a></li> </ul> </div> </div> <script src="app.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Css keyframes fade-in
@keyframes animation text fade and shine
How do I fade out this fade on mouseleave?
Mouseenter / Mouseleave creates flickering effect
Fade in/out on mouseenter/mouseleave, stop queue
Toggle slide fade out, slide fade (back) in with CSS Keyframes and React
simple fade transition - not reverse
Fade effect with timer?
Add fade in effect on onload
Fade in effect on page load
Related Tags