How page turn effect work in turn.js - javascript

I want to implement similar thing (page flip) and was wondering how turn.js created it's effect. It use css transformation: translation and rotation to create the effect. I was checking in inspector that there are two wrappers with rotation (as pointed in this answer) but rotation are
outer wrapper positive number like rotation(30deg) and
inner wrapper negative rotation with the same angle rotation(-30deg) (if dragging bottom left corner).
I try to use the same thing in test page (only rotation) but the only thing that work is removing the corner, and it don't rotate the page (I use image) in demo is upside down when angle is 45, why this don't work? If I set
-webkit-transform: rotate(180deg) translate(102px, -326px);
on the image it's right but why turn.js don't apply any transformation to original element of the page?
Here is jsfiddle.

I found that rotation the page that is below is in different div, the current page with positive and negative rotation is only for clipping the current page.

Related

Keeping rectangle in place after rotating

I'm building a grphical editor that allows moving objects, resizing etc.
In the picture you can see the upper rectangle. When I move the anchors it resizes just fine. However, when it has a rotation like in the lower image (ie. transform: rotate(20deg)) and I move the anchors, the rectangele starts floating in different directions depending on the rotation. I'm guessing it's because the the x and y axis get rotated as well. I'm looking to do some sort of calculation to keep the rectangle in place just as if it weren't rotated. transform-origin doesn't cut it as it has other transforms applied to it.
Could anyone help me find what x and y offset I have to apply to the position when it gets resized. Thank you very much!

Semi-Circle arc Scroll javascript

I am trying to achieve something like this http://www.ibeyi.fr but I don't know where to start. Any steps in the right direction would be greatly appreciated.
They are using a library called skrollr. That on its own won't give you semicircle effect.
Basically they are rotating the entire semi-circle element as the page scrolls, and then rotating the contained elements in the opposite direction to offset the rotation.
To see this in action, inspect one of the spinning elements and watch transform property change as you scroll.

Get position of rotated div

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.

How to get svg and mouse cursor position correct

I'm trying to make a vertical draggable thermometer type component. You hold on the circle thing with the arrows and drag up and down and it moves with the cursor. With normal HTML/JS this is easy but I can't seem to figure out how to get the svg piece to move with the mouse. Right now it moves in the right direction but it's way off from the cursor.
I've read about a dozen answers of this on Stackoverflow and they all seem to use the same code which i have at my link, but it's still off. I'm not sure what I'm doing wrong at all.
Demo: http://jsbin.com/qoyozej/3/edit?html,js,output
p.s. the width and height in the <style> tag works fine in Safari and Chrome, but not in Firefox. I'm not sure how to fix that yet so the color bars wont show up in Firefox right now.
You are using evt.clientX and evt.clientY, which gives you the coordinates of the mouse event on the page.
You need to subtract the (top left) position of the SVG from the coords before you do the transform.
apart from calculating the relative position of your element on the page (as paul's answer suggest), you also need to consider how viewbox affects your graphic;
for calculating the correct position relative to page you can use getBoundingRect() method on the svg elem,
for calculating the correct scaling you could do some math dividing height with viewbox height and multiply that by cursor.y (or you could use scale inside the transformation).

Make element behave same after css scaling

I'm manipulating divs with javascript all the time.
Sometimes I need to make those divs fit inside a container who's size is contantly changing.
One way to make that happen is to use css scaling.
The problem with scaling is that it simply schrinks the picture of the element.
The system continues to see the element the same way. So all location etc. become skewed. For instance, if I position the div to become top:0%, then if the element has been scaled down it will not go to zero percent but a bit below that, because the system thinks the div is bigger than its visuals show.
This change in behavior causes a lot of complications as the system is now making assumptions about the elements that simply dont hold true.
It's bad programming.
I looked at the 'zoom' but the articles warned against using it.
Is there any way to scale elements and also keep the system updated on whats actually going on?
The default transform-origin is 50% 50% (the middle of the element), so when you reduce the size of an element with scale, the edges are "retracted" from all sides towards the middle.
so the top left corner appears to move down and to the right. But if you set the transform-origin to 0% 0% (top left) only the right and bottom sides move.
Hope this helps!

Categories