Lake.js：湖の水にいるかのようにイラストを反映するjQueryプラグイン

lake.jsスクリプトが知られるようになりました-jQueryプラグインは、イラスト（<img>要素）を取得してキャンバスに配置し（ <canvas>要素を挿入します）、そのすぐ下に波のように見える鏡像を置きます-湖の水の中にいるかのように。



これは凍った波ではなく、水の中を伝わる波に関するものです。その位相はjavascriptによって動的に変更されます。 （この効果はHabrahabrで再現できないことは明らかなので、静的なスクリーンショットを挿入します。）



キャンバスの幅は、処理中のイラストと同じで、高さは2倍です。



プラグインの呼び出しは、比較的単純で自明です。

<script src="jquery.js"></script> <script src="lake.js"></script> <script> $(function() { $('#lake-img').lake({ 'speed': 1, 'scale': 0.5, 'waves': 10 }); }); </script> ... <img id="lake-img" src="lake.png" style="display: none;"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

パラメータには次の意味があります。

• 速度 -波の速度;
  
  
• scale-波のこぶの高さ（振幅）;
  
  
• 波 - 波の数。

アニメーションフレームはスクリプトの最初にコンパイルされるため、最初のページの読み込み後（ $（ ... ）が機能する場合）、速度が低下する可能性があります。 lake.jsの作成者は、このスクリプトがほとんどのデバイスで許容範囲内で機能すると主張しています。