Home>
I had a mouse stalker, but when I scroll, it goes out of the screen and appears again when I move the mouse at that position. I want to fix this position even if I scroll this like a normal mouse.
Applicable source code/* =================================== ====
Mouse stalker
========================================= * /
var
cursor = $(". cursor"),
follower = $(". follower"),
cWidth = 20, // Cursor size
fWidth = 40, // Follower size
delay = 10, // If the number is increased, the follower will be delayed more
mouseX = 0, // Mouse X coordinate
mouseY = 0, // Mouse Y coordinate
posX = 0, // follower X coordinate
posY = 0;// X coordinate of follower
// Delayed cursor animation
// delay only a little-0.001 seconds
TweenMax.to ({}, .001, {
repeat: -1,
onRepeat: function () {
posX + = (mouseX-posX)/delay;
posY + = (mouseY-posY)/delay;
TweenMax.set (follower, {
css: {
left: posX-(fWidth/2),
top: posY-(fWidth/2)
}
});
TweenMax.set (cursor, {
css: {
left: mouseX-(cWidth/2),
top: mouseY-(cWidth/2)
}
});
}
});
// Get mouse coordinates
$(document) .on ("mousemove", function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$("a"). on ({
"mouseenter": function () {
cursor.addClass ("is-active");
follower.addClass ("is-active");
},
"mouseleave": function () {
cursor.removeClass ("is-active");
follower.removeClass ("is-active");
}
});
. cursor,
.follower {
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.cursor {
width: 20px;
height: 20px;
background-color: # f24e54;
z-index: 1001;
&.is-active {
transform: scale (1);
background-color: # f24e54;
}
}
.follower {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: rgba (# f24e54, .5);
z-index: 1000;
transition: transform ease .1s;
text-align: center;
span {
display: inline-block;
font-size: 14px;
font-weight: bold;
transform: scale (0);
}
&.is-active {
transform: scale (3);
background-color: rgba (# f24e54, .5);
}
}
When I set .follower {position: absolute;} to .follower {position: fixed;}, the main visual is ideal, but when I scroll down, it behaves strangely. It was.
-
Answer # 1
Related articles
- javascript - i want to make a dog mouse stalker that follows by changing the direction according to the direction of mouse movem
- javascript - i want the scroll position to be at the bottom when the screen is loaded
- behavior changes depending on the position of javascript code
- javascript - even if false is specified for onsubmit of form, full screen update may occur
- javascript - no screen is displayed
- javascript - i want to make multiple kitchen timers on one screen
- i want to judge the screen width with jquery and javascript
- javascript - screen transition is not possible even if you tap a cell
- how to execute javascript after screen transition when clicking a link
- java - i want to operate the screen below it with a mouse event in a transparent window
- javascript - ui change when full screen is displayed with video tag
- to close the grandchild screen when the parent screen or child screen is closed in javascript
- javascript - i want the button to return to top to stop at a certain position
- javascript - [search screen] when you want to include items other than in the parameters
- javascript - i can't scroll the screen with jquery
- i want to create a confirmation screen for a javascript form
- javascript - when you mouse over the scroll bar, the mouse cursor specified in the image returns to the normal cursor
- javascript - about automatic scroll position adjustment of mac chrome
- unable to reset screen with javascript
- javascript - i want to return to the top of the screen after pressing the confirmation button
Related questions
- javascript - i want to change the hamburger menu to a bento box
- javascript : How to keep the position of the navigation buttons when pressed?
- html - i want to animate with transition, but it doesn't work
- javascript - a tag information does not appear in the link field
- javascript - i want to animate the characters that flow from left to right when reloaded
- i want to make a hamburger menu with jquery
- css3 - difference between universal selector and html selector
- html - i want to unify the image size with css, but it sticks out
- html - i want to save with vscode open half-width
- css3 - media query screen width numerical specification and number
After using
fixed, use clientX/clientY to improve.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY