Cut & Paste Sequential fly-in text script
|
Description: This script flies in multiple text from the left edge of the window, one at a time in sequential order similar to a PowerPoint effect. It's versatile enough to handle any number of text (or other rich HTML like images!), and you can customize both the animation speed and pause between each message. A nice effect to highlight important points on your page!
This script works in both IE5+ and NS6+.
Example: (press reload to see again)
Welcome JavaScript Kit.
Your source for JavaScript tutorials and over 400+ free scripts!
Enjoy your stay here!
Directions: Insert the below code into the head section of your page: Change both the "left" attribute within the CSS and the two variables within the script as instructed:
With the script added, all that's left is to define the text you wish to fly in, one at a time. The key is just to insert class="glidetext" into the tag(s) you want to fly in. Here is an example:
<div class="glidetext">This is text 1</div> <p class="glidetext">Another text (or image) <img src="test2.gif"></p> <div class="glidetext">This is text 3</div> <div class="glidetext">This is text 4</div>
The script will then automatically fly each one in in the order they appear on the page.
More information on customization
The script asks that you specify the initial horizontal offset of the text via the Style Sheet (ie: -500px), so the text is just beyond the left edge of the browser window, hidden from view. Now, this value is applied to all of your text. If one of your text is much longer or shorter than the rest, you may need to specify a different initial offset for that particular text.You can do so by using an inline style sheet within that text's tag. For example:
<div class="glidetext">This is text 1</div> <p class="glidetext" style="left: -800px">This text is much long than the rest, so it needs a unique initial left value. I'm going to use a inline CSS for that.</p> <div class="glidetext">This is text 3</div> <div class="glidetext">This is text 4</div>
With this the second text has a larger negative offset, assuring it's hidden from view while remaining close to the browser's edge like the rest of the text. This is important, as if any one text is too far to the left of the browser edge, there will be a delay before the text flies in and becomes visible.