Rotating Div using javascript

Question

Hi everyone

Here is a link: http://www.avineon.com/

Open this link see on the top. Four images are rotating.

I need something similiar using Javascript.

Is it possible by using Javascript.

Thanks & Regards

Ravi Kumar

Answer 1

I don't think you'll have much luck if you try to do that in pure javascript. It might be possible using the emerging canvas and SVG libraries such as Raphael, but you'll still have cross-browser issues. That site used Flash, and I'd recommend using that if you wanted such an effect.

...why you'd want that on your website is another story though...

Answer 2

You could so something similar, but not exact.

Transparency = Supported in FF, Safari, IE7+ Changing image width = Place image in div with this Css

.class img {
display: block;
width: 100%;
height: 100%
}

This will make the image stretch to fill the .class div. You can then use JS to make this div narrower like the carousel does, and the image contained will animate within the div.

You would then need to track the mouse locations to determine how fast it spins.

You can use an equation using cosine for smooth acceleration from the far ends (IIRC)

You will not however be able to get the images in reverse, unless you create a copy in a server side language or use canvas.

Answer 3

Your best bet would not be to attempt to render something in actual 3D, but rather to use visual tricks to approximate a 3D effect. That is, use perspective / image deformation to make it look like a cube is rotating, similar to what is implemented at this page, which has a better explanation of the math involved.

Really, though, you're probably better off just using Flash.

Answer 4

That effect is possible in JavaScript simply by modifying each of the images width, height, and left styles over time. It's an involved script, but only needs to interpolate those three styles on the each of the image elements.

To get the rotation effect, decrement the width style of the image in a setInterval function while moving the left style property. There is a slight decrement on the height also.

You'll need two images for each side, a front and reverse. When the width decrements to zero, swap the image with it's flipped version and start incrementing the width.

Alternatively use Webkit's, and Firefox's transform css properties.

Or try one of these coverflow components that look similar: Protoflow, ImageFlow

Answer 5

if (document.all || document.getElementById){ //if IE4 or NS6+ document.write('\n'); document.write('.dyncontent{display: none; width: 728px; height: 90px;}\n'); document.write(''); } var curcontentindex=0; var messages=new Array(); function getElementByClass(classname){ var inc=0; var alltags=document.all? document.all : document.getElementsByTagName("*"); for (i=0; i first second Third