Mime Effects
Tuttavia capita spesso che uno le cose se le vuole fare da solo per poter ottenere esattamente ciò che vuole e dato che alla fine tutti questi effetti si basano essenzialmente sulla modifica di questo o quell'attributo CSS, il risultato è banale quanto stupefacente.
Quindi non vi dirò che la mia libreria è ultrafiga, potentissima, performante ecc... Ha il vantaggio di essere semplice da usare, non invasiva (a differenza della prototype) ed in grado di fare piccoli ma interesanti effetti grafici.
TRANSAZIONE
mimeMakeTransactions (ID,TEMPO-TRANSIZIONE,TEMPO-PERMANENZA);
Per l'esempio di cui sopra basta creare un DIV o un oggetto BLOCCO (per esempio <p>), dargli un ID e quindi richiamare la funzione javascript per effettuare l'effetto.
mimeMakeTransactions('logotofade',3000,2000)
In questo caso la transazione tra un'immagine e l'altra dura 3 secondi ed una volta transitato, l'oggetto rimane bloccato per 2 secondi prima di avviare nuovamente la transazione
EFFETTO FADE
mimeFade (ID,PARTENZA,ARRIVO,TEMPO DI TRANSIZIONE);
Con questo metodo possiamo decidere di far passare un oggetto da opacità 100 (visibile) ad opacità 0 (invisibile) in un tempo stabilito.
La funzione può essere usata con qualsiasi opacità di partenza e arrivo quindi potete passare da 0 a 100 oppure da qualsiasi valore intermedio ad un altro.
Prova l'effetto:
In questo caso abbiamo utilizzato un altra funzione di supporto ovvero:
mimeGetOpacity(ID)
Questa funzione mi ritorna un valore da 0 a 100 inerente l'attuale opacità dell'oggetto.
function faiQuelCheDevo(id){
var co = mimeGetOpacity(id);
if (co == 100)
mimeFade('imgtofade',100,0,1000);
else
mimeFade('imgtofade',0,100,1000);
}
La funzione sopra è molto semplice e viene richiamata alla pressione del bottone. Si occupa di controllare
l'opacità attuale dell'oggetto lanciando poi la funzione di transizione apposita.
Potete vedere come la funzione mimeFade viene chiamata una volta con parametri 100 e 0 e la seconda volta con parametri da 0 a 100.
Il valore 1000 indica come al solito i microsecondi di tempo per effettuare la transazione (in questo caso 1 sec.)
SCROLL
Qui a lato potete già vedere cosa intendo. Per realizzare l'effetto è sufficiente usare questa funzione:
mimeMakeScroll(ID,VERSO,TEMPO-TRANSIZIONE,TEMPO-PERMANENZA,STOPPABILE)
La funzione richiede diversi parametri per poter ottenere esattamente ciò che vogliamo.Nello specifico richiede l'ID del contenitore dei nostri oggetti da scrollare.
L'attributo VERSO indica la direzione dello scroll e può essere:
- LEFT: Da destra a sinistra
- TOP: Dal basso verso l'alto
- RIGHT: Da sinistra a destra
- BOTTOM: Dall'alto verso il basso
L'attributo TEMPO DI TRANSIZIONE indica i millisecondi necessari a fare un scroll completo di un oggetto.
L'attributo TEMPO DI PERMANENZA indica i millisecondi di permanenza dell'oggetto quando ha effettuato uno scroll.
L'attributo STOPPABLE è un valore booleano (true o false) che indica se lo scroll si blocca al passaggio del mouse. Normalmente il valore è FALSE ovvero NON STOPPABILE.
NB: L'oggetto contenitore deve avere indicato esplicitamente (tramite style o CSS) il parametro WIDTH ed HEIGHT
Qui di seguito potete vedere i richiami di funzione:
mimeMakeScroll ('toleft','left',2000,2000);
mimeMakeScroll ('totop','top',2000,2000);
mimeMakeScroll ('tobottom','bottom',2000,2000);
mimeMakeScroll ('toright','right',2000,2000);
mimeMakeScroll ('textToScroll','top',3000,4000,true);
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis, nisl at rhoncus sagittis, leo orci commodo purus, sed cursus felis est id libero. Ut placerat tincidunt est vel blandit. Donec dui sapien, rhoncus ac molestie et, consequat quis tortor.
Aliquam varius vulputate aliquet. Pellentesque tempus dapibus suscipit. Suspendisse bibendum nulla ac urna ornare sollicitudin ut non leo.
Fusce tincidunt ultricies venenatis. Proin mollis mi odio. Quisque nec ante nec ipsum sodales fermentum vitae eu nibh. Nam tristique fringilla condimentum. Fusce vitae magna non dolor convallis pulvinar. Ut luctus risus ut mi faucibus molestie. Duis non urna neque, sed vulputate neque.
EFFETTO OPEN
Poniamo che abbiamo un DIV di larghezza e altezza fissati ma che il suo contenuto è più grande per poter essere visibile completamente. Con questo effetto potrete agganciare una azione che farà ingrandire/restringere il contenitore per adattarlo al contenuto.
L'effetto di apertura e chiusura che ho implementato, ricade purtroppo in questa casistica in quanto facente uso di un attributo di javascript NON STANDARD chiamato scrollWidth e scrollHeight che ogni browser supporta alla propria maniera.
Su questo effetto abbiamo da una parte Firefox e Internet Explorer 7+ che supportano senza intoppi i due parametri. Dall'altra abbiamo Chrome e Safari che invece hanno bisogno di un piccolo aiuto.
TODO
