DHTML - JavaScript Text Cursor Scroller Effect Code

DHTML - JavaScript Text Cursor Scroller Effect Code
This floating DHTML - JavaScript Text Cursor Scroller Effect follows your cursor like a dog. Add as many messages as you like. True copy and paste installation. Easy configuration of messages, scroller size, font, font color, font size, background color, border width and speed. CROSS BROWSER (does not work with NN6).

Move your mouse to see the floating effect!

Configuration:

Step 1: Download the the zipped-file 'cursorscroller.zip'.

Step 2: Unzip the file 'cursorscroller.zip', extract the file 'cursorscroller.js' and put the file 'cursorscroller.js'' into the same folder as your web page.

Step 3: Open your web page and paste the following code right above the </BODY> tag:

<SCRIPT>
// CREDITS:
// Cursor Scroller
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com & http://www.designerwiz.com.
// fabulant01@hotmail.com
// 2/15/2001

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where the scrips will be running.

// CONFIGURATION:
// Go to www.fabulant.com, open category 'text' and download 
// the full-version of this script as ZIP-file containing
// step-by-step instructions and copy-and-paste installation for non-programmers.

// EDIT THE VARIABLES BELOW:

// Your messages. Add as many messages as you like
var message=new Array("Did you order your free brand T-Shirt?","Also you should test our free webtools as well as our scripts!", "They will attract more visitors and enhance the impact of your webpage.")

// color of the messages (you need to set up a color for each message)
var messagecolor="black"

// how many seconds shall the scroller be visible? 
var stoptime=20

// width of scroller (pixels)
var scrollerwidth=200

// height of scroller (pixels)
var scrollerheight=18

// speed 1: lower means faster
var pause=20

// speed 2: higher means faster
var step=3

// font-size of messages
var fntsize=10

// font-family of messages
var fntfamily="Comic Sans MS"

// font-weight: 1 means bold, 0 means normal
var fntweight=1

// backgroundcolor of scroller
var backgroundcolor="ffffff"

// borderwidth of scroller (pixels)
var borderwidth=1

// width of scrollerpadding (pixels)
var cellpad=5
</script>
<SCRIPT SRC="textcursorscroller.js"></script>
<DIV ID="bgscroller" style="position:absolute;"></DIV>
<DIV ID="text" style="position:absolute;"></DIV>

IMPORTANT: Do not paste the code into tables or <DIV> and </DIV> tags or between any other container tags!

Step 4: Open your web page and configure font, scroller size etc on the top of the script (see red sample below):

// color of the messages (you need to set up a color for each message)
var messagecolor="black"

// how many seconds shall the scroller be visible?
var stoptime=20

// width of scroller (pixels)
var scrollerwidth=200

// height of scroller (pixels)
var scrollerheight=18

// speed 1: lower means faster
var pause=40

// speed 2: higher means faster
var step=3

// font-size of messages
var fntsize=10

// font-family of messages
var fntfamily="Comic Sans MS"

// font-weight: 1 means bold, 0 means normal
var fntweight=1

// backgroundcolor of scroller
var backgroundcolor="ffffff"

// borderwidth of scroller (pixels)
var borderwidth=1

// width of scrollerpadding (pixels)
var cellpad=5

Download 500 free copy-and-paste scripts

Like this code snippet? Why not share it with others by copying this page URL: