1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Div follow cursor help

Discussion in 'JavaScript' started by Ramboobmar, Sep 12, 2016.

  1. #1
    Hi guys I am workin on this web project and I need a div to follow the cursor on the screen. Now I've already found a piece of code online that does that but I need to make some tweaks to it. Only problem is...I am not experienced with Javascript or Jquery, hell this is the first time I've touched it.

    But that aside. What I want is that the circle follows the cursor but with a delay of 1 second and I want it to move a little "slower" and not at lightning speed. Ex. I move my cursor from the left side of the screen to the right side, after 1 second the div starts following the cursor and it must take the div about 2 seconds to go from the left side of the screen to the right side of the screen. Understand?

    Here is the existing piece (The div follows the cursor with no delay and at to much of a speed):

    http://codepen.io/bayron2304/pen/VKvOoZ

    Hopefully someone can help me out because I really need this to work! Thanks :)

    Edit: Also how do I solve the problem of the never ending scrollbar if the div comes to close to the bottom, top, left and right side of the screen?
     
    Solved! View solution.
    Ramboobmar, Sep 12, 2016 IP
  2. #2
    qwikad.com, Sep 12, 2016 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #3
    qwikad.com, Sep 12, 2016 IP
  4. Ramboobmar

    Ramboobmar Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    OMG! Yes this is exactly what I was looking for. You sir, are a hero! Thank you :)
     
    Ramboobmar, Sep 12, 2016 IP
  5. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #5
    Damn! I spend so much time making it in JavaScript!
     
    Blizzardofozz, Sep 12, 2016 IP
  6. Ramboobmar

    Ramboobmar Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #6
    Well, feel free to share it! the more, the better
     
    Ramboobmar, Sep 12, 2016 IP
  7. Ramboobmar

    Ramboobmar Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    BTW Is there also a possibility that the cursor is in the middle of the circle instead of on the top left? Thanks!
     
    Ramboobmar, Sep 12, 2016 IP
  8. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #8
    qwikad.com, Sep 12, 2016 IP
  9. Ramboobmar

    Ramboobmar Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #9
    Had to use a bigger margin because my circle width and height is 900px but it works! Now this is my last question (hopefully). Is there a way to prevent the circle from creating and endless scroll without the use of overflow:hidden? Thing is, I need to be able to scroll on my website because it'll be a one page. Hope this is not to much of a pain in the *ss :)
     
    Ramboobmar, Sep 12, 2016 IP
  10. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #10
    Just set the overflow: hidden; dynamically when activating the mouseevent?
     
    PoPSiCLe, Sep 12, 2016 IP
  11. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #11
    qwikad.com, Sep 12, 2016 IP