sastgroup.com

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);
	});
});