We Keep Coding

CSS animation play only once when section is visible on the screen

I got inspired by this website: https://brittanychiang.com/ especially the animations.
The ones which appear at the header when page is loaded are just typical css animations with delay or something. But when you scroll down and the another sections are visible the animation appears again and only once. Can you do it with pure CSS or you need to include JS?

Are you talking about the float-up animations on scroll? If yes, that can be done using CSS but might require some javascript as well based on your requirements to setup the animations. You can read more about it here.
Alternatively, you can use this as well to get your work done easily! However, since you want the animation to show up only once, you might have to make some changes using javascript.

Best JavaScript library for animating multiple divs

I have a grid of div boxes that I will be animating. They will be moving across the screen after a user drags one of the boxes (to re-align into a grid).
Currently I am using JQuery to change the css left and top positions of all of the divs and running this on an interval.
It is laggy if there are more than 50 boxes. How do I make this less laggy? Is there an animation library that is better for this, or do I just need to limit it to 50 boxes?
Image of layout:

You have a few options to optimize the performance.
Newer browsers have requestAnimationFrame that lets the browser take care of the animation timing in order to optimize Javascript animations. Rather than using times to perform the animation, which is what jQuery framework uses, you repeatedly a callback to requestAnimationFrame. The browser will call your function with a progress variable for the animation, and you render the current stage of your animation based on the progress variable. requestAnimationFrame for smarting animating talks about this in depth. Google Closure is the only framework I am aware of that uses requestAnimationFrame however, and it's rather heavyweight.
CSS animations. jQuery offers CSS animation, so do many other frameworks. CSS animations give you hardware acceleration, so the animation is much faster. Unfortunately, CSS animations are relatively new and not yet well supported, so you'll probably end up falling back to Javascript animation on older browsers, depending on the library you use.
Optimize your Javascript. Instead of animation each and every box in the grid, encapsulate each row in a div and animate the entire div instead. That should speed the animation up by a bit. I'm sure there are other ways you can optimize based on your current implementation.

Honestly, I don't know of any library that will make this work more efficiently for you, though there are many libraries out there that are faster than jQuery. The issue isn't just the jQuery, its the fact that you have 50 elements that are all moving/draggable, thus requiring a lot of the browser's resources.
If you can post your code there may be a few things that we could suggest to speed it up slightly.
The two biggest things problems that I can think of are if you added those boxes programmatically and added the handler for each as you added the element to the page, and if you don't store your selectors in variables. Aside from that I would have to see the code.

Have a look at:
jQuery isotope
It has options to allow you to use css3 animations if available or use jQuery / JS animations.
Handy for grid like animation and arrangements.
Some brave soul has managed to add drag and drop to isotope too. http://tyler-designs.com/masonry-ui/ (a bit clunky but works)

There are several ways of increasing the performance. One would be to reduce the amount of DOM elements required for each box. Another is to not animate (and render) boxes outside of the current viewport. Give all boxes that are outside of the viewable area "display: none;" and exclude them before starting a new animation. If you want to go even further you can start to recycle boxes instead of showing and hiding them when the user is scrolling through the page.
This way you will always get the same performance no matter how many boxes you have (above the amount that you can fit in the viewport).
This technique is called UI virtualization. There are several projects that use it like: http://github.com/mleibman/SlickGrid/wiki. It's really useful when you need to render a lot of elements (hundreds, thousands, millions). But it takes quite some work to get it right. And I don't know about any generic working components that are easy to plug in. I tried to find an article that explains it. This is the only thing I could come up with for now, it's for Silverlight though: http://www.silverlightshow.net/items/Virtualization-in-Silverlight-4-RC.aspx
Also try this this plugin for jQuery. Use the regular 'animate' method and it will try to use (hardware accelerated) CSS animations where possible: http://playground.benbarnett.net/jquery-animate-enhanced/

Change loading of images from top to bottom, to left - right

I am using this tutorial http://css-tricks.com/seamless-responsive-photo-grid/ to create a grid with lazyload as you can see here in action http://jsfiddle.net/gaz2A/
The problem is that the images are loaded like
1|3|5|7
2|4|6|8
instead of
1|2|3|4
5|6|7|8
and leaves the start screen blank at the most part.
How can I change this ?
*I tried masonry plugin with infinite scroll, however I do not want to rely on static pages, so masonry is not a choice for me.

Images will load in the order they are presented in the DOM.
Either change the DOM representation so that the images are appended into DOM in the correct order (eg. side by side first), or use some JS based preloading to preload the images in the order you want.

Blur all the objects(Images,div,text..) that comes behind a div tag

Need your help.
I created a static semi-opaque banner which stays at the top of a website. When a user scrolls the website the entire container objects goes underneath the banner. I want all the objects (images, text..etc) getting blury effect as it goes underneath the banner.
Thanks

The only way you're going to be able to do this is by getting fancy with some CSS and javascript. CSS doesn't support blur directly, but you can emulate it with text-shadow. Images can also be blurred with a little jquery/css/javascript magic, but will be problematic because you can't partially blur an image (what happens when only part of the image is under the banner?). It could probably be done by layering your images and keeping track of their position on screen, but all of this seems like a lot of work for a very small return.
So, assuming you've decided to give all of this a shot, you're going to have to use javascript to determine which parts of the page have passed under the banner and apply the style to those parts. The difficulty of this task will scale with the complexity of your page layout. In a best case scenario, your banner and content container are both 100% the width of the html body. At this point, it would be fairly trivial to write some kind of scanner that traverses the dom every time you page scroll to find elements that the blur should be applied to. However, best-case-scenario is rarely the case at hand, at which point I'd recommend abandoning the effort to pursue something with a greater ROI.

This isn't possible with CSS nor jQuery. You might be able to do something with IE's filters, however that's IE only (of course), and will invalidate your CSS.
Currently, there is no way to do this, although something might come along in CSS 4 or something.
The Chrome nightly builds support some filters, however there isn't an alpha blur filter (yet, at least).

How is this layout issue commonly addressed?

I have a page where the following occurs:
some stuff is rendered. static content, and content meant to be enhanced with javascript.
some of the divs are instrumented for enhancement via jquery in $()
some of these 3rd party scripts measure the divs they are putting content into so they know how to render it.
in the meantime, as other divs are enhanced, sometimes the page gets long enough that a scroll bar appears. that means the page just got thinner and the measurements that the plugins made are now incorrect.
some divs get enhanced with the wrong width.
ugliness!
If I resize the browser, everything "snaps" into place where it should be.
I can see 2 solutions which I don't like.
somehow force the browser to re-layout everything after every enhancement.
force a vertical scrollbar. http://ryanfait.com/resources/forcing-vertical-scrollbars/
This has to be a fairly common issue. Are there other tricks or suggestions?

KISS method : force the vertical scrollbar to be there.
Forgot to mention, you can also simply use this :
html {overflow-y: scroll;}

You could force the scrollbar to always appear in CSS, or you could set your jQuery code to execute when the page has fully loaded instead of when the DOM is ready, example below:
$(window).bind("load", function() {
// code here
});
This may result in 'jerkiness' as content gets rendered, then is shuffled around as the script configures it for the viewport size.
Personally, I'd just force the scrollbar. Most visitors wouldn't even notice it was there all the time anyway.