The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Help w/ Blurred Text

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #44990

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.