Change la façon dont les feux d'artifices apparaissent
This commit is contained in:
parent
c47bd42d46
commit
40b2b2fcf7
2 changed files with 20 additions and 10 deletions
12
css/home.css
12
css/home.css
|
|
@ -57,12 +57,12 @@
|
|||
}
|
||||
|
||||
.btn-pop i {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
/* position: ; */
|
||||
display:run-in;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
background: red;
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
18
js/pop.js
18
js/pop.js
|
|
@ -6,16 +6,26 @@ document.querySelectorAll('button').forEach(function(button) {
|
|||
|
||||
var c = document.createDocumentFragment();
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var styles = 'transform: translate3d(' + (random(500) - 250) + 'px, ' +
|
||||
(random(200) - 150) + 'px, 0) rotate(' + random(360) + 'deg);' +
|
||||
var styles = 'position: absolute;' +
|
||||
'left: ' + (random(100)) + '30%;' + // Limit the position to within the button
|
||||
'top: ' + (random(60)) + '30%;' + // Limit the position to within the button
|
||||
'width: 3px; height: 6px; ' + // Increase size
|
||||
'transform: translate(-50%, -50%) rotate(' + random(360) + 'deg);' +
|
||||
'background: hsla(' + random(360) + ', 100%, 50%, 1);' +
|
||||
'animation: bang 700ms ease-out forwards;' +
|
||||
'opacity: 0';
|
||||
'animation: bang 2000ms ease-out forwards;' +
|
||||
'opacity: 0;' +
|
||||
'z-index: 10;'; // Set a high z-index
|
||||
|
||||
var e = document.createElement("i");
|
||||
e.style.cssText = styles;
|
||||
c.appendChild(e);
|
||||
}
|
||||
button.appendChild(c);
|
||||
setTimeout(() => {
|
||||
// Create an array of the <i> elements to remove
|
||||
let childrenToRemove = Array.from(button.querySelectorAll('i'));
|
||||
// Remove each <i> element
|
||||
childrenToRemove.forEach(child => button.removeChild(child));
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue