vendredi 12 août 2016

Have objects with class randomly appear/disappear on loop

I am trying to emulate a star background.

Stars are created and randomly scattered throughout the site on load. I have got this far adjusting some code.

var star="<span class='star'>•</span>";
var numStars=100;
for(var x=1;x<=numStars;x++){
    $(star).appendTo("body");
}
// get window dimentions
var ww = $(window).width();
var wh = $(window).height();
$(".star").each(function(i){
    var posx = Math.round(Math.random() * ww)-20;
    var posy = Math.round(Math.random() * wh)-20;
    $(this).css("top", posy + "px").css("left", posx + "px");
});

http://ift.tt/2aLJcql

I now like to have them each randomly fade in, hold, then fade out.

I'm thinking the approach would be to randomly select a star, then add an .active class to it, then remove it after x seconds. On a loop of sorts.

I'm not totally sure where to start with this. Any rough code to start me off would be great. Thanks




Aucun commentaire:

Enregistrer un commentaire