Forse non e' una cosa che serva a molto.. ma spero che possa essere utile a qualcuno : )
Quello che andreamo a creare e' un testo con effetto tridimensionale , che abbia la funzione di un pulsante (quindi esegua una azione); per farlo useremo un misto di JavaScript e jQuery.
Come prima cosa creiamo un file HTML con un elemento che conterra' il testo (ID puo' essere variato come preferite)
Codice HTML:
<div id="testo"></div>
Quindi creiamo gli stili CSS che definiranno la prospettiva (per creare l'effetto 3D) e l'aspetto del testo
Codice:
<style>
/* definiamo l'area di testo con una prospettiva per creare l'effetto 3D*/
#testo{
/* area da NON modificare */
perspective:1000px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
-webkit-perspective:1000px;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style: preserve-3d;
position:absolute;
/* area Modificabile */
top:50px;left:100px;
width:200px;height:50px;
cursor:pointer;
}
/* definiamo l'aspetto del testo */
#testo p{
/* area da NON modificare */
position:absolute;
top:0px;left:0px;
/* area Modificabile */
font-family:Arial, serif;
font-size:300%;
}
</style>
come potrete vedere ci sono delle parti di codice che non bisogna modificare :
- quando definiamo la prospettiva
- la posizione del testo per poter ottenere la tridimensionalita'
Ora passiamo allo script :
come prima cosa carichiamo la libreria jQuery , quindi eseguiamo il codice , quando il caricamento del documento e' completo eseguiamo le nostre funzioni.
Lo script e' costituito da 4 funzioni ( crea3D , muovi3D , clicca3D e cancel3D )
Codice:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/* variabile per il controllo del pulsante */
var clickStatus = 0;
/* eseguiamo le funzioni per creare il nostro effetto 3D */
crea3D("testo","YES",100,"red","orange"); /* crea il testo */
muovi3D("testo"); /* crea il movimento on mouse over */
clicca3D("testo","YES","NO","red","orange","blue","cyan",100); /* crea il cambio sul click */
/* funzione per creare il testo 3D */
/* argomenti: div -> ID dell'elemento */
/* testo -> il testo da scrivere */
/* spessore -> la profondita' del 3D */
/* coloreFronte -> il colore del testo */
/* coloreCorpo -> il colore della tridimensionalita' */
function crea3D(div,testo,spessore,coloreFronte,coloreCorpo){
/* come prima cosa creaimo tanti testi quanto e' lo spessore */
for(i=0;i<spessore;i++){
$("#"+div).append("<p>"+testo+"</p>");
}
/* definiamo le variabili dell'elemento e dei sui figli */
var el = document.getElementById(div);
var child = el.childNodes;
var trasformaZ = 0;
/* sulla base della prospettiva trasliamo sul asse Z i nostri testi in modo da dare una profondita' alla scritta */
/* e definiamo il colore del testo */
for(i=0;i<spessore;i++){
trasformaZ--;
var trasformazione = "translateZ("+trasformaZ+"px)";
child[i].style.webkitTransform = trasformazione;
child[i].style.MozTransform = trasformazione;
child[i].style.transform = trasformazione;
child[i].style.color = coloreCorpo;
}
child[0].style.color = coloreFronte; /* (incompatibilita' riscontrata in IE la prima scritta non cambia colore) */
}
/* funzione per creare l'effetto movimento al passaggio del mouse (incompatibilita' riscontrata in Safari)*/
/* argomento: div -> ID dell'elemento */
function muovi3D(div){
/*come prima cosa definiamo le variabile della posizione dell'elemento , la sua dimensione e ne calcoliamo il valore in percentuale */
var posizione = $("#"+div).position();
var posTop = posizione.top;
var posLeft = posizione.left;
var larghezza = $("#"+div).width();
var altezza = $("#"+div).height();
var posX = larghezza/100;
var posY = altezza/100;
var el = document.getElementById(div);
/* catturiamo l'evento del movimento del mouse e modifichiamo l'origine della prospettiva dell'elemento */
$("#"+div).mousemove(function(event){
var coordY = event.pageY;
var coordX = event.pageX;
var perspX = (coordX-posLeft)/posX;
var perspY = (coordY-posTop)/posY;
el.style.perspectiveOrigin=perspX+"% "+perspY+"%";
});
}
/* funzione per la cancellazione dell'effetto 3D */
/* argomento: dic -> ID dell'elemento */
function cancel3D(div){
var elemento = "#"+div+" p";
$(elemento).remove();
}
/* funzione per l'evento click sul testo */
/* argomenti: div -> ID dell'elemento */
/* testo1 -> il testo da scrivere nello stato OFF */
/* testo2 -> il testo da scrivere nello stato ON */
/* spessore -> la profondita' del 3D */
/* colore1 -> il colore del testo nello stato OFF */
/* colore2 -> il colore della tridimensionalita' nello stato OFF */
/* colore3 -> il colore del testo nello stato ON */
/* colore4 -> il colore della tridimensionalita' nello stato ON */
function clicca3D(div,testo1,testo2,colore1,colore2,colore3,colore4,spessore){
$("#"+div).click(function(){
if(clickStatus==0){
cancel3D(div);
crea3D(div,testo2,spessore,colore3,colore4);
clickStatus=1;
/* inserisci qui la tua funzione (azione) per lo Stato ON*/
}else{
cancel3D(div);
crea3D(div,testo1,spessore,colore1,colore2);
clickStatus=0;
/* inserisci qui la tua funzione (azione) per lo Stato OFF*/
}
});
}
});
</script>
Ecco il DEMO di questa piccola guida.
Il codice e' completamente funzionante su Firefox , Chrome ed Opera ; IE11 e Safari riportano alcune incompatibilita'.
NLSweb