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.
Related
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.
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.
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).
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.
I have a canvas where you can draw and I would like the user to see the size of the point he is drawing. So I need to draw a custom cursor as 10x10 pixel square on the canvas.
Of course I would not like to paint over the image while the user is just moving the mouse.
My ideas how I could do this:
I could somehow backup the original image and paint it all over every time
I could move a with the cursor. But I would need to forward every click and make it invisible if the cursor left the canvas.
I could create a layered canvas with a second canvas on top of mine just for drawing the cursor.
What would be the best to do this?
Update
Sorry, I did not explain myself very well. The cursor will need to change color and snap to a grid, so I really need to paint it myself. I know about css cursor:url(...) that does not work for me.
Checkmark+1 to PitaJ and David Starkey--they are correct.
The simplest/most efficient solution is to modify the cursor itself. As mentioned, you can even do custom images for the cursor to do your color changes.
But if you absolutely need snap-to-grid then you have to go with something like the layered cursor canvas. There's no way to force a user's cursor into grid alignment. (Think of the pranks that would result!)
Both number 1 and 3 would work. I would go with number 3 myself. "Best" however is up to you.
CSS3:
#canvas1 {
cursor: url(./myCursor.cur), none;
}