Rotating div with javascript
Here is the link: http://www.avineon.com/
Open this link above. Four images rotate.
I need something similar using Javascript.
Can Javascript be used.
a source to share
I don't think you will be very lucky if you try to do this in pure javascript. It might be possible using newer canvases and SVG libraries like Raphael , but you'll still have cross-browser issues. This site used Flash, and I would recommend using that if you wanted this kind of effect.
... why do you want your site to have a different story though ...
a source to share
You could be something similar, but not accurate.
Transparency = Supported in FF, Safari, IE7 + Change Image Width = Place the image in a div with this Css
.class img {
display: block;
width: 100%;
height: 100%
}
This will make the image stretch to fill the div.class. Then you can use JS to make this div narrower like a carousel and the containing image will animate inside the div.
Then you will need to track the location of the mouse to determine how fast it is rotating.
You can use a cosine equation for smooth far end acceleration (IIRC)
However, you cannot get the images in reverse order unless you create a server-language copy or use a canvas.
a source to share
It is best not to try to do something in real 3D, but rather use visual tricks to approximate the 3D effect. That is, use perspective / image warp to make it look like a rotating cube, similar to what has been implemented on this page , which has a better explanation of the math involved.
Indeed, you are probably best off using Flash.
This effect is possible in JavaScript by simply changing each of the image styles width
, height
and left
over time. He's involved in a script, but he only needs to interpolate these three styles on each of the image elements.
To get the rotation effect, decrease the width
image style in the function setInterval
while moving the style property left
. There is also a slight decrease in height
.
You will need two images for each side: front and back. When the width is reduced to zero, change the image with the flip version and start increasing the width.
Alternatively use Webkit and Firefox transform css properties.
Or try one of these coverage components that look the same: Protoflow , ImageFlow
a source to share
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n');
document.write('.dyncontent{display: none; width: 728px; height: 90px;}\n');
document.write('</style>');
}
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<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i];
}
}
function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0;
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1;
messages[prevcontentindex].style.display="none"; //hide previous message
messages[curcontentindex].style.display="block"; //show current message
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("rotatecontent()", 5000);
}
}
</script>
<table width="100%">
<tr align="center">
<td>
<div class="dyncontent" style="display: block">
first
</div>
<div class="dyncontent">
second
</div>
<div class="dyncontent">
Third
</div>
</td>
</tr>
</table>
</body>
</html>
a source to share