CODEWITHSUNDEEP
javascriptjquerycss
user87492223
user87492223

Reputation: 3

Creating an effect wherever mouse goes

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.

Upvotes: 0

Views: 2851

Answers (3)

Mario A
Mario A

Reputation: 3363

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.

Upvotes: 1

Ajay
Ajay

Reputation: 554

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
            })
        })

Upvotes: 1

Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

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.

Upvotes: 1

Related Questions