SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can anyone tell me how to create "wiggle" effect?

    I have seen some sites that have a call to action with some sort of image, like an arrow,etc., and after your on the page for a few seconds it will wiggle or point in the direction they want you to look in. I thought it could be done with CSS3, but it doesn't seem to have that timing feature and isn't widely supported. Is there a Jquery plugin for something like this?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by satori83 View Post
    I have seen some sites that have a call to action with some sort of image, like an arrow,etc., and after your on the page for a few seconds it will wiggle or point in the direction they want you to look in. I thought it could be done with CSS3, but it doesn't seem to have that timing feature and isn't widely supported. Is there a Jquery plugin for something like this?
    Due to the wide possibilities with such techniques, can you link us to a couple of examples of what you mean?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately I didn't bookmark them and I can't remember. I found this yesterday which is close, but you have to hover to make the element move. I was hoping to do it where like 15-20 seconds after page loads it would activate on its own and continue every few seconds. http://droot.github.com/wiggle/#

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by satori83 View Post
    Unfortunately I didn't bookmark them and I can't remember. I found this yesterday which is close, but you have to hover to make the element move. I was hoping to do it where like 15-20 seconds after page loads it would activate on its own and continue every few seconds. http://droot.github.com/wiggle/#
    This is the CSS that the page uses to perform the wiggle. I've just changed the :hover pseudo-selector to a .hover one instead, so that we can use scripting to add and remove that hover class to the button.

    Code css:
    @-webkit-keyframes wiggle {
        0% {-webkit-transform:rotate(2deg);}
        50% {-webkit-transform:rotate(-2deg);}
        100% {-webkit-transform:rotate(2deg);}
    }
     
    @-moz-keyframes wiggle {
        0% {-moz-transform:rotate(2deg);}
        50% {-moz-transform:rotate(-2deg);}
        100% {-moz-transform:rotate(2deg);}
    }
     
    @keyframes wiggle {
        0% {transform:rotate(2deg);}
        50% {transform:rotate(-2deg);}
        100% {transform:rotate(2deg);}
    }
     
    .alert.hover .btn-danger {
        -webkit-animation: wiggle 0.2s;
        -moz-animation: wiggle 0.2s;
    }
    ​

    To add and remove the class name, we can use a scripting library if you already have one, or we can use these functions to manage the task for us.

    Code javascript:
    function hasClass(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
     
    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className += ' ' + cls;
        }
    }
     
    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'),
                newClass = ele.className.replace(reg, ' ');
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }

    All that's needed now is to add the hover class, and to then remove that class name after the CSS animation has finished performing its wiggle.
    So we create a triggerHover function, which whenever it's run will add the hover class name, and then shortly afterwards remove it.

    Code javascript:
    function createTriggerHover(el, duration) {
        return function () {
            addClass(el, 'hover');
            window.setInterval(function () {
                removeClass(el, 'hover');
            }, duration);
        };
    }
    var alert = document.querySelector('.alert'),
        triggerHover = createTriggerHover(alert, 1000);
     
    window.setInterval(triggerHover, 3000);

    I've made the delay between each wiggle for 3 seconds, so that you can see its effect without having to wait as long between each one.

    You can see it in action at http://jsfiddle.net/pmw57/XVEsf/2/
    Last edited by paul_wilkins; Oct 18, 2012 at 20:18.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Off Topic:

    That's amazing, paul. Although, for me in Chrome, it wiggles once and then only blinks every three seconds from that point on. Just following along here with interest.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thank you for the detailed explanation! I definitely understand the theory of how you accomplished it, but some of the js code is a bit over my head still. It definitely does exactly what I wanted. But, I noticed that the one time I loaded the page, it moved twice, I loaded the page again and it went 4 times, another 3 times. Is that because of the jsfiddle platform? Or is there a way to set number of times the script should be executed?

    *Forgot to mention I was viewing in firefox

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by satori83 View Post
    Wow, thank you for the detailed explanation! I definitely understand the theory of how you accomplished it, but some of the js code is a bit over my head still. It definitely does exactly what I wanted. But, I noticed that the one time I loaded the page, it moved twice, I loaded the page again and it went 4 times, another 3 times. Is that because of the jsfiddle platform? Or is there a way to set number of times the script should be executed?
    The script triggers on a cycle that loops forever, repeating every 3 seconds.

    You may want to talk to someone in the CSS forum about issues relating to the CSS effect.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by satori83 View Post
    I have seen some sites that have a call to action with some sort of image, like an arrow,etc., and after your on the page for a few seconds it will wiggle or point in the direction they want you to look in.
    An animated gif would always work but the JS solution is pretty trivial. Just substitute your own image:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Poxy Element Vibrator</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type='text/css'>
    body{background-color:#00f}
    #g_arrow{ position:fixed; bottom:20px;right:20px; margin:0 10px 0 10px }
    </style>
    </head>
    <body>
    <img src='greenrightarrow.gif' d='g_arrow' >
    
    <script type='text/javascript'>
    
    function cycleMargin( imgId, defMargin, offsetMargin )
    {
      var elem = document.getElementById( imgId ),
          displaced = false;
      
      function nudge()
      {
        elem.style.margin = ( displaced ^= true ) ? defMargin : offsetMargin; 
        
        setTimeout( nudge, displaced ? 100 + Math.random() * 500 : 50 );
      }
      
      nudge();
    }
    
    cycleMargin( 'g_arrow', '0 10px 0 0', '0 0 0 10px' );
    
    </script>
    </body>
    </html>
    Tab-indentation is a crime against humanity.

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I came across an example finally! http://css3ps.com/ They achieved it with just css3, though its more a shake effect than wiggle. Any decent browser would support it I guess.

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,234
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I like Ali's mention of the animated gif. Some browsers offer the option to turn those off, but people who want no animation on gifs should be able to. It's small, simple, runs whether the browser is old or new, whether JS is available or not. Especially if you are not changing the frequency of the wiggle (I would indeed use JS if that needs to change as the user does stuff).

    If you want an example of insane wiggle, http://www.staggeringbeauty.com/ will be sure to give you epilepsy or a war flashback if you are currently sane and healthy.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •