Effet de texte en css3

Télécharger le projet
Commenter

Description

tout comme le titre l'indique il s'agit d'effet de texte utilisant transforme du css3 rotation et scale le tout est je l'admet pas tres utile mais sa m'a amusé de le faire et sa donne un apercu de ce que l'on peut faire avec le css3

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" language="JavaScript">

function roro(elem,ntour){
this.el=document.getElementById(elem);
this.gg=00;
this.sens='aller'
this.nbtour=ntour
var spl=Math.round(Math.random()*2000)
var lui = this
setTimeout(function() { lui.rond(); },spl);
}

roro.prototype.rond = function(){

if(this.gg==30 && this.sens=='retour'){
return false
}

if(this.sens=='aller'){
this.gg+=30;
}
else{
this.gg-=30;
}

if(navigator.vendor){

this.el.style.WebkitTransform='rotate('+this.gg+'deg) scale('+this.gg/30+')';
}
else if(navigator.userAgent.indexOf('Opera')!=-1){

this.el.style.OTransform='rotate('+this.gg+'deg) scale('+this.gg/30+')';
}
else{
this.el.style.MozTransform='rotate('+this.gg+'deg) scale('+this.gg/30+')';

}
if(this.gg==360*this.nbtour){
this.sens='retour';

}
var lui=this;
setTimeout( function() { lui.rond(); }, 100 );
}

function init(){
d1=new roro('txa',3);
d2=new roro('txb',3);
d3=new roro('txc',3);
d4=new roro('txd',3);
d5=new roro('txe',3);
d6=new roro('txf',3);
d7=new roro('txg',3);
d8=new roro('txh',3);
d9=new roro('txi',3);
}

onload=init;
</script>
</head>
<body>
<br><br><br><br>
<span id='txa'>raison</span>
<span id='txb'>desire</span>
<span id='txc'>passion</span>
<span id='txd'>haine</span>
<span id='txe'>amour</span>
<span id='txf'>tentasion</span>
<span id='txg'>peur</span>
<span id='txh'>passion</span>
<span id='txi'>peur</span>
</body>
</html>

Conclusion :


hihan
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)