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.

Fixed row-height, flexible width, justified image gallery

I'm working on a full page, flexible width image gallery.
https://weknowtoomuch.com/projects/nga/projects-grid
Now, you probably start to get an idea of what I'm trying to do. The page in it's current state is rather good, but the spaces between the images (blank spaces around the center of rows) are a bit too big.
The way I have implemented that is very simple, just distribute images by alternating their float property between left and right.
The effect that I'm trying to achieve, ideally, would be something closer to this:
http://images.search.yahoo.com/search/images;_ylt=AwrB8p4dRulSGDgAuCeZDWNH;_ylu=X3oDMTBwazJlZjZ1BHNlYwNzdHJtBHNsawN0aXRsZQRjcG9zAzA-?p=2014+Super+Bowl+pictures&aq=Trending&sid=743e5f15-0b3b-3483-ada1-c617f8754761&spos=0&norw=1&
I tried some research, but the solutions that I found involve fitting all images by changing row height, which I'm trying to avoid. Some tall images might also have to occupy two rows, which would also probably not work well with the changing row height technique.
What I'm hoping for, maybe, is an algorithm that would let me distribute images in a way that white spaces are minimized, and also randomize the location of white space blocks.
I am not using jQuery in this project, but I could do an exception if there is no other reasonable way!
A complete solution that fulfills all the above criteria would also be a good alternative to implementing an algorithm myself, in case you have a tip in that direction...
A final note: some minimal horizontal cropping of images is also acceptable.
Hoping to get some tips, leads, and other useful feedback, and that this would help someone else sometime.

Strangely, a similar question was asked yesterday. In my answer I have presented a draft for a layout engine that adjusts the height of each column to achieve a tile effect.
You don't want to adjust the heights, but the mechanism could perhaps be altered to fit your needs. If you don't update the heights, you can achieve justification by distributing the remaining space among the gaps between the photos. That can create very large gaps which don't look nice. Alternatively, you can achieve a more compact look by centering the rows at the cost of having ragged margins. Still, this looks better in my opinion.
I've created a scrappy prototype (that does not work in IE and has other issues). It centers the images, but you can download it and alter the gap and center parameters.
I know that this is not an answer to your question, more like a suggestion. There are bin-packing algorithms for evenly distributing the images over the rows. Also, the issue of the double-row images is not solved.
Are your photos of arbitrary size or do you use, say, three or four standard sizes? If so, possible layouts could be precalculated and then applied on the fly.

There a way to optimize the performance of svg?

I'm making an application with d3.js, but I'm driving a lot of data and graphics are way too big, which is slowing me much navigation.
Could someone tell me what could be a solution or a way forward.
This is the application. http://www.ingeniosolido.com/s2m2/prototype30/line_zoom_actual_30_interval.html
This is the code.
https://gist.github.com/3854943

It does not look like you are doing a lot of element specific interaction. You might consider rendering to canvas. See: HTML5 canvas alternatives for d3.js, graph visualization library

Have you tried to remove some (read: most/all) of the clip-paths? It's almost always faster to not use clip-path (unless it clips away expensive areas, e.g filters, opacity, complex geometry and so on).
It looked a bit like you could at least move some of the clipping up a level, to be on a parent <g> element for example.
Also, the svg you link to doesn't really qualify as big markupwise.

Rendering elements around a central point

I've got a bit of a tricky question I couldn't find the answer to. Basically, This is what I have:
In the center is a search box (fixed to the center of the page), and around it are dynamically loaded search results of differing sizes (although, if need be these can be restricted). Thing is, they need to "wrap" around the search box after the results have been loaded. My normal go-to is floating, but this isn't really going to work, as the box isn't aligned to a particular direction.
I've looked at jQuery Masonry for a solution, but it isn't going to work for me (doesn't detect fixed elements, doesn't work from a point).
Any pointers in terms of solutions or Google-Fu would be much appreciated.

This is similar to packing textures of different sizes on a square. Have a look at this algorithm: http://www.blackpawn.com/texts/lightmaps/default.html
Since you have a central fixed box, maybe you can divide your available space in 4 rectangles and then pack the boxes into them.

Methods to make a layout compatible with window resize as well as font resize

Is there a good advisory / best practice manual etc. out there which outlines methods to make a page layout fluid in the following two ways:
a) The layout should be robust under window resize
b) The layout should seamlessly handle font resizes committed by the user
Every time I design a page layout I end up using different, ad-hoc methods to make the page robust under both a) and b) above. Some of the methods I have used before are:
handling body onresize()
declaring all values in % (this gets stuck when image dimensions have to be defined in px)
placing a div at -10,000 px and polling it at intervals to check for font resizing (gasp!)
I find these above methods quite bad and would love to find standard, robust methods for this problem. I am sure other people here face (and solve) these problems everyday.

Designing web pages is like cooking for a large group of people. There will always be people who dislike your cooking. What you need to do is to design in a way that will make most of your visitors happy.

All liquid pages will have a mix of viewport-relative sizes and fixed-pixel sizes (for, as you noted, the images, and other elements that have to be sized to match the images). You may also want fixed-em sizes for some elements.
So a common approach would be, say, to absolute-position a fixed-width sidebar on the right, and give the main body text a right-margin equal to that width. There are many methods for achieving these kinds of layouts — see endless posts about ‘liquid CSS columns’.
In the most complicated cases, where CSS alone is incapable of giving you the combination of relative and absolute you want, there's always tables. Not ideal, but generally better than JavaScript-dependent layout.

If you are looking for more specific layout solutions, I would say a common practice these days is to use a pre-built grid layout. There are fixed width and fluid versions, both of which scale up with the user's font size. YUI also has one. No JS, no off-screen stuff.
But I also see reference to the user scaling the text from within their browser. This is not the problem it used to be. It used to be that you had to be fairly careful-- if you put text in % it would scale, but px wouldn't in some browsers. Now, all the browsers scale up the page as a whole, including text and images-- proportional to each other. The text size adjustments are really like you are "zooming in" on the page, as the images grow as well. You can simply measure text and column widths in px (or % or pt or whatever) in the "full size" mode, and browsers adjust nicely.