jQuery mouseover() Method/ Escaping Dots Animation

The mouseover event occurs when the mouse pointer is over the selected element.

The mouseover() method triggers the mouseover event, or attaches a function to run when a mouseover event occurs.

Syntax:

$(selector).mouseover()

Attach a function to the mouseover event (optional):

$(selector).mouseover(function)

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").mouseover(function(){
    $("p").css("background-color", "pink");
  });
  $("p").mouseout(function(){
    $("p").css("background-color", "green");
  });
});
</script>
</head>
<body>

<p>Move the mouse pointer over this paragraph.</p>

</body>
</html>

Output:

Let’s go to the animation:

By moving the mouse cursor on the elements make them moving.

*animation opened in the Safari browser.
To see the live output of the animation click here.

What you need to do?

Add HTML
Add CSS
Add CSS Animation
Add jQuery

Step1.

Add HTML

<div class="container">
  <div class="bokeh">
  <div class="bokeh1"></div>
  <div class="bokeh2"></div>
  <div class="bokeh3"></div>
  <div class="bokeh4"></div>
  <div class="bokeh5"></div>
  <div class="bokeh6"></div>
  <div class="bokeh7"></div>
  <div class="bokeh8"></div>
  <div class="bokeh9"></div>
  <div class="bokeh10"></div>
  <div class="bokeh11"></div>
  <div class="bokeh12"></div>
  <div class="bokeh13"></div>
  <div class="bokeh14"></div>
  <div class="bokeh15"></div>
  <div class="bokeh16"></div>
  <div class="bokeh17"></div>
  <div class="bokeh18"></div>
  <div class="bokeh19"></div>
  <div class="bokeh20"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and the size of the background, and the container:

body {
  background: black;
  height: 100vh;
}
.container {
  position: relative; 
  
}

Style dots:

.bokeh {
 position: relative;
 width: 75%;
 height: 80vh;
 
}

.bokeh1 {
 position: absolute;
 border-radius:50%;
 background-color: #FF1654;
 width: 200px;
 height: 200px;
 opacity: 0.5;
 box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
 animation: move 5s linear infinite;
 animation: move 13s ease infinite;
}
.bokeh2 {
 position: absolute;
 border-radius:50%;
 background-color: #F3FFBD;
 width: 160px;
 left: 200px;
 height: 160px;
 opacity: 0.5;
 box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
 animation: move 11s ease infinite;
 
}
.bokeh3 {
  position: absolute;
  border-radius:50%;
  background-color: #247BA0;
  width: 160px;
  left: 200px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
  
}

.bokeh4 {
  position: absolute;
  border-radius:50%;
  background-color: #FF006E;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:300px;
  left:500px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
}

.bokeh5 {
  position: absolute;
  border-radius:50%;
  background-color: #8338EC;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:400px;
  left:600px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
}

.bokeh6 {
  position: absolute;
  border-radius:50%;
  background-color: #FFBE0B;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:300px;
  left:700px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 11s ease infinite;
}
.bokeh7 {
  position: absolute;
  border-radius:50%;
  background-color: #FB5607;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:100px;
  left:800px;
  box-shadow:inset -10px 5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
}

.bokeh8 {
  position: absolute;
  border-radius:50%;
  background-color: #EF476F;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:200px;
  left:600px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
}

.bokeh9 {
  position: absolute;
  border-radius:50%;
  background-color: #FFD166;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:300px;
  left:400px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 8s ease infinite;
}

.bokeh10 {
  position: absolute;
  border-radius:50%;
  background-color: #06D6A0;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top:500px;
  left:400px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
  
}
.bokeh10 {
  position: absolute;
  border-radius:50%;
  background-color: #06D6A0;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top:500px;
  left:400px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
  
}

.bokeh11 {
  position: absolute;
  border-radius:50%;
  background-color: #118AB2;
  width: 200px;
  height: 200px;
  opacity: 0.5;
  top:200px;
  left:800px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 10s ease infinite;
  
}

.bokeh12 {
  position: absolute;
  border-radius:50%;
  background-color: #06D6A0;
  width: 180px;
  height: 180px;
  opacity: 0.5;
  top:200px;
  left:1100px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
  
}

.bokeh13 {
  position: absolute;
  border-radius:50%;
  background-color: #073B4C;
  width: 180px;
  height: 180px;
  opacity: 0.5;
  top:300px;
  left:1500px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 14s ease infinite;
  
}

.bokeh14 {
  position: absolute;
  border-radius:50%;
  background-color: #4ECDC4;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:200px;
  left:1600px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 12s ease infinite;
  
}

.bokeh15 {
  position: absolute;
  border-radius:50%;
  background-color: #FF6B6B;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:100px;
  left:1500px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 8s ease infinite;
  
}

.bokeh16 {
  position: absolute;
  border-radius:50%;
  background-color: #FFE66D;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:200px;
  left:1300px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 11s ease infinite;
  
}

.bokeh17 {
  position: absolute;
  border-radius:50%;
  background-color: #F3722C;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:300px;
  left:1400px;
  box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
  
}

.bokeh17 {
  position: absolute;
  border-radius:50%;
  background-color: #90BE6D;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  left:1300px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 13s ease infinite;
  
}

.bokeh18 {
  position: absolute;
  border-radius:50%;
  background-color: #F8961E;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  left:800px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 11s ease infinite;
  
}

.bokeh18 {
  position: absolute;
  border-radius:50%;
  background-color: #F94144;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:200px;
  left:900px;
  box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
  animation: move 9s ease infinite;
  
}

.bokeh19 {
  position: absolute;
  border-radius:50%;
  background-color: #577590;
  width: 160px;
  height: 160px;
  opacity: 0.5;
  top:100px;
  left:1100px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 14s ease infinite;
  
}

.bokeh20 {
  position: absolute;
  border-radius:50%;
  background-color: #F3722C;
  width: 100px;
  height: 100px;
  opacity: 0.5;
  top:300px;
  left:1200px;
  box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
  animation: move 14s ease infinite;
  
}

Step3.

Add CSS Animation

@keyframes move {
	from {
		transform: rotate(0deg)
		           translate(200px)
               rotate(0deg);
	}
	to {
		transform: rotate(360deg)
		           translate(100px) 
               rotate(-360deg);
	}
}

Step4.

Add jQuery

jQuery(function($) {
    $(".bokeh1, .bokeh2, .bokeh3, .bokeh4, .bokeh5, .bokeh6, .bokeh7, .bokeh8, .bokeh9, .bokeh10, .bokeh11, .bokeh11, .bokeh12, .bokeh13, .bokeh14, .bokeh15, .bokeh16, .bokeh17, .bokeh18, .bokeh19, .bokeh20").mouseover(function() {
        var dWidth = $(document).width() - 50, 
            dHeight = $(document).height() - 50, 
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
    });
});

To see the live output of the animation visit lenastanley.com.

Enjoy coding!

Share this: