Metachecker.net
|
FontsMadeEasy.com
|
RankChecker.net
Learn Java Script Today
|
Over 5000 Free Fonts
|
Tutorials
|
Javascript Forum
|
Other Javascript Resources
|
Cheat Sheet
JavaScript Basics
Inserting Javascript
Complete Tutorial
Advance DHTML Tutorial
Script archive
Advanced Tutorials
Alert Scripts
Animation
Audio
Background Effects
Banner Ads
Browser Window
Buttons
Button Forms
Calculcators
Calendars
Clocks & Dates
Cookies
Cursor Effects
DHMTL Games
DHTML Miscellaneous
Equivalents
Forms
Games
IE4+ Scripts
IE5+ Scripts
Image Effects
Image Miscellaneous
Links & Buttons
Math Related
Messages Miscellaneous
Miscellaneous
Mouse Tricks
Navigation
Page Details
Password Protection
Pulldown Menus
Random Stuff
Scrolling
Status Bar
Text Animation
User Detail
User Info
Window Control
Sine Scrolling Text Script
Using some sophisticated math calculations, not to mention great DHTML programming, this is a visually stunning sine scrolling text animation.
Insert into <HEAD>
<style type="text/css"> .scroll {font-weight:bold; font-size:36; text-align: center; font-family: Verdana, Courier, Courier New;} </style>
Insert into <BODY>
<script> // globals var initialx, initialy, scrolltext; var frame = 0, frame2 = 0.5; var amplitude1 = 50, amplitude2 = 30; var offset = 0.2, speed = 0.2, speed2 = 0.35; var offset2 = 0.6; var scrollspeed = 6; var charwidth = 30; var twopi = Math.PI * 2; var chracters, position, numvisible, nextchar, firstchar; var skipsteps = 1; var delaytimer = 0; var interval; // function to create sine scroller function sinescroll (x, y, value, number_of_chars) { // setup globals scrolltext = new String(value); initialx = x; initialy = y; numvisible = number_of_chars; nextchar = numvisible; firstchar = 0; // create fixed-size arrays of characters and positions characters = new Array(numvisible); position = initialx; // write DIVs to hold characters for (var i = 0; i < numvisible; i++) { document.write('<DIV ID="character" STYLE="position:absolute;top:', initialy, ';left:-10000', //(initialx + i * charwidth), ';width=', charwidth, ';height=30;" ><p class=scroll>', scrolltext.charAt(i), '</p></DIV>'); } } // animation function function step () { // increment counters frame += speed; frame2 += speed2; // delay timer if (delaytimer > 0) { delaytimer--; } else { // update position position -= scrollspeed; } // check for 'offscreen' if (position < (initialx - charwidth)) { while (scrolltext.charAt(nextchar) == '|') { delaytimer += 90; nextchar++; } // set nextchar into characters array characters[firstchar].innerHTML = '<p class=scroll>' + scrolltext.charAt(nextchar) + '</p>'; // update nextchar nextchar++; // check for wrap-around if (nextchar >= scrolltext.length) { nextchar = 0; } // change position and counters by offset position += charwidth; frame += offset; frame2 += offset2; // update firstchar firstchar++; if (firstchar >= numvisible) { firstchar = 0; } } // wrap-around counters if (frame > twopi) frame -= twopi; if (frame2 > twopi) frame2 -= twopi; // set up loop variables var angle = frame; var angle2 = frame2; var pos = position; // update the html for (var i=firstchar; i < numvisible; i++) { characters[i].style.left = pos; characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2); angle += offset; angle2 += offset2; pos += charwidth; } for (var i=0; i < firstchar; i++) { characters[i].style.left = pos; characters[i].style.top = initialy + amplitude1 * Math.sin(angle) + amplitude2 * Math.sin(angle2); angle += offset; angle2 += offset2; pos += charwidth; } } // start the animation function start () { if (!document.all) return // get all of the DIV tags into an array (IE only?) characters = document.all.item('character'); // setup timeout to call this function again interval = window.setInterval("step();", 20); } // stop the animation function stop () { if (!document.all) return if (interval) clearInterval(interval); } window.onload=start window.onunload=stop // create the scroller if (document.all) sinescroll(30, 100, " **** Remember those great Amiga demos? You can recreate the endless sine-scrolling messages in JavaScript! Conversions to Netscape welcome, as are improvements - email to mark.baker@usa.net This script can cope with ** delays ** | and even longer delays - ** heloooo **||| Feel free to use it and rip it off (well you're going to anyway...) TTFN... **** ", 15); </script>
Other Options