PDA

View Full Version : Per-Pixel Sine-Wave Text Scroller - JQuery



cliveminni
03-18-2011, 12:13 PM
1) CODE TITLE: Per-Pixel Sine-Wave Scroller - JQuery

2) AUTHOR NAME/NOTES: Clive Minnican

3) DESCRIPTION: Fully configurable per-pixel sine-wave text scroller (as seen in many scene demos in late 90's). Choose your pixel step size (default 5 pixels), sine step values and also define your own colour gradient. Works in Chrome, Firefox, Safari and IE.

4) URL TO CODE:

or, ATTACHED BELOW (see #3 in guidelines below):


<!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>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

<style type="text/css">
body
{
font-family: Arial, Verdana, helvetica, Sans-Serif;
}
.scrollerwindow
{
position:absolute;
left:0px;
top:0px;
border:0px;
background-color:#ffffff;
overflow:hidden;
}
.textslice
{
display:none;
position:absolute;
left:0px;
top:0px;
border:0px;
/*color:#0000ff;*/
background-color:transparent;
font-weight:bold;
text-align:left;
vertical-align:middle;
}
.scrollpadding
{
float:left;
}
.scrolltext
{
position:absolute;
left:0px;
top:0px;
display:none;
font-weight:bold;
white-space:nowrap;
}
</style>

<script type="text/javascript"><!--

var framerate = 30;

var angle1 = 0;
var angle2 = 0;
var angle3 = 0;
var anglestep1 = 4;
var anglestep2 = 2;
var anglestep3 = 3;
var pixelsize = 5;

var scrolltextwidth = 0;

var windowx = 50;
var windowy = 50;
var windowwidth = 600;
var windowheight = 400;

var scrollxoffset = 0;
var scrollxspeed = 4;

var sinemultiplier1 = 100;
var sinemultiplier2 = 50;

var textslicexoffset = 0;
var textslicecount = windowwidth / pixelsize;
var textslicefontsize = 32;

var startcolour = "#ff0000";
var endcolour = "#0077ff";
var startcolourr = 0;
var startcolourg = 0;
var startcolourb = 0;
var endcolourr = 0;
var endcolourg = 0;
var endcolourb = 0;
var colourrinc = 0;
var colourginc = 0;
var colourbinc = 0;
var currentcolourr = 0;
var currentcolourg = 0;
var currentcolourb = 0;

var sinearray1 = new Array();
var sinearray2 = new Array();

$(document).ready(function () {

$("#scrolltext").css("font-size", textslicefontsize + "px");
$("#scrolltext").css("height", (textslicefontsize + 8) + "px");

scrolltextwidth = $("#scrolltext").width() + windowwidth + 100;

for (var i = 0; i < 360; i++) {
sinearray1[i] = sinemultiplier1 + (Math.sin(DegToRad(i)) * sinemultiplier1);
sinearray2[i] = sinemultiplier2 + (Math.sin(DegToRad(i)) * sinemultiplier2);
}

var textslicehtml = "";
for (var i = 0; i < textslicecount; i++) {
textslicehtml += ("<div id='textslice" + (i + 1) + "' class='textslice'><div class='scrollpadding'>&nbsp;</div>" + $("#scrolltext").html() + "</div>");
}

$("#scrollerwindow").html(textslicehtml);
$("#scrollerwindow").css("left", windowx + "px");
$("#scrollerwindow").css("top", windowy + "px");
$("#scrollerwindow").css("width", windowwidth + "px");
$("#scrollerwindow").css("height", windowheight + "px");

$(".scrollpadding").css("width", (windowwidth + (pixelsize * 2)) + "px");
$(".scrollpadding").css("height", (textslicefontsize + 8) + "px");

$(".textslice").css("font-size", textslicefontsize + "px");
$(".textslice").css("width", scrolltextwidth + "px");
$(".textslice").css("height", (textslicefontsize + 8) + "px");

startcolourr = parseInt(startcolour.substring(1, 3), 16);
startcolourg = parseInt(startcolour.substring(3, 5), 16);
startcolourb = parseInt(startcolour.substring(5, 7), 16);

endcolourr = parseInt(endcolour.substring(1, 3), 16);
endcolourg = parseInt(endcolour.substring(3, 5), 16);
endcolourb = parseInt(endcolour.substring(5, 7), 16);

colourrinc = (endcolourr - startcolourr) / textslicecount;
colourginc = (endcolourg - startcolourg) / textslicecount;
colourbinc = (endcolourb - startcolourb) / textslicecount;

currentcolourr = startcolourr;
currentcolourg = startcolourg;
currentcolourb = startcolourb;

for (var i = 0; i < textslicecount; i++) {

$("#textslice" + (i + 1)).css("color", "rgb(" + parseInt(currentcolourr + "", 10) + "," + parseInt(currentcolourg + "", 10) + "," + parseInt(currentcolourb + "", 10) + ")");

currentcolourr += colourrinc;
currentcolourg += colourginc;
currentcolourb += colourbinc;

}

setInterval(function (e) {

angle2 = angle1 + angle3;

for (var i = 0; i < textslicecount; i++) {

textslicexoffset = (i * pixelsize);

if (i != 0)
$("#textslice" + (i + 1)).css("display", "block");
else
$("#textslice" + (i + 1)).css("display", "hidden");

$("#textslice" + (i + 1)).css("top", sinearray1[angle2] + "px");
$("#textslice" + (i + 1)).css("clip", "rect(0px " + (scrollxoffset + textslicexoffset + pixelsize) + "px " + (textslicefontsize + 8) + "px " + (scrollxoffset + textslicexoffset) + "px)");
$("#textslice" + (i + 1)).css("margin-left", "-" + scrollxoffset + "px");
$("#textslice" + (i + 1)).css("margin-top", sinearray2[angle3] + "px");

angle2 += anglestep2;
if (angle2 >= 360)
angle2 -= 360;
}

angle1 += anglestep1;
if (angle1 >= 360)
angle1 -= 360;

angle3 += anglestep3;
if (angle3 >= 360)
angle3 -= 360;

scrollxoffset += scrollxspeed;
if (scrollxoffset > scrolltextwidth)
scrollxoffset -= scrolltextwidth;

}, (1000 / framerate));
});

function DegToRad(degrees) {
return ((degrees * Math.PI) / 180);
}
//--></script>
</head>
<body>
<div>

<div id="scrollerwindow" class="scrollerwindow"></div>

<div id="scrolltext" class="scrolltext">Happy Christmas everyone!!! ............................................ We wish you a merry Christmas! We wish you a merry Christmas! We wish you a merry Christmas, and a happy new year! Good tidings we bring, to you and your king! We wish you a merry Christmas, and a happy new year!</div>

</div>
</body>
</html>

vwphillips
03-21-2011, 10:03 AM
looks good