Solucior
» CSS
» Infinite zoom CSS3 and Javascript
Here is an example of the use of CSS3 with scale.
Update :
Added compatibility with Opera 11
Tested with Safari Google Chrome Firefox4 Opera
Infinite zoom CSS3 and Javascript
06/06/2011 by Dux - 4.9/5 (7 ratings)Update :
Added compatibility with Opera 11
Demo.
source code
<div style="width: 300px; height: 300px; overflow: hidden; position: relative">
<img src="cible.gif" id="cible1" style="width: 300px; height: 300px; position:absolute; z-index:1" alt="infinite zoom" />
<img src="cible.gif" id="cible2" style="width: 300px; height: 300px; position:absolute; z-index:2" alt="infinite zoom" />
<img src="cible.gif" id="cible3" style="width: 300px; height: 300px; position:absolute; z-index:3" alt="infinite zoom" />
</div>
<input type="button" value="Start" onclick="clearInterval(timer); timer=setInterval('zoomin()', 10)" />
<input type="button" value="Stop" onclick="clearInterval(timer)" />
<script type="text/javascript">
var scale = 1;
var timer;
function zoomin(cible) {
var elm1 = document.getElementById('cible1');
var elm2 = document.getElementById('cible2');
var elm3 = document.getElementById('cible3');
scale = scale * 1.05;
if (scale > 9) scale = 1;
elm1.style.WebkitTransform = 'scale('+scale+')';
elm2.style.WebkitTransform = 'scale('+(scale/9)+')';
elm3.style.WebkitTransform = 'scale('+(scale/81)+')';
elm1.style.MozTransform = 'scale('+scale+')';
elm2.style.MozTransform = 'scale('+(scale/9)+')';
elm3.style.MozTransform = 'scale('+(scale/81)+')';
elm1.style.transform = 'scale('+scale+')';
elm2.style.transform = 'scale('+(scale/9)+')';
elm3.style.transform = 'scale('+(scale/81)+')';
elm1.style.OTransform = 'scale('+scale+')';
elm2.style.OTransform = 'scale('+(scale/9)+')';
elm3.style.OTransform = 'scale('+(scale/81)+')';
}
</script>
Tested with Safari Google Chrome Firefox4 Opera
Rate this code
|
Copied : 46x
Comments for Infinite zoom CSS3 and Javascript
nes 06/17/2011 14:59
ok
ok
this looks fantastic. ty for sharing it!