Solved: Animated text-based navigation links?

:z: · 04-Feb-2010, 04:19 PM #1

Hi, I'm building an html web page (no flash) and was wondering if it was possible to fade (or slide up from the horizontal rule) my navigation links into the page, one after the other, for the home page only, and ideally only for the first session visit. Aside from looking cool, I think it will draw the attention of the visitor and let them know where their main links are. I've experimented with animated .gif's, but not only was the implementation buggy, it didn't give me the flexibility to quickly edit the links.

I'm thinking some sort of JavaScript (or css?) can accomplish this, but I don't know the first thing about writing JavaScript and I couldn't find any script on the web. Does anyone know if such a script does exist, or if there's a better way I should go about doing this? Thanks!

Here's the structure for my main index:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="templates/styles.css">

<title>Test</title>

</head>

<body class="main">

<center>
<table border="0" cellspacing="0" cellpadding="0" width="800" class="header">
	<tr>
		<td align="left" valign="bottom" width="455" height="45"><a href="index.html" class="nav"><img src="images/logo.png" alt="Logo"></a></td>
		<td align="right" valign="bottom" width="146" height="45"><a href="link1/index.html" class="nav">Link1</a></td>
		<td align="right" valign="bottom" width="103" height="45"><a href="link2/index.html" class="nav">Link2</a></td>
		<td align="right" valign="bottom" width="96" height="45"><a href="link3/index.html" class="nav">Link3</a></td>
	</tr>
	<tr>
		<td align="center" valign="top" width="800" height="10" colspan="4"><hr noshade></td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="800">
	<tr>
		<td width="800" height="10"></td>
	</tr>
	<tr>
		<td align="center" valign="top" width="800" height="440">
		CONTENT WILL GO HERE
		</td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="800">
	<tr>
		<td align="center" valign="bottom" height="45" class="footer">
		<hr noshade>
		</td>
	</tr>
</table>

</center>
</body>
</html>

ehymel · 07-Feb-2010, 01:51 AM #2

See http://script.aculo.us/

Not sure they have exactly what you want, but lots of stuff along the lines of what you are looking for.

:z: · 08-Feb-2010, 10:23 AM #3

ehymel:

Thanks for your reply. Unless there's something I missed, I didn't find a solution there. The Effect.DropOut is kind of what I'm wanting, though, only I would need it in reverse and for it to run automatically on page load rather than being clicked to run (http://wiki.github.com/madrobby/scri...effect-dropout).

:z: · 16-Feb-2010, 11:39 AM #4

Is anyone else able to help on this?

tomdkat · 16-Feb-2010, 12:07 PM #5

DynamicDrive.com has a ton of JavaScript menus and several that slide in. Maybe one of those would work for you.

Peace...

:z: · 16-Feb-2010, 12:26 PM #6

tomdkat:

I guess I'm not doing a very good job of explaining what I want. I don't really want the links to float in as a block on the page. I want them to sort of materialize in place (fade in), one after the other (1-2-3), or materialize/fade-in while sliding up one at a time from the horizontal rule (about a 10 pixel total travel distance while fading in). Any ideas for that? I wasn't able to find anything like what I am wanting at DynamicDrive (unless there's a section I'm missing perhaps?).

colinsp · 16-Feb-2010, 12:59 PM #7

Sounds like you probably need a menu made in Flash

tomdkat · 16-Feb-2010, 01:03 PM #8

I've seen menus like you describe but those have tended to be Flash menus.

You might end up having to purchase a script or finding someone to create a JavaScript nav menu, per your specifications.

If I stumble upon anything, I'll post a link here.

Pace...

:z: · 16-Feb-2010, 01:07 PM #9

I've seen an effect done with JavaScript before that came close to doing what I want. It faded the color of the text from one color, to another, to another, etc. So I set that script to change it from white, to light gray, to medium gray, etc. to give the illusion of the text fading in. That script didn't end up working, though, because it repeated endlessly and I just want it to run once the first time it's loaded.

:z: · 16-Feb-2010, 01:09 PM **#10**

Here's the script if anyone is interested:
http://forums.techguy.org/web-design...ade-issue.html

:z: · 16-Feb-2010, 01:12 PM **#11**

Aside from not knowing how to build with Flash (and not having the software either), I'd prefer to keep the code cleaner and more universal, as Flash has many issues with compatibility. My navigation links are the most critical element and if they don't work, then the site doesn't work.

Thanks everyone for the feedback.

tomdkat · 16-Feb-2010, 01:59 PM **#12**

Quote:

Originally Posted by :z:

Here's the script if anyone is interested:
http://forums.techguy.org/web-design...ade-issue.html

Where did you find that JavaScript code?

Peace...

:z: · 16-Feb-2010, 02:07 PM **#13**

tomdkat:

You know, I have no idea. It was so long ago I can't even remember. I take it by your inflection that it's not a particularly well-written code?

tomdkat · 16-Feb-2010, 02:13 PM **#14**

Nope, I wasn't referring to the quality of that code but was trying to emphasize wanting to know where the code, in the other thread, came from.

If we knew where that code came from, we could possibly find out where to get a canned script that functions closer to what you're after.

I'm just looking for clues.

Peace...

:z: · 16-Feb-2010, 02:34 PM **#15**

tomdkat:

Well, I haven't been able to find where I got that script, but I did find another one that does exactly what I want, except that it fades in text instead of text links.

The code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    width:600px;
    margin:auto;
 }
#container p{
    height:100%;
 }
#p4 {
    font-family:'times new roman',serif;
    font-size:18px;
    color:#006;
    text-align:justify;
 }
</style>

<script type="text/javascript">
  var lines=new Array();
      lines[0]='text1';
      lines[1]='text2';
      lines[2]='text3';
      lines[3]='text4';
      lines[4]=
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.'+ 
'Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus '+ 
'nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. '+ 
'Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, '+ 
'nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,'+  
'ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate '+ 
'ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta '+ 
'bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.';
  var c=0;
  var value=0;
  var speed=20;

function addLines() {
if(c>=lines.length) {
   return;
}
   par=document.createElement('p');
   par.setAttribute('id','p'+c);
   par.appendChild(document.createTextNode(lines[c]));
   document.getElementById('container').appendChild(par); 
   setOpacity();
}

function setOpacity() {
   obj=document.getElementById('p'+c);
if(value>100) {
   value=0;
   c++;
   return addLines();
 }
if(obj.filters) {
   obj.style.filter='alpha(opacity='+value+')';
 }
else {
   obj.style.opacity=value/100;
 }
   value++;
setTimeout('setOpacity()',speed);
 }

window.onload=function() {
   addLines();
 }
</script>

</head>
<body>

<div id="container"></div>

</body>
</html>

found here: http://www.codingforums.com/showthread.php?t=115025

Tag Cloud
access acer asus bios bsod computer crash desktop driver drivers error ethernet excel freeze gaming hard drive hardware hdmi internet laptop malware memory modem monitor motherboard network printer problem ram registry router security slow software sound toshiba trojan ubuntu 11.10 uninstall usb video virus vista wifi windows windows 7 windows 7 32 bit windows 7 64 bit windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for:

Find the solution to yourcomputer problem!

Find the solution to your
computer problem!