Sviluppo » Javascript » Internet

Reflex 1.1: aggiungere effetto di riflessione alle immagini

mercoledì 29 agosto, 2007

image Nuova versione 1.1 della libreria Javascript Reflex con la quale è possibile aggiungere effetti di riflessione alle immagini. Il vantaggio di usare questa tecnica "non intrusiva" è la rapidità con cui è possibile aggiungere questi effetti senza dover spendere tempo nel realizzare effettivamente l'immagine di riflessione.
Questa versione è stata provata sui browser Mozilla Firefox 1.5+, Opera 9+, Safari e IE6. La minima dimensione supportata per un'immagine è 32x32. Una volta inclusa la libreiria:

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="reflex.js"></script>

Basta inserire class="reflex" sulle immagini dove desideriamo applicare tale effetto. Sfruttando la proprietà dell'attributo class è possibile manipolare gli effetti di riflessione, il chè rende questa libreria davvero particolare. È possibile, infatti, distorcere anche l'immagine aggiungendo effetti 3D. Ad esempio ecco come aggiungere varie caratteristiche alla rilfessione:

PLAIN TEXT
HTML:
  1. <img class="reflex idistance16 iborder2 iheight24" width="200" alt="" src="images/example.jpg"/>

Per i dettagli vedi la documentazione sul sito ufficiale.

Sullo stesso sito è possibile scaricare numerosi altri effetti come Edge, Corner, Glossy e molti altri, tutti dedicati alle immagini.

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , ,

6 commenti a: “Reflex 1.1: aggiungere effetto di riflessione alle immagini”

  1. getAvatar 1.0
    08 set, 2008 iJim:

    Spettacolo, ma dovo posso trovare un tutorial per sfruttare le immagini con javascript???

    Rispondi Quota
  2. getAvatar 1.0
    08 set, 2008 Giovambattista Fazioli:

    @iJim: cosa intendi esattamente per "sfruttare le immagini"?

    Rispondi Quota
  3. getAvatar 1.0
    10 set, 2008 iJim:

    Ciao, intendo proprio la manipolazione, effetti, ritocco dei bit ( come con un editor esadecimale ), ecc..., cose del genere!

    Rispondi Quota
  4. getAvatar 1.0
    12 set, 2008 Giovambattista Fazioli:

    @iJim: non sono a conoscenza di strumenti Javascript di questo tipo. Esistono sicuramente in Flash o tramite un'interazione con strumenti Server. Può darsi che qualcosa di simile si stia sperimento tramite le Canvas... se trovo ti farò sapere.

    Rispondi Quota
  5. getAvatar 1.0
    12 set, 2008 iJim:

    Grazie mille...

    Rispondi Quota
  6. getAvatar 1.0
    28 set, 2008 Redemption:

    grazie, proprio lui cercavo :)

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>         // blocco generico
[code][/code]       // blocco generico
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL