Integrare Javascript con l'Html e il Css


Animazioni e temporizzazione con javascript


funzione setInterval / clearInterval

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/


Html5 / javascript

animare due box ( html5, css3, transizioni, javascript)


codice javascript (semplicissimo)

function muoviBlocco(id,pos) {
 
        var blocco = document.getElementById(id);
        blocco.style.top = pos+'px'; // cambia il CSS !
}
 
 




codice HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Bouncinx Box</title>
<!-- mancano js e css-->
</head>
 
<div id="container">
    <div id="box01"><h3>box 01</h3>
    <img src="http://placekitten.com/g/80/80" alt ="placeholder"  />
    <p> lorem pixum alit sequncer alia et teneat culti multa jugera soli</p>
    </div>
    <div id="box02"><h3>box 02</h3>
    <img src="http://placekitten.com/g/80/80" alt ="placeholder"  />
    <p> lorem pixum alit sequncer alia et teneat culti multa jugera soli</p>
    </div>
</div>
<div id ="console">
    <button  onClick="muoviBlocco('box01',350)">Giù 01</button>
    <button onClick="muoviBlocco('box02',350)">Giù 02</button>
    <button  onClick="muoviBlocco('box01',-150)">Su 01</button>
    <button onClick="muoviBlocco('box02',-150)">Su 02</button>
</div>
 
<body>
</body>
</html>
 




codice CSS

   #container{
       margin:50px auto 0px auto;
       width:640px;
       height:480px;
       border:1px solid #999;
 
       /* posizionamento */
 
       position:relative;
       top:0px;
       left:0px;
 
       /* overflow */
 
       overflow:hidden;
 
       /* css3 */
       box-shadow:0px 0px 8px #777;
   }
 
   #box01, #box02{
        width:280px;
        padding:10px;
        height:100px;
           border:1px solid #999;
        font-size: 12px;
        font-family:Arial, Helvetica, sans-serif;
        color:#336;
 
         /* css3 */
       box-shadow:0px 0px 8px #777;
 
 
        /* css 3 transition */
 
        /* webkit */
 
        -webkit-transition-element:top;
        -webkit-transition-duration:2s;
        -webkit-transition-timing:ease-out;
 
        /* firefox */
 
        -moz-transition-element:top;
        -moz-transition-duration:2s;
        -moz-transition-timing:ease-out;
 
   }
 
 
   #box01 {
       /* posizionamento */
 
       position:absolute;
       top:-150px;
       left:10px;
   }
 
    #box02 {
       /* posizionamento */
 
       position:absolute;
       top:-150px;
       left:320px;
   }
 
   #box01 img, #box02 img {
       float:left;
       display:block;
       border:1px solid #999;
       margin:10px;
 
       /* css3 */
       box-shadow:0px 0px 8px #777;
       border-radius:10px;
       }
 
 
   h3 {
      margin:0;
      padding:0;
      float:right;
  }
 
   #console {
         margin:50px auto 0px auto;
       width:640px;
       height:48px;
 
   }
 
   #console button {
       width:100px;
       height:32px;
       border:outset 3px #559F00;
 
       background:#509900;
       text-align:center;
       font:Arial, Helvetica, sans-serif 14px;
       margin-left:30px;
       cursor:pointer;
 
          border:1px solid #999;
 
 
 
       /* css3 */
       box-shadow:0px 0px 8px #777;
        border-radius:6px;
 
 
   }
 
   #console button:hover {
       border:inset;
   }
 


demo box animati (in altra finestra)



approfondimenti