Get a free trial // 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”]( “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]( “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”).mouseout(function() {
    // apply spans

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

    function randomBlurize() {
    text.find(“span:nth-child(” + (Math.floor(Math.random()*numLetters)+1) + “)”)
    ‘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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed