I’m trying to solve this problem, but I’m giving up and I’m here to see if you can give me some hints.
I made this bubble effect in which when I touch each bubble it pops, but I can’t get the bubbles to reappear after a few seconds (as if they were new bubbles).
I leave the code here below:
function changeStyle1() { var element = document.getElementById("pop1"); element.style.opacity = "0"; } function changeStyle2() { var element = document.getElementById("pop2"); element.style.opacity = "0"; } function changeStyle3() { var element = document.getElementById("pop3"); element.style.opacity = "0"; } function changeStyle4() { var element = document.getElementById("pop4"); element.style.opacity = "0"; } function changeStyle5() { var element = document.getElementById("pop5"); element.style.opacity = "0"; } function changeStyle6() { var element = document.getElementById("pop6"); element.style.opacity = "0"; } function changeStyle7() { var element = document.getElementById("pop7"); element.style.opacity = "0"; } function changeStyle8() { var element = document.getElementById("pop8"); element.style.opacity = "0"; } function changeStyle9() { var element = document.getElementById("pop9"); element.style.opacity = "0"; } function changeStyle10() { var element = document.getElementById("pop10"); element.style.opacity = "0"; } function changeStyle11() { var element = document.getElementById("pop11"); element.style.opacity = "0"; }
body { background: #000; color: #333; font: 100% Lato, Arial, Sans Serif; height: 100vh; margin: 0; padding: 0; overflow-x: hidden; } /* OBJECTS */ button { background: transparent; border-color: transparent; } .bubble { position: fixed; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25); } .bubble:after { content: ''; position: absolute; top: 80px; left: 80px; width: 20px; height: 20px; border-radius: 50%; background: #fff; z-index: 10; filter: blur(2px); } .bubble::before { content: ''; position: absolute; top: 50px; left: 45px; width: 30px; height: 30px; border-radius: 50%; background: #fff; z-index: 10; filter: blur(2px); } .bubble span { position: absolute; border-radius: 50%; } .bubble span:nth-child(1) { inset: 10px; border-left: 15px solid #0fb4ff; filter: blur(8px); } .bubble span:nth-child(2) { inset: 10px; border-right: 15px solid #ff4484; filter: blur(8px); } .bubble span:nth-child(3) { inset: 20px; border-top: 15px solid #ffeb3b; filter: blur(8px); } .bubble span:nth-child(4) { inset: 30px; border-left: 15px solid #ff4484; filter: blur(12px); } .bubble span:nth-child(5) { inset: 10px; border-bottom: 10px solid #fff; filter: blur(8px); transform: rotate (330deg); } /* ANIMATIONS */ .x1 { -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; left: -5%; top: 5%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); } .x2 { -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 5%; top: 80%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } .x3 { -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 10%; top: 40%; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } .x4 { -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 20%; top: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } .x5 { -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 30%; top: 50%; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5); } .x6 { -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 50%; top: 0; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } .x7 { -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 65%; top: 70%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } .x8 { -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 80%; top: 10%; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } .x9 { -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 90%; top: 50%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); } .x10 { -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 80%; top: 80%; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } .x11 { -webkit-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 90%; top: 90%; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } /* KEYFRAMES */ @-webkit-keyframes animateBubble { 0% { margin-top: 1000px; } 100% { margin-top: -100%; } } @-moz-keyframes animateBubble { 0% { margin-top: 1000px; } 100% { margin-top: -100%; } } @keyframes animateBubble { 0% { margin-top: 1000px; } 100% { margin-top: -100%; } } @-webkit-keyframes sideWays { 0% { margin-left: 0px; } 100% { margin-left: 50px; } } @-moz-keyframes sideWays { 0% { margin-left: 0px; } 100% { margin-left: 50px; } } @keyframes sideWays { 0% { margin-left: 0px; } 100% { margin-left: 50px; } }
<head> <title>Pure CSS Animated Bubbles</title> </head> <body> <button type="button" onclick="changeStyle()">Click Me</button> <div id="background-wrap"> <button id="pop1" onclick="changeStyle1()" class="bubble x1"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop2" onclick="changeStyle2()" class="bubble x2"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop3" onclick="changeStyle3()" class="bubble x3"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop4" onclick="changeStyle4()" class="bubble x4"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop5" onclick="changeStyle5()" class="bubble x5"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop6" onclick="changeStyle6()" class="bubble x6"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop7" onclick="changeStyle7()" class="bubble x7"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop8" onclick="changeStyle8()" class="bubble x8"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop9" onclick="changeStyle9()" class="bubble x9"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop10" onclick="changeStyle10()" class="bubble x10"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> <button id="pop11" onclick="changeStyle11()" class="bubble x11"> <span></span> <span></span> <span></span> <span></span> <span></span> </button> </div> </div> </body>
Codepen link: https://codepen.io/tomas-saint-romain/details/LYdaMRG
Advertisement
Answer
You dont need all of those functions,just one will be enough
JS
const changeStyleToBubble = (id) => { //we get the id directly from the html element,as parameter const element = document.getElementById(id); element.style.opacity = "0"; //set it back to 1 after 2 seconds (2000 ms) setTimeout(() => { element.style.opacity = "1"; }, 2000) }
HTML
<button id="pop2" onclick="changeStyleToBubble(this.id)" class="bubble x2">