滚动时创建文本涂片效果？

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/