Results 1 to 2 of 2

Thread: Per-Pixel Sine-Wave Text Scroller - JQuery

  1. #1
    Join Date
    Mar 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Per-Pixel Sine-Wave Text Scroller - JQuery

    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):

    Code:
    <!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>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    looks good
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •