Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » CSS » Zoom infini CSS3 et Javascript

Zoom infini CSS3 et Javascript

06/06/2011 par Dux   -   4.9/5 (7 notes)

Voici un exemple de l'utilisation du CSS3 avec le scale. Ce zoom utilise une seule image trois fois qui s'imbrique.

Mise à jour :
Compatible avec Opera 11

Demo.

infinite zoom infinite zoom infinite zoom

code source



 
<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>

Testé avec Safari  Google Chrome  Firefox4  Opera  
Noter ce code     |     Copié : 49x

Commentaires pour Zoom infini CSS3 et Javascript

be     03/22/2012 05:21
this looks fantastic.  ty for sharing it!
nes     06/17/2011 14:59
ok
Ajouter un commentaire Pseudo   Site
ZOOM


Zoom infini CSS3 et Javascript
Zoom en CSS3
Rotation zoom en CSS
Loupe image javascript