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;
}