- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- Effetto immagine
-
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
-
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>