Creating A Text Smear Effect While Scrolling?

Question

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?

The only idea I had thus far, is to create a bunch of the same element changing the opacity on the underlying elements and apply a parallax effect to the text. — mcbeav, Jul 01 '13 at 02:18
ok, it's fine for eg. a title, but to to clone on the flight all your texts, multiple times, get the exact positions, apply to all those texts a fade, I find it too expensive and probably would end up like a freezing bunch of useless efx — Roko C. Buljan, Jul 01 '13 at 02:21
Right, and that is why I am asking for some advice. The only idea I really had, I thought would impact performance far too much. Any other ideas? — mcbeav, Jul 01 '13 at 02:22
I am trying to think of a way to use SVG or Canvas but I am blanking out. — mcbeav, Jul 01 '13 at 02:22
Sure, an idea would be to rock it with **HTML5 Canvas**. You can achieve pretty amazing things in there. But than it will not be a website in the real means of Text, Images, Semantic Content, Tags, SEO ... — Roko C. Buljan, Jul 01 '13 at 02:23
Hmm, but I have an idea :) not exactly what you want but a way to go would be to blur your text on scroll (**CSS3 using a class**), apply it on scroll, just will not perform exactly the way you want once you stop scrolling. — Roko C. Buljan, Jul 01 '13 at 02:28
The real question is whether your visitors will enjoy this effect. I'm pretty sure I would find it extremely annoying, but maybe I'm not part of your target market. — Michael Geary, Jul 01 '13 at 02:31
It is just for effect, it is targeting just a heading, not all of the text on the page. — mcbeav, Jul 01 '13 at 02:43

Roko C. Buljan · Accepted Answer · 2013-07-01T19:36:27.137

3

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

enter image description here

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

edited Jul 01 '13 at 19:36

answered Jul 01 '13 at 02:36

Roko C. Buljan

196,159
39
305
313

1

Thanks! Not exactly what I was looking for, but I think this is going to work instead. Thanks again! – mcbeav Jul 01 '13 at 02:38
@mcbeav I'm sorry it was not exactly what you're looking for but at least a less CPU "expensive" *workaround* :) (P.S, you can now try to clone the main container but I won't again suggest that) Happy coding! – Roko C. Buljan Jul 01 '13 at 02:40
@mcbeav added a nice example with only a header element and cloning – Roko C. Buljan Jul 01 '13 at 03:04
Nice ! I would add however to the smear class color: rgba (0, 0, 0, 0.8) and text-shadow: 0 5px 1px rgba(0, 0, 0, 0.5), 0 11px 2px rgba(0, 0, 0, 0.3); (multiples shadows, and with decreasing alphas and increasing y – vals Jul 01 '13 at 17:01
@vals thanks. There's lot of space for customization to get the more realistic efx, It's up to our visual skills and time to get it right :) – Roko C. Buljan Jul 01 '13 at 21:05

score 2 · Answer 2 · answered Jul 01 '13 at 02:49

enter image description here

You have already accepted an answer, but here is an approach using canvas as you asked for (give people time! :) ):

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

Demo:
http://jsfiddle.net/E2nQJ/

This is awesome! Thanks. I was playing around with Canvas last night, but was attempting to draw the letters instead of just printing them. Thanks for your help! — mcbeav, Jul 01 '13 at 10:11

Creating A Text Smear Effect While Scrolling?

2 Answers2

Linked