Pixies - Just another day with random

In this example below you will see how to do a Pixies - Just another day with random with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by depy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright depy ©
  • HTML
  • CSS
  • JavaScript
    
<h1 class="big-title">Just click and drag.</h1>

<p>Created by Deepak Kamat (<a href="https://twitter.com/xxxdepy" target="_blank">@xxxdepy</a>)</p>

<!-- Copied from animate.css homepage ;) -->
<select class="" id="animationName">
        <optgroup label="Attention Seekers">
          <option value="bounce">bounce</option>
          <option value="flash">flash</option>
          <option value="pulse">pulse</option>
          <option value="rubberBand">rubberBand</option>
          <option value="shake">shake</option>
          <option value="swing">swing</option>
          <option value="tada">tada</option>
          <option value="wobble">wobble</option>
          <option value="jello">jello</option>
        </optgroup>

        <optgroup label="Bouncing Entrances">
          <option value="bounceIn">bounceIn</option>
          <option value="bounceInDown">bounceInDown</option>
          <option value="bounceInLeft">bounceInLeft</option>
          <option value="bounceInRight">bounceInRight</option>
          <option value="bounceInUp">bounceInUp</option>
        </optgroup>

        <optgroup label="Bouncing Exits">
          <option value="bounceOut">bounceOut</option>
          <option value="bounceOutDown">bounceOutDown</option>
          <option value="bounceOutLeft">bounceOutLeft</option>
          <option value="bounceOutRight">bounceOutRight</option>
          <option value="bounceOutUp">bounceOutUp</option>
        </optgroup>

        <optgroup label="Fading Entrances">
          <option value="fadeIn" selected>fadeIn</option>
          <option value="fadeInDown">fadeInDown</option>
          <option value="fadeInDownBig">fadeInDownBig</option>
          <option value="fadeInLeft">fadeInLeft</option>
          <option value="fadeInLeftBig">fadeInLeftBig</option>
          <option value="fadeInRight">fadeInRight</option>
          <option value="fadeInRightBig">fadeInRightBig</option>
          <option value="fadeInUp">fadeInUp</option>
          <option value="fadeInUpBig">fadeInUpBig</option>
        </optgroup>

        <optgroup label="Fading Exits">
          <option value="fadeOut">fadeOut</option>
          <option value="fadeOutDown">fadeOutDown</option>
          <option value="fadeOutDownBig">fadeOutDownBig</option>
          <option value="fadeOutLeft">fadeOutLeft</option>
          <option value="fadeOutLeftBig">fadeOutLeftBig</option>
          <option value="fadeOutRight">fadeOutRight</option>
          <option value="fadeOutRightBig">fadeOutRightBig</option>
          <option value="fadeOutUp">fadeOutUp</option>
          <option value="fadeOutUpBig">fadeOutUpBig</option>
        </optgroup>

        <optgroup label="Flippers">
          <option value="flip">flip</option>
          <option value="flipInX">flipInX</option>
          <option value="flipInY">flipInY</option>
          <option value="flipOutX">flipOutX</option>
          <option value="flipOutY">flipOutY</option>
        </optgroup>

        <optgroup label="Lightspeed">
          <option value="lightSpeedIn">lightSpeedIn</option>
          <option value="lightSpeedOut">lightSpeedOut</option>
        </optgroup>

        <optgroup label="Rotating Entrances">
          <option value="rotateIn">rotateIn</option>
          <option value="rotateInDownLeft">rotateInDownLeft</option>
          <option value="rotateInDownRight">rotateInDownRight</option>
          <option value="rotateInUpLeft">rotateInUpLeft</option>
          <option value="rotateInUpRight">rotateInUpRight</option>
        </optgroup>

        <optgroup label="Rotating Exits">
          <option value="rotateOut">rotateOut</option>
          <option value="rotateOutDownLeft">rotateOutDownLeft</option>
          <option value="rotateOutDownRight">rotateOutDownRight</option>
          <option value="rotateOutUpLeft">rotateOutUpLeft</option>
          <option value="rotateOutUpRight">rotateOutUpRight</option>
        </optgroup>

        <optgroup label="Sliding Entrances">
          <option value="slideInUp">slideInUp</option>
          <option value="slideInDown">slideInDown</option>
          <option value="slideInLeft">slideInLeft</option>
          <option value="slideInRight">slideInRight</option>

        </optgroup>
        <optgroup label="Sliding Exits">
          <option value="slideOutUp">slideOutUp</option>
          <option value="slideOutDown">slideOutDown</option>
          <option value="slideOutLeft">slideOutLeft</option>
          <option value="slideOutRight">slideOutRight</option>
          
        </optgroup>
        
        <optgroup label="Zoom Entrances">
          <option value="zoomIn">zoomIn</option>
          <option value="zoomInDown">zoomInDown</option>
          <option value="zoomInLeft">zoomInLeft</option>
          <option value="zoomInRight">zoomInRight</option>
          <option value="zoomInUp">zoomInUp</option>
        </optgroup>
        
        <optgroup label="Zoom Exits">
          <option value="zoomOut">zoomOut</option>
          <option value="zoomOutDown">zoomOutDown</option>
          <option value="zoomOutLeft">zoomOutLeft</option>
          <option value="zoomOutRight">zoomOutRight</option>
          <option value="zoomOutUp">zoomOutUp</option>
        </optgroup>

        <optgroup label="Specials">
          <option value="hinge">hinge</option>
          <option value="jackInTheBox">jackInTheBox</option>
          <option value="rollIn">rollIn</option>
          <option value="rollOut">rollOut</option>
        </optgroup>
      </select>



