在滚动时创建文本拖影效果？ [英] Creating A Text Smear Effect While Scrolling?

问题描述

我试图在用户滚动页面时创建拖影效果。文本向上移动，但在后面留下一个涂片。我有一些麻烦，提出了一个方法来做到这一点。我想到了在用户滚动时克隆​​元素的可能性，并改变克隆元素的透明度，但我相信这会对性能产生严重的影响。

有没有任何想法？

解决方案

仅适用于您的效果，例如：标题：

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

---

/jsbin.com/ukiqet/1/editrel =nofollow noreferrer> 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; 
} 
  

I am trying to create a smear effect when the user scrolls the page. The text moves up, but leaves a smear of the text behind. I am having some trouble coming up with a method to do this. I thought about the possibility of cloning the element a bunch of times as the user scrolls, and changing the transparency of the cloned elements, but this I believe this would have a serious impact on performance.

Does anyone have any ideas?

解决方案

If you need to only apply your effect to eg: a Heading:

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

---

Here is Just an example of nothing you need (but quite good if you ask me regarding adding efx to much more content) :

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

这篇关于在滚动时创建文本拖影效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！