HTML 5 - ダイナミック要素のレイヤーとして

ダイナミック要素をレイヤーとして実装したいと思います。上記のレイヤーは、下のレイヤーに視覚的に半透明です（1つのレイヤーに画像規則的な間隔で変化し、要素が水平にスクロールするテキストを持つ別の層）これは可能ですか？答えが「はい」の場合、どうすればこのことができますか？例えばHTML 5 - ダイナミック要素のレイヤーとして

出典

2012-02-04 bitsapien

は試してみてください。

画像について申し訳ありません

<html> 
    <head> 
     <script type="text/javascript" charset="utf-8"> 
      window.onload = function() { 

       var canvas = document.getElementById('canvas1'); 

       var img = new Image(); 
       img.src = 'http://rakstagemom.files.wordpress.com/2011/01/image-is-cumulus_clouds_panorama-from-wikipedia-commons.jpg'; 

       var addit = -0.4; 
       var scrollSpeed = 0.01; 
       var left = 0; 
       var ctx = canvas.getContext('2d'); 
       var _scale = document.documentElement.clientHeight/canvas.height; 
       var width = canvas.width; 
       var height = canvas.height; 
       var max = -840; 

       //animation loop 
       var init = setInterval(function() { 
        left += addit; 
        if(left > -1) { 
         addit = -0.4 
        } else if(left < max) 
         addit = 0.4; 
        //0.4 
        ctx.drawImage(img, left, 0, width, height); 
        var thisFrameTime = (thisLoop = new Date) - lastLoop; 
        frameTime += (thisFrameTime - frameTime)/filterStrength; 
       }, scrollSpeed); 
      }; 
     </script> 
     <style> 
      body { 
       overflow: hidden; 
       background: #001; 
      } 
      .window { 
       padding: 0; 
       clear: none; 
       border: 1px solid rgba(0,0,0,0.5); 
       border-radius: 10px 10px 2px 2px; 
       box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
       -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
       -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
       -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
      } 
      #container { 
       width: 91.5%; 
       height: 10em; 
       margin: .55em .9em .4em .85em; 
       position: absolute; 
       background: rgba(0,100,200,0.25); 
      } 
      #canvas1 { 
       width: auto; 
       height: 100%; 
       position: absolute; 
       top: 0; 
       left: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <canvas id="canvas1" width="1784px" height="534px"></canvas> 
     <div id="container" class="window"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </p> 
     </div> 
    </body> 
</html>

出典

2012-02-04 10:04:54

。デモを目的としています。 –

は素晴らしい作品です！ここでは謎です：https://jsfiddle.net/n4xfvbw6/ – bitsapien

@CRahulはあなたが答えを受け入れるでしょうか？ thx –

HTML 5 - ダイナミック要素のレイヤーとして

答えて

関連する問題