Grow your CSS skills. Land your dream job.

Help w/ Blurred Text

  • # May 22, 2013 at 9:28 pm

    I’m working with the tutorial ["Having fun with Blurred Text"](http://css-tricks.com/fun-with-blurred-text/ “Having fun with Blurred Text”), I’ve replicated the animation (the last example) and it’s working as intended. However I am now trying to add an on-hover to the animation. I basically want the animation to stop on mouseover and resume on mouseout. I’ve never worked with pausing animations in CSS3 so I am at a loss.

    The jsFiddle is located [here](http://jsfiddle.net/XVBjL/ “here”).

    As of right now, it just keeps restarting the animation on hover. I’d like to have the dropshadow & blur removed for the duration of the hover. Is using .stop() the right direction or am I totally off the mark with this? Thanks for the help! (Also love the podcast Chris & Dave if you read this! )

    $(“#menu_text”).mouseover(function() {
    $(“#menu_text”).stop()
    });

    $(“#menu_text”).mouseout(function() {
    // apply spans
    $(“#menu_text”).lettering();

    var text = $(“#menu_text”),
    numLetters = text.find(“span”).length;

    function randomBlurize() {
    text.find(“span:nth-child(” + (Math.floor(Math.random()*numLetters)+1) + “)”)
    .animate({
    ‘textShadowBlur': Math.floor(Math.random()*10)+2,
    ‘textShadowColor': ‘rgba(255,255,255,’ + (Math.floor(Math.random()*200)+55) + ‘)’
    });
    // Call itself recurssively
    setTimeout(randomBlurize, 5);
    } // Call once
    randomBlurize();
    });

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".