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.
Related
Hi I have to animate using Javascript or somme kind of library (or CSS, whatever works best).
I am more of a PHP coder and I am not a Javascript expert. I am not exactly sure how to explain what I need so I am going to try explain it visually by adding a (badly drawn) picture:
I need help in how I can proceed with this, whether you can tell me what terms I can search for on Google, links to articles, anything will be appreciated.
Here a global list of what you can use to animate something (all of these combined with a scroll listener in your case)
Anime.js if you don't care about IE<11
Canvas also can be good option and has wide browser support
Keyframes used with classlist api to fire animation when it needed
Sometimes you can just change src of image to gif (without endless animation in your case)
I recommend you to just using GIF here if you can.
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
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path
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!
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.