Archive for 'immagini'
Creare una semplice slideshow con MooTools!
Posted on 22. Dec, 2009 by daniele.
In questo articolo imparerete come realizzare una presentazione con immagini in dissolvenza.
Link: http://davidwalsh.name/mootools-slideshow
Continue Reading
Applicare il riflesso a un’immagine con MooTools e jQuery!
Posted on 05. Dec, 2009 by daniele.
Un dettaglio sottile che fa una grande differenza su qualsiasi web design è l'uso di riflessi di immagine. Applicare il riflesso con Photoshop può risultare molto fastidioso specie se le immagini sono gestite da uno script PHP e MySQL. Reflection.js è un javascript (disponibile sia in jQuery che MooTools) che crea riflessi alle immagini presenti in una pagina. Reflection.js creerà un nuovo elemento IMG con diversi filtri css applicati.
Demo: http://davidwalsh.name/dw-content/mootools-reflection.php
Link: http://davidwalsh.name/javascrip-reflection
Continue Reading
Effetto Page Peel con MooTools!
Posted on 09. Sep, 2009 by daniele.
CODICE XHTML
<div id="page-flip"> <a href="http://www.sastgroup.com/feed"><img src="page_flip.png" alt="Subscribe!" id="page-flip-image" /></a> <div id="page-flip-message"></div> </div>
CODICE CSS
#page-flip { position:relative; right:0; top:0; float:right; } #page-flip-image { width:50px; height:52px; z-index:99; position:absolute; right:0; top:0; -ms-interpolation-mode:bicubic; } #page-flip-message { width:50px; height:50px; overflow:hidden; position:absolute; right:0; top:0; background:url(subscribe.png) no-repeat right top; }
CODICE MOOTOOLS
(function($,$$) { window.addEvent('domready',function() { var flip = $('page-flip'); var flipImage = $('page-flip-image'); var flipMessage = $('page-flip-message'); flip.addEvents({ mouseenter:function() { $$(flipImage,flipMessage).set('morph',{ duration: 500 }).morph({ width: 307, height: 319 }); }, mouseleave:function() { flipImage.set('morph',{ duration: 220 }).morph({ width: 50, height: 52 }); flipMessage.set('morph',{ duration:200 }).morph({ width: 50, height:50 }); } }); }); })(document.id,$$);
Continue Reading
Icone in stile iPhone tutte per voi!
Posted on 01. Sep, 2009 by daniele.
Scarica: http://www.deviantart.com/download/132732427/Dusk_by_kawsone.rar
Continue Reading
[jQuery] Usare l’opacità per concentrarsi su un singolo elemento!
Posted on 28. Aug, 2009 by daniele.
$(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); });
Demo: http://davidwalsh.name/dw-content/fade-except-jquery.php
Continue Reading
Creare una galleria di immagini in jQuery con titolo e descrizione
Posted on 09. Aug, 2009 by daniele.
Demo: http://www.queness.com/resources/html/caption/index.html
Scarica file Sorgente: http://www.queness.com/resources/archives/jquery-caption.zip
Continue Reading
PhotoNav, esplorare le foto!
Posted on 01. Aug, 2009 by daniele.

Demo: http://www.gayadesign.com/scripts/jqueryphotonav/
Codice Sorgente: http://www.gayadesign.com/scripts/jqueryphotonav/jqueryphotonav.zip



