Изменить эффект частиц при наведении мыши

Question

Мне нравится эффект, который я нашел на Codepen.

Мне было интересно, можно ли изменить это так, чтобы вместо разных цветовых точек у меня мог быть логотип моего бренда, возможно, разных цветов.

Я предполагаю, что код, который я хочу изменить:

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;";

Я думаю изменить rgb("+getRandomInt(0,255)+" со ссылкой на мой логотип, но не знаете, как это сделать

Я не очень хорош с JS, поэтому любая помощь будет отличной:-)

Answer 1

Я мог бы иметь свой логотип бренда, возможно, в разных цветах.

Да, вы можете разместить логотип вашего бренда на час мыши, используя значок шрифта.

СМОТРЕТЬ ДЕМО

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>

* Вы можете создать свой собственный значок пиктограммы, используя онлайн icomoon

---

В существующем codepen вы также можете использовать это

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