Question

您好我发现了很好的效果http://www.wandi-studio.com/Home/Welcome - 动画文字bg。（标题为HYT WATCHES，LE BATAFOR，MAURICE LACROIX的动画背景）

这个站点使用mootools作为js框架，我想使用JQuery。

也许有人会给我提示如何产生这种效果？

Answer 1

您可以使用canvas的context.globalCompositeOperation覆盖带有图像的文本。

然后，您可以通过设置图像的x偏移动画来获得所需的移动效果。

此代码将在画布上绘制文本，然后用图像覆盖仅文本。

// 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);

当然，您需要使用自己的文本字体，背景图像和动画模式进行风格化。

这是代码和小提琴：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>

Answer 2

我在这里看到这个解决方案的例子：

您需要创建字母透明的图片。使用位置你还可以在这个图像“下面”设置jQuery动画，其中对象（在这种情况下是另一个图像）在循环中向右和向后移动。

这应该可以帮助你开始。

画布文字与动画bg

2 个答案: