jQuery

Jittery Text with javascript – Part One


As a UI designer I wanted to create a way in which I can bring in the attention of the user without using jarring colors. Imagine a product page with its super lowest price just shaking there in its place like its got the jitters from cold. That’s exactly what i wanted to show using jQuery code. So let jump right on into it.

  1. In this FIRST PART of the tutorial we will see how to make any element on a whole to shake in its own place.
  2. The SECOND PART we will see how to shake individual letters of the line or any text element.

Step 1:

First let us create a html element with an ‘id’ so that we can select it using jQuery. Then we will position this element relative using CSS, and add top and left value so that it indented from it current place making to jitter.

<p id="full_jitter" class="helvet_font">Look Mama! I&#39;m Shaking :)</p>

Step 2:

Now to the interesting part. Lets start writing jQuery. We will use javascript also to aid us in a few places for those functions are not readily available in jQuery. Let’s take a look at the entire code now and I will explain them one by one at the later steps.

setInterval(function() {
    var m_rand = Math.random();
    var rand_num = Math.floor((Math.random()*2)+1);
    var m_rand = m_rand < 0.5 ? -1*rand_num : rand_num;
    var element = $('#full_jitter');
   
    if (m_rand%2 == 0) {
        element.css({
            top: m_rand
        });
    } else {
        element.css({
            left: m_rand
        });
    };
}, 3 ); // every 0.0003 second
p {
    position: relative;
}

setInterval

First we will create a ‘setInterval’ function. W3Schools define it as “The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).” So every 1000 milliseconds = 1 Sec. We set this at the end of the function. In this case we have set the function to evaluate again at 3milliseconds, which counts to 0.0003 seconds. This is the parameter which controls the speed of jittering. Increase the number of the seconds and the speed reduces.

Create the value of jitter

Now we have to create the amount of jittering you want. For this we have to create a random number with a maximum value of 3 (because the higher the value and the shaking looks bizzare, so lets keep it small). We will then assign this value to ‘id’ of the element we want to shake.

For this we will take help of Math.random() function from javascript. It create a random floating number. In the second step we round it off with Math.floor() function again from javascript. Because all the numbers that are generated are positive we also need negative numbers so that the text shakes up (+ve value) and down (-ve value) too. To keep it as random as possible we use the Math.random() function again. By now we have assigned it to a variable m_rand. So if m_rand is less 0.5 then we multiply m_rand value by -1. This gives us the negative number that we want.

Assign the values

Now its time to assign the values to the ‘id’ of the element. First we fetch that element we want to shake into the element variable. Then to again keep things random we do an if statement checking if the resultant m_rand value is divisible by 2 giving a reminder of 0. This is accomplished by m_rand%2 == 0. And by this way we assign each value to the top attribute and left attribute of the element we selected.

Conculsion

  • So every time the function fires because of setInterval() function a random number is generated.
  • It is rounded off and checkd if less than 0.5 if so then you multiply it with -1.
  • Now if statement is run to see if its odd or even and assigned to top and left values.

And that is it. Now just refresh your browser and check it. You will sure like what you see. Please share with me how you will use it in your project and how creatively you can improvise it. Will soon meet you again with the PART 2 Tutorial.

Latest Comments

Leave a Reply

comment on this article