Develop Reference

JS Good way to make marking effect with line

There is an effect of pointing to a special element of image with line.
See example of crocodile at http://snapsvg.io/.
When the image appears at first there is no any pointing with lines:
Then after scrolling appears lines with hints:
I know there is https://github.com/julianlloyd/scrollReveal.js and a lot of other js libraries for effect of appearing.
The question is how to make this lines, place them at the exact point on top of usual image (not SVG) and animate lines on scrolling?
Would be great to know the name of this approach/effect (what to google) and see reviews on good/bad experience, or js libraries.
Update: want to see resolved issue with image resizing and exact pointing,
In most cases, see example at http://www.sitmed.com.br/produto?id=2, image has fixed isze and is not scalable, this will not work for big or small screens.
I think it is possible to write scaling library in javascript, using svg/canvas or even plain div.
Otherewise points will jump on image scaling.

To make these lines and place them at exact position:
The easiest is to use canvas or svg. Here are a few links to do that.
Drawing lines on html page
Drawing arrows on an HTML page to visualize semantic links between textual spans
Placing the lines is easy if you're using canvas. If you are using images for lines, you can place these lines with respect to the big crocodile. Not a big deal.
Animate lines on scrolling
A good place to start with knowing about animations is to learn any animation framework. I would suggest Greensock Animation Platform(GSAP). It is open source and also well supported. They have good tutorials and docs for beginners. You can animate in a very abstract manner using GSAP. Rapheal.js is also good for animating svg images.
As for as scrolling is concerned, you can find many plugins including the one which is mentioned in the question.

Just use a parallax scrolling type js library such as Skrollr. It's very easy to just make the lines a div with a background color, and then as you scroll the page the div grows in length.

The effect you are describing makes me think you are looking for something like flow or organization chart "connectors" which anchor arrows in a chart to glue points on each element. In more general graphics terminology these are likely just known as "line anchor points" or something similar.
JointJS is a great charting/drawing library for HTML5 and SVG that could make what you are doing fairly easy to do, but a simpler "CSS only" might be all you need. If you are you really looking to animate the image then the more sophisticated javascript library approach might be worthwhile. JointJS uses Raphael and Backbone.js so you get a lot of power tools in the box.

You can use this library for drawing SVG lines, its quite configurable and well documented. You basically need to specify your "From" and "To" elements and a line will connect them for you.
Then you can play with the line's stroke-dasharray and stroke-dashoffset properties on scroll to achieve effect of the line being drawn.
More of SVG animation here
I have used this approach and its quite cool looking, hope this helps

I think the best way to implement this depends greatly on what animation you're going for. To reproduce something similar as in your example, you could just stack different images (one for the crocodile and one for each component). Then as you scroll, you could change the z-index of the crocodile and use css animation to "wobble" the size of the element you just revealed. Put all of the images in one div together, to make sure they scale together and align nicely and you're done.
But for something else the work might be completely different of surprisingly similar, I really don't think there's one solution that fits all needs, except if you want to use the canvas as already suggested, but that depends on the complexity of the graphics you want to reveal.

Creating a web based "bulletin board pin map" using Jquery; drag/drop/collisions/etc

I'm looking to create a web based "bulletin board" so to speak, where the user can create/delete/drag/drop 'pins'--without being allowed to overlap 'pins.'
Here is a diagram that should help illustrate what I'm trying to create:
'pins' are created, probably upon
double click; they will prompt the user for a label.
'pins' cannot overlap;
(the final shape will be larger, more
oval like.)
'pins' will need to be able to "connect" with other 'pins' with a visual element (i.e. dotted line,) but not all pins will be "connected."
I found GameQuery which allegedly supports bounding box collisions--but it's beyond important that the collisions be detected with ovals, not boxes (I know the above example might suggest otherwise, but that's just a diagram... not a mock up of the intended final design.)
The 'pins' may also vary in size/shape, depending on label size... this should be taken into account as well I imagine, to ensure an approach conducive to all the UX variables.
I've found Quadtree and Collision Detection along with this GameQuery collision demo, but it all sort of looks a little like gibberish. I'm looking to be pointed in the right direction, just so I know that what method I invest my time into, will work for my desired result... rather than busting my balls figuring out Quadtree and GameQuery for example, just to find it they won't work for this project.
...
Also, if any experienced developers are willing to be a mentor for me on this project--I am prepared to offer my extremely refined design experience, for a few "I need help" questions along the way.
How do I adopt an n-sided polygon into the pre-existing bounding box functionality of GameQuery? It doesn't need to be a perfect circle, but at least 8-sided.

