topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

sample-canvas-particles.htm / htm



  <html>
  <head>

meta info & standard script(s) 


  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>HTML5 Canvas and Audio Experiment</title>
    
    <meta name="keywords" content="html5, canvas, experiment">
    <meta name="description" content="An html5 canvas experiment by 9elements.com">
    
    <link rel="image_src" href="sample-canvas-particles-preview.png">
  
    
    <script src="lib-present-graphic-processing-particles-files-processing.js" type="text/javascript" charset="utf-8"></script>
    <script src="lib-present-graphic-processing-particles-files-jquery-1.js" type="text/javascript" charset="utf-8"></script>
  <!--
    <script src="particles_files/processing.js" type="text/javascript" charset="utf-8"></script>
    <script src="particles_files/jquery-1.js" type="text/javascript" charset="utf-8"></script>
    <script src="particles_files/apt18.js" type="text/javascript" charset="utf-8"></script>
  -->

the script 


    <script src="sample-canvas-particles.js" type="text/javascript" charset="utf-8"></script>

style(s) 


    <style type="text/css" media="screen">
      body {
          background: #000;
          color: #aaa;
          font-family: Helvetica, sans-serif;
                  margin:0;
                  padding:0;
                  overflow:hidden;
      }
  
          a {
                  text-decoration:none;
          }
          
      #theapt {
      }
      #stuff {
                  postion:absolute;
      }
          #tweet {
                  font-family:Helvetica, Arial;
                  position:absolute;
                                  
                  top:400px;
                  left:260px;
                  
                  width:640px;
          }
          
          #tweet h1 {
                  display:block;
                  font-family:Helvetica, Arial;
                  font-size:40px;
                  font-weight:bold;
                  color:#fff;
                  margin:0 0 10px 0;
                  padding:0;
          }
          
          #tweet strong {
                  display:block;
                  font-size:16px;
          }
          
          #about {
                  font-size:11px;
                  position:absolute;
                  font-weight:normal;                
                  top:10px;
                  left:10px;
          }
  
          #about a {
                  color: #fff;
          }
    </style>
  </head>

body ??? 


  <body style="cursor: auto;" class=" canvas rgba hsla no-multiplebgs borderimage no-borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransitions">
  <script src="lib-present-graphic-processing-particles-files-modernizr-0.js"></script>

canvas 


  <p>
  creative technology tweet(s)
  <p>
  <canvas id="theapt" style="opacity: 0.40" width="959" height="544"></canvas>
  <div unselectable="on" style="top: 220px; -moz-user-select: none; display: none;" id="tweet">
          LOADING
  </div>
  <div id="stuff">
          <audio src="lib-present-graphic-processing-thankyou.ogg" id="audio">  
  your browser does not support audio
          </audio>
  <!--
          <audio src="thankyou.ogg" id="audio">  
                  Your browser does not support the <code>audio</code> element.  
          </audio>
  -->
  </div>

author info 


  <div style="left: 913px; top: 518px;" id="about"><a href="http://9elements.com/io/?p=153" title="cool software development?!">blog ยป</a></div>
  </body></html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.