change Particle Effect on Mouse hover

Question

I like the effect I found on Codepen.

I was wondering if it is possible to change this so that instead of the different colour dots, I could have my brand logo, maybe in different colors.

I am assumin the but of code I am looking to change is:

var color = "background: rgb(" + getRandomInt(0, 255) + "," + getRandomInt(0, 255) + "," + getRandomInt(0, 255) + ");";

var sizeInt = getRandomInt(10, 30);
size = "height: " + sizeInt + "px; width: " + sizeInt + "px;";

I'm thinking change the rgb("+getRandomInt(0,255)+" with a link to my logo but unsure how to go abouit it

I am not great with JS so any help would be great :-)

Answer 1

I could have my brand logo, maybe in different colors.

Yes you can put your brand logo on mouse hour using font icon.

SEE DEMO

var mousePos = {},
  getRandomInt = (min, max) => {
    return Math.round(Math.random() * (max - min + 1)) + min;
  },
  getRandomColor = () => {
    return `#${((1 << 24) * Math.random() | 0).toString(16)}`;
  };

$(window).mousemove(function(e) {
  mousePos.x = e.pageX;
  mousePos.y = e.pageY;
});

$(window).mouseleave(function(e) {
  mousePos.x = -1;
  mousePos.y = -1;
});

var draw = setInterval(function() {
  if (mousePos.x > 0 && mousePos.y > 0) {

    var range = 15,
      color = `color:${getRandomColor()};`,
      sizeInt = getRandomInt(10, 30),
      left = "left: " + getRandomInt(mousePos.x - range - sizeInt, mousePos.x + range) + "px;",
      top = "top: " + getRandomInt(mousePos.y - range - sizeInt, mousePos.y + range) + "px;",
      size = `height:${sizeInt}px;width:${sizeInt}px;`;

    $(`<div class="ball" style="${left + top + color + size}"><i class="fa fa-stack-overflow"></i></div>`).appendTo('#wrap').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
      $(this).remove();
    });
  }
}, 1);

html,
body {
  height: 100%;
  margin: 0;
  position: relative;
  background: #3c3c3c;
  font-family: "Open Sans";
}

#wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#wrap p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: rgba(255, 255, 255, .5);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-align: center;
}

.ball {
  pointer-events: none;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: gray;
  animation: implode 1s ease-in-out;
  animation-fill-mode: both;
  opacity: .5;
}

@keyframes implode {
  100% {
    transform: scale(0)
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrap">
  <p>move the cursor around the screen</p>
</div>

*You can create your own pictos icon using online icomoon

---

In Existing codepen, you can also use like this

background-image: url('your image url or path here');//or
background: url('your image url or path here');