Toggle colors when circles spread over 75% of the screen
I made an animation where the circle div
enlarged and filled the entire screen.
You can see the animation here .
When the screen is about 75% covered with circles, I want to start the animation again with circles of different colors, i.e. essentially I will treat the old circles as a background screen and start new circles with a different color over the old ones.
The code I have so far is the following:
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
function makeDiv(divColor,bgColor){
var divsize = 1000;
$('body').css({'background-color':bgColor});
$newdiv = $('<div/>').css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': divColor,
'transform': 'scale(0)'
});
var posx = (Math.random() * ($(document).width()) - (divsize / 2)).toFixed();
var posy = (Math.random() * ($(document).height()) - (divsize / 2)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'border-radius':'50%',
'display':'none'
}).appendTo( 'body' ).addClass('animate').css({'display':'block'}).one(animationEnd,function(){
$(this).remove();
});
}
$(document).ready(function(){
var colorArray = ['green','red','blue','orange','violet','yellow','pink'];
var arrayLength = colorArray.length;
var i=0;
var id = setInterval(function(){makeDiv(colorArray[i],'white')},3000);
});
.animate {
-webkit-animation: expand 2500s;
}
@-webkit-keyframes expand {
0%{
-webkit-transform: scale(0,0);
}
100%{
-webkit-transform: scale(100.0,100.0);
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
We face two main problems:
1. How to find out that 75% of the screen is covered with circles of a certain color?
2. Switch colors as soon as it was found above.
My plan so far is to run some kind of loop that, when it detects that the screen is 75% covered, it switches the colors.
Any help is most appreciated. I have really been stuck with this issue for a long time.
source to share
No one has answered this question yet
Check out similar questions: