Scroll page back to the top

Flashing text with jQuery

Demo
 
 

Sometimes you might need to bring your visitors attention to some particular text or phrase, and the most obvious way of doing it is by using some flashing / animating effect.

In this tutorial I will show you how to create a flashing text effect with JavaScript and a small portion of jQuery.

First create a new text element on your page - it might be a paragraph, heading, span or anything you wish - I'll use the h1 tag:

<h1 class="flash">Flashing text tutorial</h1>

Make sure that your element has some class assigned to it so that it is easily identifiable on the page - I used the class flash.

Now in your javascript file create a new object called textObject:

var textObject = {

};

Our new object will have three properties named:

  • delay : represents the delay between transitions
  • effect : defines the effect used : replace / colour
  • classColour : class name that contains the colour for the colour effect
delay : 300,
effect : 'replace',
classColour : 'blue',

Next we create our first method called flash:

flash : function(obj, effect, delay) {
	if (obj.length > 0) {
		if (obj.length > 1) {
			jQuery.each(obj, function() {
				effect = effect || textObject.effect;
				delay = delay || textObject.delay;
				textObject.flashExe($(this), effect, delay);					
			});
		} else {
			effect = effect || textObject.effect;
			delay = delay || textObject.delay;
			textObject.flashExe(obj, effect, delay);
		}
	}
},

Our flash method takes three parameters, out of which only first one is required:

  • obj : represents the object to which we want to apply the effect
  • effect : the chosen effect to be applied to the object - by default value assigned to the 'effect' property will be used
  • delay : the delay between transitions - by default value assigned to the 'effect' property will be used

The first if statement checks whether object is present on the current page. Following if statement checks if there is more than one element on the page - and if so, we use jQuery's each method to loop through all of the elements on the page. Inside of the loop we check whether the effect parameter passed to the method has any value - and if not we assign the default one. The same applies to the delay parameter.

On the next line we are calling the flashExe method passing all filtered parameters.

The exact same procedure applies to the else statement - the only difference is that it's called directly rather than from within a loop.

Now we need to create another method called flashExe:

flashExe : function(obj, effect, delay) {
	var flash = setTimeout(function() {
		switch(effect) {
			case 'replace':
			obj.toggle();
			break;
			case 'colour':
			obj.toggleClass(textObject.classColour);
			break;
		}
		textObject.flashExe(obj, effect, delay);
	}, delay);
}

This method takes the filtered parameters and uses them accordingly to perform the animation.

On the first line we create a new variable called flash and assign the setTimeout function to it.

The setTimeout function takes two parameters - first one, which is the function we want to execute after the certain time - which is represented by the second parameter.

The function we will execute after the number of milliseconds defined by the delay parameter uses the switch statement with the value assigned to the effect parameter as argument. If the value is replace then we simply toggle the visibility of the object by using jQuery's toggle() method, otherwise we toggle the class name assigned to the classColour property of the textObject by using the jQuery's toggleClass() method.

The last line (after the switch statement) simply calls the parent method again creating a repetitive effect.

Your entire object should now look like this:

var textObject = {
	delay : 300,
	effect : 'replace',
	classColour : 'blue',
	flash : function(obj, effect, delay) {
		if (obj.length > 0) {
			if (obj.length > 1) {
				jQuery.each(obj, function() {
					effect = effect || textObject.effect;
					delay = delay || textObject.delay;
					textObject.flashExe($(this), effect, delay);					
				});
			} else {
				effect = effect || textObject.effect;
				delay = delay || textObject.delay;
				textObject.flashExe(obj, effect, delay);
			}
		}
	},
	flashExe : function(obj, effect, delay) {
		var flash = setTimeout(function() {
			switch(effect) {
				case 'replace':
				obj.toggle();
				break;
				case 'colour':
				obj.toggleClass(textObject.classColour);
				break;
			}
			textObject.flashExe(obj, effect, delay);
		}, delay);
	}
};

Now, that our object is completed, the last thing we need to do is to call the relevant method when the document is ready like so:

$(function() {
	
	textObject.flash($('.flash'));	
	
});

The above will use the default effect and default delay, if you wish to use the changing colour effect simply add the 'colour' keyword as second parameter:

textObject.flash($('.flash'), 'colour');

Or to change the delay to say 700 milliseconds add the third parameter:

textObject.flash($('.flash'), 'colour', 700);

The same with the default effect (replace):

textObject.flash($('.flash'), '', 700);
 
 
 

Discussion (2 comments)

 
Page 1 of 1
  • First
  • Previous
  • 1
  • Next
  • Last
 
 
Add a comment
Add Comment