Filoweb.it

Animare una bicicletta ed il suo sfondo


FB TW G+ whatsapp RSS FEED News letter
Jquery
Animare una bicicletta ed il suo sfondo


  ----- da mettere nel head ----

<script src=" http://code.jquery.com/jquery-1.9.1.js" ></script>


<style>
 
#p1 {
	/* sfondo */
	 width:3200px;
	 height:150px;
	 left:600px;
	 top:150px;
	 background-image:url(img/skylne.jpg);
	 z-index:-1:
 }
 #contenitore {
	/* Contenitore animazione */
	width:800px;
	height:150px;
	overflow:hidden;
	/*border:#999 1px solid;*/
	background-color:#00ADE2;
	left: 662px;
 }
 

 
 #bici {
	/* Bicicletta (attore ) */
	width:60px;
	height:60px;
	top:-58px;
	left: -60px;
	z-index:1;
	position:relative;
 }
 
 #pagi {
	 width:800px;
	 height:400px;
	 background-color:#000;
	 background-image:url(img/logos1.png);

 }
 
 
 </style>



----- da mettere nel body ----

<div id=" contenitore" >
<div id=" p1" ></div>
<div id=" pagi" ></div>
<div id=" bici" ><img src=" img/bicycle8.gif"  width=" 60"  height=" 60"  /></div>
</div>



----- da mettere alla fine prima della chiusura body in modo da velocizzare il caricamento della pagina ----

<script>
var i = 0;
$(document).ready(function() {
$(" #pagi" ).hide();	
  i -= 1;
  $(" #p1" ).fadeIn(" slow" ).animate({marginLeft:" -=2000px" },{duration:70000}).fadeOut(" slow" );})
  
$(" #bici" ).fadeIn(" slow" ).animate({marginLeft:" +=810px" },{duration:65000}).fadeOut(" slow" );

$(" #pagi" ).delay( 70000 ).fadeIn(" slow" );

;
</script> 
FB TW G+ whatsapp RSS FEED News letter

filoweb.it è il sito personale di Filippo Brunelli
(c) 2017 Filippo Brunelli
Le immagini ed i testi contenuti nel sito sono di proprietà di Filippo Brunelli salvo diversamente indicato.
L'uso delle immagini e del testo è gratuito per uso personale ed è subbordinato alla citazione della fonte.
Brunelli Filippo declina ogni responsabilità per l'uso che viene fatto delle informazioni presenti nel sito.
FILOWEB.it Piccolo quaderno degli appunti. Argomento: Jquery, Titolo:Animare una bicicletta ed il suo sfondo. Altri script riguardano: CSS, Jscript, .net, Classic Asp, HTML, Jquery, varie, url rewrite, pagina protetta da password, ecc. Altro su https://www.filoweb.it