Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Linea che compaia lentamente

    Ciao a tutti!

    Non sono per nulla pratico delle nuove funzionalità di HTML5, anzi, è la prima volta in assoluto che mi cimento con questo nuovo liunguaggio.

    Sostanzialmente ho deciso di fare un tentativo partendo da un'esigenza che ho:
    Far comparire una linea orizzontale poco per volta.

    Con qualche ricerca sul web sono riuscito a disegnare in maniera statica la linea in questione con questo codice:

    codice:
    <canvas id="iniziopath" width="600" height="200">
    	 	</canvas>
    		 <script>
    		 var percorso = document.getElementById("iniziopath");
    		 var context = percorso.getContext("2d");
    		 context.beginPath();
    		 context.moveTo(110, 150);
    		 context.lineTo(200, 150);
    		 context.lineWidth = 1;
    		 context.stroke();
    		 </script>
    Dopodiché ho provato a sostituire
    codice:
    context.lineTo(200, 150);
    con un ciclo for che mi disegnasse da (110,50) a (200,50), senza però ottenere il risultato sperato: la linea compare subito.

    Io vorrei che si vedesse comparire la linea da sinistra a destra, con un movimento visibile.

    Che voi sappiate esiste una funzione per fare qualcosa del genere?

    Ho cercato un po' in giro (anche qui nel forum) senza trovare nulla.

    Grazie per le risposte,

    Ciao,
    Enryb
    Verba volant, javascripta manent

  2. #2
    Prova usare i CSS dai un'occhiata qui .

  3. #3
    L'effetto e questo,provalo.
    E senza javascript



    esempio 1

    codice:
    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Documento senza titolo</title>  <style type="text/css">  div { width:0px;  border: 2px solid #333;  /* Firefox */ -moz-animation:myfirst 5s infinite; -moz-animation-direction:alternate;  }   @-moz-keyframes myfirst /* Firefox */ { 0%   {background:red;  width:0px}  100% {background:red; width:200px} }   </style>  <body>  <div></div>    </body> </html>
    esempio 2

    codice:
    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Documento senza titolo</title>  <style type="text/css">  .linea  { width:0px;  border: 25px solid #333; background:red; float:left;    /* Firefox */ -moz-animation:myfirst 5s infinite; -moz-animation-direction:alternate;  }   @-moz-keyframes myfirst /* Firefox */ { 0%   {background:red;  width:0px}  100% {background:red; width:200px} }   </style>  <body>  <div class="linea"></div> <div style="height:50px; float:left; width:50px; border-radius:50%; background-color:#FF6600"></div>    </body> </html>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.