Categories
CSS JavaScript JQuery Web development

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.

jQuery mouseover() Method

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 on the website click here.

Demo:

What you need to do?

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
  4. 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!