Creating an effect wherever mouse goes

Question

So I have been trying endlessly to try and do something similar too what this site is doing (http://whois.domaintools.com/). I'm trying to get a webpage, so wherever the mouse moves over the webpage, that kind of effect follows it (I'm sorry I don't know what I would call the effect).

I've read how to ask questions on here, but I don't know what too look for so it's difficult for me to attempt this. So far this link (http://p5js.org/learn/demos/Hello_P5_Drawing.php) I've used the code from this and played around with it but i'm just puzzled as too how I would go about doing this.

Thanks for any help, I've been banging my head against a brick wall for a good couple of days now.

I suggest to inspect that website code to understand how that works — BeNdErR, Mar 13 '15 at 09:32
This is a good place to start: http://stackoverflow.com/questions/4847726/how-to-animate-following-the-mouse-in-jquery — StudioTime, Mar 13 '15 at 09:38
Thank you @DarrenSweeney This is exactly what I was looking for (or something along the lines anyway) I can't up vote your comment because i've just started. But thanks again :) — user87492223, Mar 13 '15 at 09:40

score 1 · Answer 1 · answered Mar 13 '15 at 09:40

I've developed the following solution for the effect which you are referring. This is done using jQuery using the event mousemove(). Bind this event to your body where the content is.

Method :

Create an element with the following css on your body. You can create the element onthefly using jQuery as well.

<div class='hover'></div>

CSS

.hover{
   position:absolute;
   width:100px;
   height:100px;
   background-color:#fff;
}

The add the following code to your page.

$('body').mousemove(function(event){
    $('.hover').css({
        'top' : event.pageY,
        'left': event.pageX
    })
});

The above code will bind an event to your mouse move and I change the element position according to the mouse coordinates.

This fiddle shows a running example

I've given you the basic idea of the solution! You will have to medle with the css and jquery to add the looks and feels of the effect which you refer to.

score 1 · Answer 2 · answered Mar 13 '15 at 09:42

See the simple example

<img id="imgMove" src="Images/img1.jpg" height="100" width="100" style="position: absolute;" />

JQuery

       $(document).ready(function () {

            $(document).mousemove(function (e) {
                $("#imgMove").css({ "top": e.pageY - 50, "left": e.pageX - 50 });  // e.pageX - Half of Image height, width
            })
        })

Mario A · Accepted Answer · 2015-03-13T10:52:47.347

This seems to be some kind of particle system. I would start the following way: First create a class for a particle, it should have a random x and y coordinate, and it should change it's postion periodically to a random new postion. Then create a lot of instances of the particle and distribute them over the page.

http://jsfiddle.net/aggoh0s1/3/

/* each particle will move in a 100px100px square */
var gutterWidth = 100;

/* class definition */
var Particle = function(x, y) {
    var t = this;
    t.x = x;
    t.y = y;

    t.elem = $('<div class="particle" />');
    t.elem.css({ left: x+"px", top: y+"px"});

    $('body').append(t.elem);

    /* create a new position every 500-1000 milliseconds */
    var milliSecs = 500 + Math.random() * 500;
    t.ptinterval = setInterval(function() {
        var dx = Math.round(Math.random() * gutterWidth);
        var dy = Math.round(Math.random() * gutterWidth);
        t.elem.animate({left: (t.x + dx)+"px", top: (t.y + dy) + "px"}, 600);  
    }, milliSecs);
};




/* create a 1000px1000px area where particles are placed each 100px */
var particles = [];
var newParticle;

for(var x = 0; x < 1000; x = x + gutterWidth) {
    for(var y = 0; y < 1000; y = y + gutterWidth) {
        newParticle = new Particle(x,y);
        particles.push(newParticle);
    }
}

CSS:

.particle {
    width: 2px;
    height: 2px;
    background-color: black;
    position: absolute;
}

Using this logic, you could also use a canvas to display the particles instead of a html div like it is done on whois.domaintools.com. The next step should be to connect the particles with lines to each other, and after that some code should hide all particles that are some distance away from the mouse position.

Thank you, I really appreciate your help. Yes if I used an adaptation of the above answers to follow the cursor on the page, and your answer I'll be able to achieve something similar too what I was looking for. Thanks again! — user87492223, Mar 13 '15 at 11:06

Creating an effect wherever mouse goes

3 Answers3