I want to make an animation in jQuery to move a div to another div smoothly but recalculating the coordinates of the final destination in case a user scrollsdown with his mouse for example.
The red square is absolute positioned and the blue square has a fixed position.
I had an idea of calling several times the stop() function and then animate again to the new position of the blue square but the transition isn't smooth at all.
Is there a way to set new destination from time to time but keeping it smooth?
http://codepen.io/anon/pen/gkLzh
Related
Following the docs around matrix transformations here: http://fabricjs.com/using-transformations
I replicated their demo at the bottom but instead of the new matrix being set to the minions on an event I am programmatically calling .rotate
The minion rotates correctly but it's position is off by a bit even with calling setCoords
What I expect to happen is that the blue minion stays in the same position relative to the red boss as it rotates but instead it moves as it rotates
Codesandbox: https://codesandbox.io/s/sharp-brook-st24pb?file=/src/index.js:812-820
Moving the object at the same position with the mouse is easy, what I would like to do is having a full window canvas with a circle at 500, 500. If I click anywhere, from that point any position change of my cursor would affect the circle the same way.
e.g. If I move right 50px the circle also moves right 50px while keeping the initial distance etc.
How to solve this?
If you want to change the position of the circle independent of where the mouse is, I would suggest keeping 2 variables storing the x and y coordinates of the circle, and every time the mouse moves, you can update those variables with the change in x and y components of the mouse movement. If you are trying to make the circle at the same exact position of the mouse, you can just assign the circle to position of the mouse whenever there's a mouse movement.
hope this helps
I am trying to create an animation. The animation is suppose to be a rocket blasting off of the ground into space. Once in space a button will be clicked and it will rotate in another direction and blast off in that direction. The problem I am having is the rotateZ axis seems to stay in the default position while the image is translated into another position before rotating. So instead of the image just simply rotating to the right, it rotates in a wide circle to the right. I have messed with the background-origin properties to fix this but I cannot get it to work right.
var square = $('#square');
var rotate = $('#rotate');
square.velocity({rotateZ: '-90deg'});
square.velocity({translateY: '-10vw',translateX: '50vh'},{duration: 2000});
rotate.click(function(){
square.velocity({rotateZ: '20deg'});
});
I have a sequence with images of an object from different angles. I want the object to be faux rotated when the user drags its mouse, and this I have implemented.
But what I want, is when the mouse leaves the image area, that it animates the image sequence back to the default position.
For instance, I have 30 JPEGs, where 1.jpg is -180° and 30.jpg is 180°. Naturally, 15.jpg is the centered default image at 0°.
So, if the user rotates all the way to (-)180° it will rotate back to 0° after say 3 seconds. But I want the animation to be as smooth as possible. How would I go about to do this?
For the animation to be as smooth as possible, you should use a CSS sprite, an image containing all your other images, so the frames will all be loaded when the animation start.
Then you only need to call a function in a given amount of time, based on how smooth you want the animation to be, and change the background property of your image. Or, if not using sprite, assign a different src to it.
I think you should choose a frame-per-second value of no less than 25. Higher frame rate means more smooth animation, but more CPU used.
This is the basic approach
function next_frame() {
frame += 1;
// start animation again from the start if last frame reached (optional)
if ( frame == max_frames ) {
frame = 0;
}
/* change either the class of your image (if you use sprites
and specified a class for each background position) or the
background position property directly. If not using sprites,
assign a different image src based on current frame.
*/
// call the function again
setTimeout( next_frame, 1000 / 25 ); // change 25 with your desired FPS value.
}
If you want the image to animate back, you just need to apply the same approach but with the frame numbers going backwards.
I am trying to create a spot the ball game, so it will (eventually) be an image of a player kicking a ball but the ball has been removed and the player needs to click where the ball should be.
The first version went well and works.
http://enjoythespace.com/sites/game/test.html
But what I need to add is some sort of zooming so you can see more accurately where you are clicking. I been playing around and have come up with this
http://enjoythespace.com/sites/v2/demo.html
But once you click it looks great when zoomed in but when you go back to the image its way off.
I think its todo with how the image is setup, the #webpage is half the original size of the image and the #retina uses the full size of the image.
Any help?
The first problem is that you aren't setting the retina backgroundPosition correctly.
This code works (I added a zoom variable to make it clear how changing the zoom would change the calculation, but it would need other changes too):
/* Moving the retina div with the mouse
(and scrolling the background) */
zoom = 2.0;
retina.css({
left : left - sizes.retina.width/2,
top : top - sizes.retina.height/2,
backgroundPosition : ""+(-zoom*left+sizes.retina.width/2)+'px '+(-zoom*top+sizes.retina.height/2)+'px'
});
Test this by checking that all four corners are seen correctly in the retina, i.e. when you're over the corner of the main image, the corner should be in the center of the retina circle.
The second problem is if you resize the browser the position calculations are out because the offset variable isn't updated for the new size. A simple way to do this is to put this as the first line of webpage.mousemove() so the offsets are updated every time:
var offset = { left: webpage.offset().left, top: webpage.offset().top };
It looks like you are passing the top/left position click point of the zoomed image to highlight where you have clicked. What you will need to do is alter your top/left position based on whether the fisheye is over the image or not.
Does the un-zoomed image have to be part of the news page or can it be a standalone image?
If it can be standalone then the solution should be quite simple. If the zoomed in image is twice the size of the unzoomed one then you can just set the top/left values of the highlight to half the value of the zoomed, when looking at the unzoomed.
Jquery position will allow you to accurately get the position.
jQuery Position()