Interactive backgrounds are always more appealing to users. In this code we also have one of these interactive backgrounds. This background has a dark theme. There are some pink rectangular particles in the background. By placing the mouse cursor on each part of the background, these particles escape and move in a circle with a radius of four centimeters away from the mouse cursor.
HTML
<!-- This script got from www.devanswer.com -->
<script src='http://www.devanswer.com/codes/files/pineapple.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
color: #fff;
margin: 0 !important;
padding: 0 !important;
font-size: 18px;
font-family: 'Montserrat', sans-serif;
background: #000000;
line-height: 1.4;
overflow-x: hidden !important;
}
Javascript
const particles = new Pineapple()
// particles.createBackgroundParticlesCircle({size:4,particleNumber:2500,color:'#ffaaff',speed:0.41})
particles.createBackgroundParticlesSquare({size:4,particleNumber:2500,color:'#ffaaff',speed:0.41})