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/