In recent years anything that was animated on a website you would automatically assume it to be Flash. However, with apple’s iPhone and iPad’s not supporting Flash people have begun to leave flash and use other methods to create animations that work across all devices. With the growing popularity and wide spread use of JavaScript frameworks, sometimes you have to take a closer look to find out what is powering all of those smooth animations.
Today I am going to show you how, using jQuery I was able to cycle text (of the services the website provides) using jQuery and an unordered list.
The complete Code will produce this:
- Josh Tucker..
- Web Developer…
- WordPress Developer…
- jQuery Tutorial…
So lets have a look at the code:
We will start with the HTML that will go into the body of the page, this is going to contain our unordered list that we are going to cycle through. There is not limit on how many items can be on the list and being that they are words they will not affect the load time of the website. The unordered list can contain links, images or any other HTML you would like to use.
<ul class="rotatelist">
<li>Josh Tucker..</li>
<li class="textright">Web Developer...</li>
<li>WordPress Developer...</li>
<li class="textright">jQuery Tutorial...</li>
</ul>
In the list above you will see that we have added a class “rotatelist” to the unordered. We will use this for both the styling with CSS and the implementation of the jQuery code.
Firstly lets create some style rules for the unordered list. Main things to note that the unordered list needs to be set to position relative and the listed items set to position absolute. This will cause them to load over the top of each other in the same location. Then it is a matter of using jQuery to rotate through the list fading 1 in to display at any one time.
I have also set the width at 560px and added the class “textright” to some of the listed items, this will make those items align to the right of the text box. You could also add more places to move it to the top and bottom of the div.
<style>
ul.rotatelist {
width:560px;
list-style: none;
position:relative;
margin:0;
color:#000000;
font-size:28px;
margin-top:30px;
}
ul.rotatelist li {
position:absolute;
left:0px;
top:0px;
display:inline;
width:560px;
}
ul.rotatelist li.textright {
text-align:right;
}
ul.rotatelist li.show {
z-index:500;
}
</style>
Lastly we need to add the jQuery that is going to cycle through the unordered list. I have included a Google hosted jQuery library and the jQuery below.
The first thing we set up are the variables that control the fade duration and slide duration, these are times in milliseconds, and set the current and next intervals to 1. Once the document is ready we add CSS to the unordered list to make the opacity 0. We then loop through the nth-child of the listed items fading the current item in and out.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var fadeDuration=4000;
var slideDuration=4000;
var currentIndex=1;
var nextIndex=1;
$(document).ready(function()
{
$('ul.rotatelist li').css({opacity: 0.0});
$("'ul.rotatelist li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
var timer = setInterval('nextSlide()',slideDuration);
})
function nextSlide(){
nextIndex =currentIndex+1;
if(nextIndex > $('ul.rotatelist li').length)
{
nextIndex =1;
}
$("'ul.rotatelist li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
$("'ul.rotatelist li:nth-child("+currentIndex+")'").animate({opacity: 0.0}, fadeDuration).removeClass('show');
currentIndex = nextIndex;
}
</script>
Thank you for reading through this tutorial, my first ever, after years of developing it is time to start putting something back. Below is the complete code, you can also view a working example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotating Unordered List Items</title>
<style>
ul.rotatelist {
width:560px;
list-style: none;
position:relative;
margin:0;
color:#000000;
font-size:28px;
margin-top:30px;
}
ul.rotatelist li {
position:absolute;
left:0px;
top:0px;
display:inline;
width:560px;
}
ul.rotatelist li.textright {
text-align:right;
}
ul.rotatelist li.show {
z-index:500;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var fadeDuration=4000;
var slideDuration=4000;
var currentIndex=1;
var nextIndex=1;
$(document).ready(function()
{
$('ul.rotatelist li').css({opacity: 0.0});
$("'ul.rotatelist li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
var timer = setInterval('nextSlide()',slideDuration);
})
function nextSlide(){
nextIndex =currentIndex+1;
if(nextIndex > $('ul.rotatelist li').length)
{
nextIndex =1;
}
$("'ul.rotatelist li:nth-child("+nextIndex+")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
$("'ul.rotatelist li:nth-child("+currentIndex+")'").animate({opacity: 0.0}, fadeDuration).removeClass('show');
currentIndex = nextIndex;
}
</script>
</head>
<body>
<h1>Cycle text using jQuery and unordered lists</h1>
<a href="http://www.joshtucker.com.au/120/cycle-text-using-jquery-and-unordered-lists/" target="_blank">View the tutorial on joshtucker.com.au</a>
<ul class="rotatelist">
<li>Clairvoyant...</li>
<li class="textright">Psychic Readings...</li>
<li>Energetic Healings...</li>
<li class="textright">Channelling...</li>
<li>Past Lives...</li>
<li class="textright">Soul Purpose...</li>
<li>Future Possibility...</li>
<li class="textright">Meditation...</li>
</ul>
</body>
</html>