1

こんにちは、素敵な効果を見つけましたhttp://www.wandi-studio.com/Home/Welcome — テキスト bg をアニメーション化します。(HYT WATCHES、LE BATAFOR、MAURICE LACROIX というタイトルのアニメーション背景)

このサイトでは mootools を js フレームワークとして使用していますが、JQuery を使用したいと考えています。

たぶん、誰かがこの効果を作る方法のヒントを教えてくれますか?

4

2 に答える 2

2

You can use canvas’s context.globalCompositeOperation to overwrite text with the an image.

Then you can get the movement effect you want by animating the image’s x-offset.

This code will draw text on the canvas and then overwrite just the text with the image.

// first draw the text on the canvas
      ctx.beginPath();
      ctx.font="144pt Verdana";
      ctx.fillText("See",30,200);
      ctx.fill();


      // use compositing to draw the background image
      // only where the text has been drawn
      ctx.beginPath();
      ctx.globalCompositeOperation="source-in";
      ctx.drawImage(img,-x,0);

Of course you'll want to stylize with your own text font, background image and animation pattern.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/MrVJB/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ padding:20px; }
    canvas{border:1px solid red; position:absolute}
</style>

<script>
$(function(){


    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var xOffset=100; // image offset
    var fps=60;

    var img=document.createElement("img");
    img.onload=function(){
       animate();
    }
    img.src="http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg";

    function draw(x){

            ctx.save();
            ctx.beginPath();

            // put text on canvas
            ctx.font="144pt Verdana";
            ctx.fillText("See",30,200);
            ctx.fill();
            ctx.beginPath();

            // use compositing to draw the background image
            // only where the text has been drawn
            ctx.globalCompositeOperation="source-in";
            ctx.drawImage(img,-x,0);
            ctx.restore();
    }


        function animate() {

            // change the background image offset
            xOffset+=3;
            if(xOffset>=img.width){xOffset=0;}

            // draw the text and background image
            draw(xOffset);

            // request another frame using fps intervals
            setTimeout(function() {
                requestAnimationFrame(animate);
                // Drawing code goes here
            }, 1000 / fps);
        }


}); // end $(function(){});
</script>

</head>

<body>
     <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>
于 2013-06-19T22:22:07.980 に答える
0

たとえば、このソリューションは次のとおりです。

文字が透明になる画像を作成する必要があります。位置を使用して、この画像の「下」にjQueryアニメーションを設定し、オブジェクト（この場合は別の画像）がループで右に移動して戻ります。

これは、開始時に役立つはずです。

于 2013-06-19T20:44:38.823 に答える