Mouse Follow Script, Cant Animate on Hover - javascript

I'm trying to implement script to have a div block follow my mouse, then animate it when hovering over certain links. The problem is when transforming it on hover of any objects, it starts to flash and become finicky.
Codepen: https://codepen.io/grayghostvisuals/pen/kepDb/
var $circle = $('.circle');
function moveCircle(e) {
TweenLite.to($circle, 0.7, {
css: {
left: e.pageX,
top: e.pageY
}
});
}
$(window).on('mousemove', moveCircle);
Any ideas?

It seems to be a z-index issue. Hover will try to check if your mouse is above your element, but it will be hovering the circle following your mouse. This pen shows how it works if you use a negative z-index for the circle, too.
You can however make your browser ignore the pointer events for the circle, removing the problem all together. I changed your pen to add the solution.
.element {
pointer-events: none;
}

Related

Image zoom JS (with background image, not img)

I'm wanting to write my own image zoom JS code (similar to http://www.elevateweb.co.uk/image-zoom/examples#inner-zoom) but the issue with this and all the other plugins is that it's relying on img tags whereas I want to use background images to give the same effect.
I have created a jsFiddle of where I am up to but I'm having issues trying to re-create the mouse movement. I thought, when you hover, it could scale the background image (or replace the url src via JS with a larger image) but I can't work out how to follow the edges of the image/container rather than the image follow the pointer.
https://jsfiddle.net/x69tk48s/
$('.inner').mousemove(function(e) {
$('.each-image .bg').offset({
left: e.pageX,
top: e.pageY
});
});
$('.inner').on('mouseleave', function() {
$('.each-image .bg').css({
left: 0,
top: 0
});
});
Any thoughts?
The math isn't quite right (yet) but here is a rough idea of how you can accomplish it: https://jsfiddle.net/3cebzudv/2/ (start by mousing-in in the top left corner to get the rough idea).
Basically, just scale the background image up on mouseenter and then reposition it with the backgroundPosition property on mousemove.

hover function not working as needed

Here is my jsfiddle - http://jsfiddle.net/ganganp/x62wR/5/
$('#rotator0 div').hover(
function () {
ssrc = $(this).find('img').attr("src");
valt = $(this).find('img').attr("alt");
(this).children('img').attr('src','http://placehold.it/150x150&text='+valt);
},
function () {
$(this).children('img').attr('src',ssrc);
}
);
hover for the inner circle images not working.
Where have I gone wrong?
As noted in comments #rotator0 is below #rotator and this breaks hover events
Adding css property:
#rotator0 {
z-index:10;
}
seems to fix it.
http://jsfiddle.net/x62wR/18/
However now hovering on outer circle works buggy as the corners of the smaller #rotator0 now overrides the bigger one. You will have to change its width height to something small enough and relocate it.

Custom large mouse cursor with javascript

I want to create custom cursor image, but it is limited to 32x32, while I need about 300x300 image. So it seems that I need to hide cursor cursor: none and create custom large div or image, that will be moving with invisible mouse.
The simplest implementation could be:
$(document).on('mousemove', function(e){
$('#custom-cursor').css({
left: e.pageX,
top: e.pageY
});
});
but I have some problems:
Performance (how should I implement moving div not with left-top properties)
Text selection jsfiddle cannot select text properly
Can anyone help me with this?
On modern browsers, you need to use pointer-event CSS property set to none:
--DEMO--
$(document).on('mousemove', function (e) {
$('#custom-cursor').css({
left: e.pageX,
top: e.pageY,
pointerEvents: 'none'
});
});
If Cursor and Text are in the same Color, add z-index: -1 to the cursor. So the cursor is behind the text and lets you select it.
But if the color is not equal the user will see, that the cursor is behind the text.

Creating multiple transitional buttons from 1 image

I have a very simple looking image of different coloured bars which 'fan' left to right, a bit like the choc bars here:
http://www.lifeafterbagels.com/blog/wp-content/uploads/2012/05/Fanned-Bars.jpg
I want to turn into each bar into individual buttons with tooltip 'pop-ups' and colour changes when the cursor hovers over them. Very much like this image map:
http://winstonwolf.pl/clickable-maps/europe.html
I have looked at the map source code and it doesn't really help me, but from searching on this forum it looks like I need to use x and y coordinates to determine the area that would be 'clickable'. Is this correct?
I found some code which allowed me to create a transition between 2 images, which is great, but when the image is not a simple square inside a square div I run into trouble. This is the code for the simple transition:
jQuery(document).ready(function(){
jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).stop().animate({"opacity": "1"}, "slow");
});
});
and the CSS:
![div.fadehover {
position:relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}][2]
Any help to point me in the right direction would be much appreciated!
Thanks
J
To elaborate on the comment, this JS fiddle may be how you could rotate your images and set click/hover events for them.
http://jsfiddle.net/pSPX6/
Doing it this way will mean that you don't need to get into mouse coordinates yourself, just let jQuery/JavaScript sort them out for you! :)
As for the tooltip, you could always position it based on the parameters given to you in the hover event, the parameters passed to this events should contain the x and y coordinates of the mouse which you can then use to position the tooltip. For more info on the hover event I've used, see the jQuery documentation: http://api.jquery.com/hover/
Hope this helps!
Let me know if you want more clarification!

moving div according to mouse event and in the same direction

im trying to move the div according to mouse event and direction, i mean to move the div in the same direction, in which moves the mouse, but for the movement of div there will be limits. so far i have this:
$("#foo").mousemove(function(event) {
$("#bee1").animate({"left": "150px"}, 2000)
});
and css:
#bee1 { position:absolute; top:200px; left:160px; }
now the div moves just in one direction, after the mouse is moved, and stops. but i want it to be moved in the way moves mouse, in the same direction )) how do i do it?!
Thank you all for help!
I think you are looking for this
Working demo
$("#foo").mousemove(function(event) {
$("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300)
});
See http://www.thinqlinq.com/Post.aspx/Title/Select-Many-with-Rx-and-RxJs for an example using RxJs.
You can extract event.pageX and event.pageY every time mousemove is triggered. By storing these as global variables and comparing them to subsequent values, you can compute exactly what direction the mouse has been moved in and how far.
http://api.jquery.com/event.pageX/
Take the difference between the new and old values and feed them back directly into .animate if you like.

Categories