<button id="deleteAll" onclick="deleteAllPixies();">Delete All</button>

/*Downloaded from https://www.codeseek.co/depy/pixies-just-another-day-with-random-qKRXyg */
    
body {
  position: relative;
  height: 100vh;
  padding: 40px;
  font-family: 'Dosis', sans-serif;
}

h1.big-title {
  font-weight: 300;
}





#deleteAll {
  -webkit-appearance: none;
  border: none;
  display: block;
  padding: 10px 20px;
  color: #fff;
  background-color: #333;
  border-radius: 10px;
  opacity: 0.6;
  z-index: 99;
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
}

#deleteAll:hover {
  opacity: 1;
}



.pixie {
  width: 2px;
  height: 2px;
  position: absolute;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}


/*Downloaded from https://www.codeseek.co/depy/pixies-just-another-day-with-random-qKRXyg */
    var mouseDown = false;
var animationName = document.getElementById("animationName").value;

document.addEventListener("DOMContentLoaded", function(){
  
  window.onmousedown = function(){
    mouseDown = true;
  }
  
  window.onmouseup = function(){
    mouseDown = false;
  };
  
  window.onmousemove = function(e){
    if (mouseDown) {
      var x = e.clientX;
      var y = e.clientY;
      
      drawPixie( "#333", x, y );
    }
  };
  
  
  document.getElementById("animationName").addEventListener("change", function(){
    animationName = document.getElementById("animationName").value;
  });
  
});


function drawPixie( color, x, y ) {
  
  var _x = x, _y = y;
  var _borderRadius = '50%';
  var size = getRandomInt(10, 50);
  
  var rColor = {
    r: getRandomInt(50, 255),
    g: getRandomInt(0, 255),
    b: getRandomInt(100, 255)
  }
  
  var pixie = document.createElement( 'div' );
  var style = `top: ${_y}px; left: ${_x}px; background-color: rgba(${rColor.r},${rColor.g},${rColor.b},1); border-radius: ${_borderRadius}; width: ${size}px; height: ${size}px`;
      pixie.setAttribute( 'style', style );
      pixie.setAttribute( 'class', 'pixie animated ' + animationName);
  
  document.body.appendChild( pixie );
}



function deleteAllPixies(){
  var allPixies = document.getElementsByClassName("pixie");
  for ( var i = 0; i < allPixies.length; i++ ) {
    var elm = allPixies[i];
        elm.parentNode.removeChild( elm );
  }
}



function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Comments