I don't think that your problem is really one that relates to jQuery or even Javascript at all. Your problem is, how do I detect when an ellipse overlaps (or does not overlap) another ellipse? It's a math problem, and it's one that has already been asked here.
Be warned that this strikes me as a pretty difficult problem for someone who is new to programming. I'm not at all new to programming and I would see this as challenging, particularly with your other requirements - drag and drop, and so on. You've taken on a pretty advanced problem, and at this point, anything you can do to simplify (such as using bounding boxes) is something I would strongly recommend doing.

Drawing a grid in javascript ( game of life, for example )

Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.
Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.
The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.
I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.
Answer should include either one of the following:
a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS
b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.

Why not build the grid as an HTML Table? After all this is what you want?
Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.
You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.

<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.

For a small grid (< 100x100), use a table and give each cell an ID for fast access.
For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.

slider that also magnifies around cursor

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.

Anyone knows the algorithm for this kind of rubbery effect?

I'm doing some animations and I want to implement something like this on the web. I was thinking that the HTML canvas can do this kind of job. Because I can scale part of an image. I just need the algorithm to actually make it work.
The effect is elastic, if the window is small, the greater the elasticity of the window when you restore it. I was thinking that I can make this work in web images.. if the user click the image it will scale with this kind of effect, not the boring way of scaling.
This is ubuntu, I know that we can look at the source code maybe to see how it actually implements the animation. But I dont know where to find it. Or i don't even understand codes written in linux because I just understand php, javascript. Basically I'm not a software developer, My core expertise is in web development.
http://www.youtube.com/watch?v=hgQP-aFragQ

I believe your best bet is having a look at John Resig's Processing.js.
Processing is a animation language for Java; John has ported it to the browser using canvas.

Your not going to find a web based solution that is going to do this for you. If you need something like this done it will have to be in flash or some other application (Lenni mentioned Java) that runs in a separate media box embedded in a web page.
People don't want big flashy animations, seeing something that is 'boring' is much better if it becomes more usable.

First up - I don't know the actual algorithm they use here.
However, I'd attack this by creating a grid of points (say 10x10), each point attached to it's neighbors by damped springs. It might be worth anchoring the edge/corner points to the screen with springs too.
By deforming the grid (stretching and compressing the springs) and then modeling the spring responses, you'd get some interesting effects like those shown. You might then be able to record the patterns so that the points can follow a pre-computed path for faster animation if your animations are predictable.
Then you need to work out how to split the image and map it onto the grid. The splitting may be better done once on the server, but the client can do it if you use canvas.
svg & vml is a possibility - they'll work without plugins and are similar enough to code for, but I don't think you'll get correct enough image deformation. However, you can scale and rotate with impunity (and quickly) so if you just anchor 2 cell image points to the grid rather than all 4, you'll get an interesting animation - not quite like the video, but pretty good.
As for how to model damped springs, you'll need to keep track of the mass of each point (how heavy it is), how much force the spring is exerting on each point (scalar of how compressed/stretched it is and it's vector) and a damping force on the points (resistive force to the square of the velocity of the point).
It's physics modeling, to be sure, but quite possible.
The response may well be slow. Especially on IE. Canvas needs a plug-in on IE, so if you use canvas, IE folk wont see it. SVG works on almost everything except IE, but it does have VML which is similar. http://raphaeljs.com/ is a library that uses whatever's available. This will be a challenge to tune up :)
However you do this, it will always look best in chrome, the V8 javascript engine outstrips everything else for this kind of work. IE has the slowest javascript engine.