Get position of rotated div - javascript

I'm working on a drag and drop div project. In my editor it is possible to resize, position and rotate a selected div. It all works fine as long as the rotation is 0, but once I have set a different rotation, it starts behaving different. I'm not sure exactly what I need to do, but there must be some sort of offset that I need to take into account.
Best example I can provide is: http://recordit.co/0Pskwtrvh0
Notice in the video that without rotation I can move the div around without any problems, but after setting a rotation, everytime I click the div "skips".
Hope someone understands the problem and can push me in the right direction.

Related

Approch at leading an Element through the page while Scrolling

I have to "lead" respectively move an Element (the red one in the sketch below) through the page in a given way (so it won't collide with the content). The box should move along the given path while the user is scrolling.
I tried to set the position of the element to fixed at the left / top corner and then just move it along the horizontal axis while scrolling. But i think this is not the best solution and the code is pretty ugly.
I also tried to solve this with the skrollr parallax framework, but this isn't possible.
Here is a sketch of what i'm trying to achieve:
So what is the best approach to solve this?
Edit:
To get a better idea of what i'm trying to achieve here's a link to a page which has something similar: http://rit-team.ru/
That page is unbelievably cool...
If you want to preset the path (as they did) then the principal is pretty straight forward. Define an array of 'checkpoints', essentially x coordinates. You then use the vertical scroll offset as an index into that array, setting the position of your moving element accordingly.
If you want to 'drive around' elements of arbitrary size, then I have no idea. These guys won a design award for their efforts, so I'm guessing it's not a walk in the park.

Javascript "dragging" an image across a canvas

There's quite a few questions about this where the solution provided is to just set the top left and top down values of the image to the position of the mouse/touch, however what I want to do is to have an actual dragging movement. Regardless as to where on the canvas I press, if I drag my finger to the right x pixels, I want the image to move to the right x pixels. Same goes with left, up, and down.
I'm at a complete loss as to where to even start with this. I will be handling mobile touch events, so I feel like using canvas.addEventListener('touchmove') would be the best option, but I'm not sure.
I already have the canvas repainting and everything handled, just really need help with the logic for dragging the image in real time, instead of just snapping it into position.
Get the point where the interaction starts (touchstart) and use it to calculate how much the finger moved on the screen (in the touchmove callback) and add it to the image position (also in touchmove).
PS: Also I recommend using something like PIXI JS for canvas/WebGL stuff ... unless you need a custom solution.

Zooming image to mouse cursor with Javascript and returning to the images original position

Part of my app requires the user to be able to use the mousewheel to zoom in on an image which is already centered inside a larger container element.
I am using jQueryUI to provide a slider with which the zoom is controlled manually.
When zooming withe mousewheel, the viewport adjusts so that the user is always zooming towards to mouse cursor providing exactly the same behaviour as google maps in terms of zoom functionality.
Also, in order to provide a better experience than using css transitions I have written a momentum based smooth scroll algorithm to make the zooming as smooth as possible.
Everything works perfectly with one exception.
To replicate the problem please follow these steps on the provided jsFiddle:
move mouse cursor to the center of the image.
Very gently move the mousewheel one notch so that the smoothwheel takes over an zooms you in a little.
Then move the mouse cursor to another point of the already slightly zoomed image
Zoom in again, as far as you want this time
Finally zoom all the way out
You will see that the zoomed out image is now misplaced (as the translates have not been removed).
The behaviour I want is for the zoomed out image to return to its original position once the scale is set back to 1.
If you remove the css translate from the image in Firebug you will see that the image returns to the correct location.
Therefore this could easily be achieved with a simple conditional like so:
if(scale == 1){
//remove transforms completely
}
However doing this would provide a jumpy experience and I would like the image to gradually zoom back out to the original position as the user zooms out.
It is worth mentioning that if you zoom all the way in without moving the mouse you will find that everything is correct when you zoom back out. This is simple because no translate gets added to the elements transform, simply a scale and transform-origin. In my code the translate only gets added when you change zoom position with the mouse mid zoom.
Unfortunately I cant seem to get my head around the best way of going about this.
Here is a working jsFiddle:
http://jsfiddle.net/3k332/15/
Thanks in advance for any help.
NOTE: I am well aware that there is some redundant code in my fiddle and that its not particularly elegant but this is merely a quick mock up to help you understand the problem.

Zoom in on mouse position in KineticJS

Question:
How do I zoom in on the mouse position on mouse wheel scrolls?
Details:
I am trying to merge this complete solution on Stack Overflow, which allows for zooming of the stage, with this incomplete solution, which allows for zooming in around the mouse when clicked. I have forked the jsfiddle code here. The code works fine once you get it zoomed in, but upon first scrolling, the stage jumps to a different location and I can't figure out why. Can anyone tell me why it is happening, and how to solve it. Thanks.
Just a guess, but you are using the mouse position relative to the page not the canvas
When you zoom, the position under your mouse position gets changed (the reason of jumping). To move back the position to its original position, you need to pan the offset( difference between the previous position and the new position(after zoom)). To avoid stage jumping to a different location, you can use stage.setOffset function of KineticJS.
JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/

CSS 3D Transform - opening a card

I'm making a ecard. When the user clicks the card, it will open and show its contents. How do I make this in CSS and javascript? I am using perspective and rotation, as you can see here. If you know an example that looks like what I'm trying to do, please post the link.
Here's the solution that I've played with:
Create a style that does the rotation animation.
Create a style for the end result of the animation (basically the same as your to section in the animation style.
Create a button or trigger to add the rotation style to your <div>
Set a timeout in JavaScript for the same duration as your animation.
Once the timeout triggers, remove the animation style and add the end result style
Here's a modification of your jsFiddle. Getting the back side to work had a few quirks. The backside has to be positioned so that its right edge lines up with the front side's left edge. Then, you must rotate the back side -180 degrees so that it starts out behind the front page. Also, I had to switch the z-indexes once the animation had reached the midpoint.
All of this is hard to explain here, so I devoted an entire blog post to it. I created a bunch of visuals to help make it clear.
There's also a more simple solution to work with; instead of switching z-indexes with a timer, you just need to specifiy that elements have no backside (-webkit-backface-visibility: hidden), and flip the yellow card 180 degrees, so its back touches the red backside.
This way, you only need to flip the container containing oth the yellow and red cards, which can be done by adding a class (e.g. class="card opened").
Here's your example code with these changes:
http://jsfiddle.net/pYJm6/90/

Categories