Develop Reference

Make an 3d effect with jquery

When i was surfing on the internet, i saw this : http://www.enter-the-void.co.uk/#/menu
Have you got an idea about make this with jquery / html5 ?
Thank you in advance.
EDIT :
Finally i think the best way is use this method :
Create a container div with height 100% and width of 1200px per example
Create and fix on this container many little div
With jQuery get mouse position and move the container div at right or left
When the container moving add "perspective" style with CSS 3D transform on little divs
What do you think ?

Obviously, there are several creative way to get at this. BUT, as of right now, no browser supports 3d rendering natively. However, webkit, opera, and mozilla do support 2d rendering
What this means is that through javascript and css solely you can create the appearance of 3d. But beyond what has been already mentioned (WebGL, three.js library, canvas tricks), no browser supports 3d rendering.
Read my year old blog post about this: Simple '3D' Rendering With CSS3 and Javascript

Off the top of my head, Three.js could help you with that. Its a javascript library for rendering 3D objects. The objects themselves wouldn't be too hard I guess; a bunch of flat surfaces with custom textures. The camera might be harder to accomplish though.

You Can Use Webgl or canvas for Make This Effect

Like rory mccrossan said in the comment.
check for jquery parallax, thats exactly what happens on the into the void site.
put your divs on differnt parallax layers and see the magic happen ;-)
http://stephband.info/jparallax/
https://github.com/IanLunn/jQuery-Parallax
http://www.sequencejs.com/themes/sliding-horizontal-parallax/

jQuery animate circle

I need to animate a circle with Jquery:
The circle will be a round picture (let's say a ball) that will turn around itself 360 degrees.
How can I do it without flash?
It should stay in the same place, but will only rotate (wander around)

Not sure what you actually want, but assuming you want it to rotate on it's own axis, have a look at this code I just whipped up:
http://jsfiddle.net/RpjuD/2/
This only works in browsers with animation support, but nowadays that's really only IE. IE10 has support.
To get a rotation animation in older browsers, you are kind of stuck - there aren't many options short of using an animated gif. IE does support a rotation property, but it's very limited.
You could use something like https://github.com/clearideaz/jQuery.rotate/blob/master/jrotate.plugin.js to get it working everywhere, but to be honest, usually the CPU cost for users stuck on old browsers with old hardware isn't worth it.

You will only be able to rotate an element if the browser is CSS3 compatible (minus other hacks such as this http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html), in which case you should set a timing function to adjust the following CSS:
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
see this:
http://davidwalsh.name/css-transform-rotate

Use CSS3 as pointed out by the others, or use SVG (e.g. http://raphaeljs.com/) or Canvas.

For CSS3 transitions and transforms, you can better use this nice jQuery plugin: http://ricostacruz.com/jquery.transit/

Lea Verou posted a solution using css3
http://lea.verou.me/2012/02/moving-an-element-along-a-circle/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+leaverou+%28Lea+Verou%29&utm_content=Netvibes

Pixelated cross-browser image scaling

I would like to scale an image up with scale = 2.0. I would like do to that without any smoothing, so the desired effect is to turn each pixel of the original image into 2x2 pixels of the same colour.
I wonder if this is possible to do in Javascript/CSS in a cross-browser (>= IE7) manner without resorting to <canvas /> tag.

Sorry, I don't believe the effect you want is possible cross-browser without a canvas.
In Firefox in Canvas you can do ctx.mozImageSmoothingEnabled = false; but that's as close as you're going to get.
image-rendering: -moz-crisp-edges; might help you in firefox for CSS scaling, and -ms-interpolation-mode* might help you in IE, but I doubt you'll get a solution that looks the same across all browsers.
* I think this has been deprecated/obsoleted.

Any details of rendering methods e.g. anti-aliasing/smoothing are out of CSS 2.1 scope. So the answer is 'no' for CSS 2.1. Image object in JS does not have scaling features either. So 'no' again.

I know flash is a dying technology, however this is some pretty excellent image manipulation scrips should you wish to check that out. This seems a little complex for standard web based image processing although Sounds like a wicked idea!

Actual IE6 Png fix

What png fix method is the most actual today? Lite-weight, with background-repeat and background-position support.

IE7.JS in my view:
IE7.js is a JavaScript library to make
Microsoft Internet Explorer behave
like a standards-compliant browser. It
fixes many HTML and CaSS issues and
makes transparent PNG work correctly
under IE5 and IE6.

Create PNG's with Fireworks and encode them as PNG8 instead of PNG32.
See: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
No need for js, no need for css filter.
Unless you need more then 256 colours, then you are stuck with filter/js fixes.

I believe that the DD_BelatedPNG method is superior to the filter method used by ie7.js.
You can use PNGs as the SRC of an
element or as a
background-image property in CSS.
If you attempt the latter, you will
find that, unlike with vanilla usage
of AlphaImageLoader,
background-position and
background-repeat work as intended.
As a bonus, "fixed" elements will
respond to a commonly used set of
Javascript style assignments, as well
as the A:hover pseudo-class.

Is there a way to get border-radius and gradient backgrounds in IE?

I am wondering if there is any work-arounds using javascript or whatever to get IE to show border-radius or gradient background?

I came across this by looking for fixes to using 'gradients and border-radius' in IE9. And yes while its true you can now use both in IE9, you sadly cannot use them together.
The issue is documented in a a few places:
http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
IE9 border-radius and background gradient bleeding
The issue seems to be related to border-radius not playing nice with IE's old filter gradients. Sadly the release of IE9 did not bring proper CSS gradients.

jquery for at least the radius / corners item.
For gradient backgrounds see this.

You don't need to use jQuery for rounded corners, there are solutions that will make browsers behave well even in the event of javascript being disabled.
Check out http://css3pie.com/, provides a pretty simple solution (htc file) for making this work. As monn indicated IE9 gradient and radius don't work together. Css3Pie is intended to let you dev with css3 markup but provides backups for IE back to IE6.
There's also css3please and compass (for ruby).
This issue has recently been discussed in the HTML5 Boilderplate issue queue (HTML5 Boilerplate is a well-vetted collaboration to bring together the best techniques in modern web markup as a starting point for any platform).
https://github.com/paulirish/html5-boilerplate/issues#issue/354
Here's a demo of the problem & solution:
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

This is quite new: https://github.com/bfintal/jQuery.IE9Gradius.js
Just include the script last in your head tag and it should handle the rest. See readme notes