The current state of my project can be seen here on jsFiddle.
I'd like to massage the behavior of the sliders just a smidge.
I'm looking for a way to nudge them so that the X value registers from the center of each slider.
As you can see, the sliders nicely set the values of the inputs, but they look/feel a bit unnatural because the X value is according to the leading edge rather than the "center mass".
Moving a slider as far left as you can feels like it stops short. Moving it as far to the right as possible feels like it overruns its boundary.
I'm sure I could imagine up some really nasty hacks, but I'd much prefer a more professional approach :)
My thoughts first went to CSS (I was kinda hoping to just nudge it a little), but no luck so far.
My guess now is that it will boil down to a JS solution.
Any thoughts/ideas?
You can adjust the position without changing the x value through transformations. All you need is to add the transform attribute...
<rect id="rect_slider_knob"
class="slidable"
width="4%"
height="24%"
y="38%"
rx="2%"
ry="3%"
stroke="#666"
transform="translate(-6, 0)"
/>
You can see a demo here: http://jsfiddle.net/mzmRN/
P.S. It's a pretty nice widget, so I couldn't resist improving the interaction of your fiddle, I hope you don't mind!
Related
Sorry if this is a silly question – it feels like it should be simple but I've been searching the Framer Motion docs, Googling, looking for previous Q/A's here, all to no avail.
I've got a draggable motion div, and I simply want to tweak (specifically, lessen) the momentum of the element's movement on drag release.
<motion.div drag >{child}</motion>
I don't want the element to snap back to its origin point, by the way, which can sort of be controlled with bounceStiffness and bounceDamping, but yeah, that's not really what I'm after. Is there another property/param I can use for this?
I don't know, it just seems like this would be a really common parameter that people would need to tweak, but maybe I'm missing something obvious.
Thanks in advance!
If anyone comes across this in search of the same answers, I ended up going through the source code and found some properties I hadn't seen mentioned anywhere in the docs.
Add these properties to your motion.div (or whatever draggable element) and tweak as required.
dragMomentum={true}
dragTransition={{ timeConstant: 1000, power: 0.1 }}
So I have some elements I'd like to display in a project I'm working on. Each of them is supposed to look like a pixelated banner, sort of. Here's an example:
The straight lines on the left and right are easy. Those are just simple borders. The bottom of the banner is the difficult part. I would like for this to be able to adjust kind of like a flex object would. This requirement is making it very difficult to find a solution. The pixels need to remain the same size and so it seems like an svg wouldn't work.
I spent a decent amount of time googling last night and I found some solutions, but none seemed to be adjustable. They were static sizes with pixel manipulations to get the effect.
Can anyone think of how to achieve this effect? Just being pointed in the right direction would be wonderful as well.
I think the border-image property might help you. You'll need a static image with of your pixel border to be sliced at the appropriate places.
You could also try border-radius for curving the border, if the solution you're using now would work with that.
Have a situation that I am trying to figure out the best approach.
It consists of an image, then peg's pointing off reference points of the image w/ labels. I am attaching an image as an example.
I have not mocked up code yet, still debating the best approach so I was hoping to get some input from the community.
Thoughts:
Static use of top/left positioning: Issue there is this needs to be responsive. As the image scales, we lose accurate placement
Javascript: Could try n use javascript to calculate the positions using ratio'd equations and jquerys .postition()
SnapSVG (or similar), This is what I am playing with right now, create the lines/circles with snap and animate them in. I've never used it, so there is a learning curve.
Would love to hear some thoughts! Thank you
It can be difficult to use (webpage) sliders that cover a large range with fine granularity. On the one hand, it is easy to move across the range. On the other hand, it is difficult to locate the exact point one wants, assuming a fine enough granularity.
I was thinking that a magnify effect around the cursor could solve this problem (assuming the problem really exists).
I looked for existing solutions or ideas via google, but couldn't find anything.
Any suggestions here?
I doubt if this is what you're looking for, but... within Mac OSX, holding down the control key and moving the scroll wheel will zoom in and out.
I'm having trouble thinking of a scenario where having so much data that scrolling of this nature would be a problem you'd want to have. In almost all scenarios it makes more sense to chunk up the data or reduce it down in some other way.
About the only thing that makes sense is the seek-bar/scrubber on a video player. If your player is 400px wide with a 360px wide scrubber, but the video is an hour long, the best granularity you'll get is 10 seconds-per-step (with the step-size being 1 pixel).
If that isn't enough granularity, then it's possible you'll need to augment your scrubber with another UI convention - which could be a magnifier - but it could also be other things. Like a "jump to point" text field that would allow to user to entire a time and seek to that exact position.
It sounds like you're going for something (visually) like the OS X dock. This is called a fish-eye effect. There's a jQuery plugin for a fish eye menu which you may be able adapt and merge with a slider to give you the functionality that you're looking for.
I have a small problem with how should i think a... problem. I want to do something somehow similar with this: when you move mouse near to the edges, you will see images scrolling faster than how is scrolling when you have the mouse in the midle of the DIV.
Don't know if i explained right, but ... i don't know how to tackle this. I'm sure that is binded on mousemove but also i guess is somehow related to math. And math isn't my best skill :D
Thanks guys!
Unfortunately there's not much more to tell you than what you can already read in the source code of the site you linked from line 59 onwards.
I'd likely recommend simply trying to duplicate something similar within your own sandbox page using that code they have as a guideline. Simply strip out everything you can and just start with a single image, bind the mousemove event and try and get relative positions using offset (see jquery - offset).
It's a pretty nice implementation of the new canvas tag though, I haven't seen it used much yet, so thanks for passing on the link. I can at least offer you some interesting links on the canvas tag that might give you a few pointers.
This is an old question, but you can calculate a procentage based on the distance between the mouse position and the edges. Then use that procentage to set the speed of the animation.