Six dots around the the mouse cursor

Written by @kerixa 21 August 2012

To beautify the appearance of your website, you can give styles to different elements of the page. However, another interesting way to attract more attention is to apply cursor effects. In the following code, six points go in a row following the cursor, which makes it more attractive to the visitors of your website and distinguishes your website from other competitors.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
.seg {
    position: absolute;
    width: 16pt; height: 16pt;
    border: 3pt solid #65ff88;
    border-radius: 32pt;
    background-color: rgba(0, 128, 0, 0.5);
    background: radial-gradient(ellipse at center, rgba(159, 235, 144, 1) 0 %, rgba(159, 235, 144, 1) 4 %, rgba(37, 204, 70, 1) 37 %, rgba(16, 110, 1, 1) 100 %);
    box-shadow: 0pt 0pt 2pt 1pt #a0ffa0;
    pointer-events: none;
    z-index: 1000;
}
</style>
<div id='worm'>
  <div class='seg'></div>
  <div class='seg'></div>
  <div class='seg'></div>
  <div class='seg'></div>
  <div class='seg'></div>
  <div class='seg'></div>
</div>
<script>
var worm = {
    segs: [...document.getElementById("worm").querySelectorAll(".seg")],
    pos: [],
    length: 0
};
// adjust length for overlap-- *4 works as width / 4 = 4
worm.length = worm.segs.length * 4;
worm.segs.forEach((s, i) => {
    worm.pos[i] = { x: 0, y: 0 };
});

document.addEventListener("mousemove", function (e) {
    let x = e.pageX,
    y = e.pageY;
    worm.pos[0] = { x: x, y: y };
    for (let i = 0; i < worm.segs.length - 1; i++) {
    let np = worm.pos[i + 1],
    cp = worm.pos[i];
    let dx = cp.x - np.x,
    dy = cp.y - np.y,
    ang = Math.atan2(dy, dx);
    worm.pos[i + 1] = {
    x: cp.x - Math.cos(ang) * worm.length,
    y: cp.y - Math.sin(ang) * worm.length
    };
    }
    worm.pos.forEach((p, i) => {
    let seg = worm.segs[i];
    seg.style.left = p.x - seg.offsetWidth * 0.5 + "px";
    seg.style.top = p.y - seg.offsetHeight * 0.5 + "px";
    });
});
</script>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300