0
\$\begingroup\$

Developed around hls() CSS function and anchor tag wrapping elements with display CSS property set to block. It supports click on and off sparkles. The main component called ecosystem could be passed in with an HTMLElement to be the container of the sparkles and an array of string representation of urls that for each is creating a div element, an a element and appends the div element to the a element and the a element to the given sparkles container.

<html>
<head>
<style type="text/css">
.element {
    box-shadow: 0px 0px 10px 5px #fff;
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: background-color 2s linear, border-radius 2s linear, height 2s linear, left 2s linear, opacity 2s linear, width 2s linear, top 2s linear;
    visibility: hidden;
    width: 100%;
}
.element.wilder { transition: left 1s linear, top 1s linear, background-color 2s linear, border-radius 2s linear, height 2s linear, opacity 2s linear, width 2s linear; }
.element.wild { transition: left 1.5s linear, top 1.5s linear, background-color 2s linear, border-radius 2s linear, height 2s linear, opacity 2s linear, width 2s linear; }
.element.loose { transition: left 2s linear, top 2s linear, background-color 2s linear, border-radius 2s linear, height 2s linear, opacity 2s linear, width 2s linear; }
.element.calm { transition: left 2.5s linear, top 2.5s linear, background-color 2s linear, border-radius 2s linear, height 2s linear, opacity 2s linear, width 2s linear; }
.element.calmer { transition: left 3s linear, top 3s linear, background-color 2s linear, border-radius 2s linear, height 2s linear, opacity 2s linear, width 2s linear; }
.element.revealed {
    background-color: lightgray;
    border-radius: 50%;
    opacity: 0.7;
    visibility: visible;
}
.revealed.tiny {
    height: 50px;
    width: 50px;
}
.revealed.small {
    height: 100px;
    width: 100px;
}
.revealed.medium {
    height: 150px;
    width: 150px;
}
.revealed.large {
    height: 200px;
    width: 200px;
}
.revealed.larger {
    height: 250px;
    width: 250px;
}
</style>
</head>
<body onload="reveal()" onclick="poke()"></body>
<script type="text/javascript">

var waver = (function() {
    return { between: function(min, max) {
                 return Math.floor( Math.random() * ( max - min + 1 ) + min );
           }
           , until: function(max) {
                 return Math.floor( Math.random() * ( max + 1 ) );
           }
};})();

var ecosystem = ( function() {
    
    var dimensions = ["tiny", "small", "medium", "large", "larger"];
    var peacefulness = ["wilder", "wild", "loose", "calm", "calmer"];
    
    var paceIt = function(element) {
        
        var elementClasses = element.classList;
        
        for ( var i = 0; i < elementClasses.length; i++ ) {
            
            if ( peacefulness.indexOf(elementClasses[i]) > -1 ) {
                elementClasses.remove(elementClasses[i]);
                break;
            }
        }
        elementClasses.add( peacefulness[waver.until(peacefulness.length - 1)] );
    };
    
    return { of: function(bearer) {
        if ( !bearer ) { console.log("an eco system beared by what?"); return; }
        var elemental = ( function() {
            return { add: (url) => {
                var anchor = document.createElement("a");
                anchor.href = url;
                anchor.target = "details";
                var div = document.createElement("div");
                div.className = "element " + dimensions[waver.until(dimensions.length - 1)];
                anchor.appendChild(div);
                bearer.appendChild(anchor);
            } }
        } )(); 
        
        var height = bearer.offsetHeight;
        var width = bearer.offsetWidth;
        
        return { inhabited: {
            by: function(urls) {
                
                if (( urls || []).length == 0 ) { 
                    console.log("eco system inhabited by what inhabitants?"); return;
                }
                
                return {
                    inhabit: function() {
                        for ( var i = 0; i < urls.length; i++ ) {
                            elemental.add(urls[i]);
                        }
                        return this;
                    }
                    , reveal: function() {
                        document.querySelectorAll(".element")
                                .forEach( (element) => { 
                                     element.style.left = waver.between( 10, width - 250) + "px";
                                     element.style.top = waver.between(10, height - 250) + "px";
                                     element.style.backgroundColor = "hsl(205, 20%, " + waver.between(30,90) + "%)";
                                     element.classList.add("revealed");
                                     paceIt(element); 
                                 } );
                                 return this;
                    }
                    , clean: function() {
                        document.querySelectorAll(".element").forEach( (element) => { element.remove(); } );
                        
                    }
                };
                
            }
        }
        };    
    } };
} )();

var urls = [ "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)", "javascript:void(0)" ];

var environment = ecosystem.of(document.body).inhabited.by(urls).inhabit();
var reveal = function() { 
    var revealDelayInMillis = 500; 
    setTimeout(() => { environment.reveal(); }, revealDelayInMillis);
};
var poke = function() {
    environment.reveal();
};
</script>
</html>
\$\endgroup\$
1
  • 2
    \$\begingroup\$ Please use the <> button in the editor to make this an executable Snippet. Or at least offer a link to some page where this is running live. \$\endgroup\$
    – J_H
    Commented May 28 at 4:04

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.