javascript - 滚动时创建文本涂抹效果？

Question

当用户滚动页面时，我正在尝试创建涂抹效果。文本向上移动，但在后面留下了文本的污点。我在想出一种方法来做到这一点时遇到了一些麻烦。我考虑了在用户滚动时多次克隆元素的可能性，并改变克隆元素的透明度，但我相信这会对性能产生严重影响。

有没有人有任何想法？

Answer 1

如果您只需要将效果应用于例如：标题：

LIVE DEMO

var $h1 = $('h1');

$(window).scroll(function(){

  var scrTop = $(document).scrollTop();
  var offs = $h1.offset();
  var klon = $h1.clone();
  $('body').append(klon);
  klon.addClass('clone').css({left: offs.left, top: -scrTop+offs.top})
  .fadeTo(100,0,function(){
    $(this).remove();
  });

});

CSS：

h1{
  font-size:38px;
  transition:0.9s;
  -webkit-transition:0.9s;
}
h1.clone{
  color:transparent;
  position:fixed;
  top:0; left:0;
  text-shadow:0 0 10px #000;
}

---

这只是一个您不需要的示例（但如果您问我有关将 efx 添加到更多内容的问题，那就太好了）：

LIVE DEMO

var $p = $('p');
var timeo;

$(window).scroll(function(){
  $p.addClass('smear');
  clearTimeout(timeo);
  timeo = setTimeout(function(){
    $p.removeClass('smear');
  },100);
});

CSS3：

div p{
  font-size:18px;
  color:transparent;
  text-shadow:0 0 0 #000;
  transition:0.2s;
  -webkit-transition:0.2s;
}

div p.smear{
  text-shadow: 0 0 7px #000;
}

Answer 2

您已经接受了答案，但这是您要求的使用画布的方法（给人们时间！:)）：

//listen to the window's scroll event
$(window).on('scroll', function(e) {
    y = $(this).scrollTop();        
    drawTitle();
});

//updates text for each scroll
function drawTitle() {

    //this regulates how much smear is left
    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    //draw text at -scroll position
    ctx.fillStyle = '#007';
    ctx.fillText(txt, 20, -y + ty);
}

演示：http:
//jsfiddle.net/E2nQJ/