• User Attivo

    Effetto immagine

    Buonasera,
    devo aggiungere ad un sito un' intro formata da un immagine che "parte" da scomposta per appunto comporsi come se fosse mosaico, ma non sono riuscito a trovare granchè a livello di script (jquery) già pronti. Devo evitare se possibile l'uso di Flash. Qualche consiglio?
    .
    Grazie


  • User Attivo

    Questo l'ho fatto ora, spero sia di tuo gusto, se serve aiuto o modifiche fammi sapere!

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    preload_image = new Image(85,100); 
    preload_image.src='http://www.giorgiotave.it/forum/logo.png'; 
    
    function scomposimetro(img_url,nqx,nqy,img_x,img_y)
    {
    	dim_q_x = img_x/nqx;
    	dim_q_y = img_y/nqy;
    	
    	var html = "<div id='scomposimetro_big' style='overflow:show;position:absolute;display:none;width:"+img_x+"px;height:"+img_y+"px;'>\r\n<div id='scomposimetro_cont' style='position:relative;width:"+img_x+"px;height:"+img_y+"px;overflow:show;'>\r\n";
    	
    	battleship_x = 0;
    	battleship_y = 0;
    	x = 0;
    	y = 0;
    	
    	for(i=0;i<nqx*nqy;i++)
    	{
    		if(battleship_x == nqx-1){ y += dim_q_y; x = 0; battleship_x = 0;}
    		html += '<div class="q_scomposimetro" style="position:absolute;width:'+dim_q_x+'px;height:'+dim_q_y+'px;top:'+Math.floor((Math.random()*200)+1)+'px;left:'+Math.floor((Math.random()*200)+1)+'px;background-image:url('+img_url+');background-position:-'+x+'px -'+y+'px;background-repeat: no-repeat;display:block;" px="'+x+'" py="'+y+'"></div>\r\n';
    		x += dim_q_x;
    		battleship_x += 1;
    	}
    	html += '</div>\r\n</div>';
    	
    	$('body').html(html);
    	$('#scomposimetro_big').fadeIn(function(){
    	$('.q_scomposimetro').each(function(){
    		$(this).animate({top:$(this).attr('py'),left:$(this).attr('px')},5000);	
    	});});
    }
    
    $().ready(function(){
    	
    	var num_quadrati_per_lato_x = '5';
    	var num_quadrati_per_lato_y = '5';
    	var img_x = 85;
    	var img_y = 100;
    	var img_url = 'http://www.giorgiotave.it/forum/logo.png';
    	
    	scomposimetro(img_url,num_quadrati_per_lato_x,num_quadrati_per_lato_y,img_x,img_y);
    })
    </script>