Using Javascript & CSS Animations to create a TEXT marquee

Question

I am preying somebody can help me out..

Brief History:

Im building a radio station on the internet, the Webpage will display metadata for songs playing and songs played in the past...

So far i have managed to build a MYSQL database, Query the database in PHP, encode the array of data in JSON, use ajax to set a timer to query the database and JavaScript to parse the data to HTML...

I have also managed to get my head around HTML & CSS to an extent..

I am brand new to coding and everything is coming along nicely and am doing some courses in JavaScript but what i want is far too advanced for any course i have taken so far....

The Question:

I wish to make a TEXT marquee that will display the name of the song currently playing. The text marquee will have some rules.

Rule 1: The name of the song will stay static on screen if it is equal to or less than the display area.

Rule 2: If the name of the song is greater than the display area then it needs to animate.

Before you go any further i need to note that i have looked at a few JQuery marquees but none of them suite my needs

The Maths:

FIXED DIV WIDTH = 257.4 Pixels

(This is the "wrapper" which will contain the variable text (which is a little bigger than my MAXIMUM TEXT WIDTH so it looks pretty...)

VARIABLE TEXT WIDTH = x characters

(defined by "list0title" which is variable data from MYSQL dB) (the characters will need to be converted to pixels for use with MAXIMUM TEXT WIDTH)

MAXIMUM TEXT WIDTH = 250 Pixels

(this is the maximum text that fits in the "wrapper" comfortably, if VARIABLE TEXT WIDTH is equal to or less than MAXIMUM TEXT WIDTH the text will be static, otherwise the text will animate in a ping pong style)

ANIMATION:

VARIABLE TEXT WIDTH - MAXIMUM TEXT WIDTH = PIXELS TO ANIMATE (for example if my VARIABLE TEXT WIDTH was 150 pixels and my MAXIMUM TEXT WIDTH was 100 PIXELS i would need to animate the text by 50 pixels 150-100 = 50 pixels)

So this above is me explaining The JavaScript / CSS intergrated script i need in the best way i can..

I will include my JavaScript Below so you can see how the information is obtained from the MYSQL database and also provide the example code for the animation.

JAVASCRIPT:

function getPlaylist()
{
var xmlhttp,
timer;

if (window.XMLHttpRequest)
   {
   xmlhttp = new XMLHttpRequest();
   } 
else
   {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }

xmlhttp.onreadystatechange = function ()
    {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
    {

    var list = eval ('('+xmlhttp.responseText+')');
    {

document.getElementById("list0artist").innerHTML=list[0].artist;
document.getElementById("list0title").innerHTML=list[0].title;
document.getElementById("list0titlelength").innerHTML=list[0].title.clientwidth;
document.getElementById("list0label").innerHTML=list[0].label;
document.getElementById("list0albumyear").innerHTML=list[0].albumyear;
document.getElementById("list0picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '" width="169" height="169"/>';

document.getElementById("list1artist").innerHTML=list[1].artist;
document.getElementById("list1title").innerHTML=list[1].title;
document.getElementById("list1label").innerHTML=list[1].label;
document.getElementById("list1albumyear").innerHTML=list[1].albumyear;
document.getElementById("list1picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="83px" height="83px"/>';

document.getElementById("list2artist").innerHTML=list[2].artist;
document.getElementById("list2title").innerHTML=list[2].title;
document.getElementById("list2label").innerHTML=list[2].label;
document.getElementById("list2albumyear").innerHTML=list[2].albumyear;
document.getElementById("list2picture").innerHTML='<img src="/testsite/covers/' + list[2].picture + '" width="83px" height="83px"/>';

document.getElementById("list3artist").innerHTML=list[3].artist;
document.getElementById("list3title").innerHTML=list[3].title;
document.getElementById("list3label").innerHTML=list[3].label;
document.getElementById("list3albumyear").innerHTML=list[3].albumyear;
document.getElementById("list3picture").innerHTML='<img src="/testsite/covers/' + list[3].picture + '" width="83px" height="83px"/>';   

document.getElementById("list4artist").innerHTML=list[4].artist;
document.getElementById("list4title").innerHTML=list[4].title;
document.getElementById("list4label").innerHTML=list[4].label;
document.getElementById("list4albumyear").innerHTML=list[4].albumyear;
document.getElementById("list4picture").innerHTML='<img src="/testsite/covers/' + list[4].picture + '" width="83px" height="83px"/>';   
    }


}
};

xmlhttp.onerror = function() 
{
    clearTimeout(timer);
    };

xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
xmlhttp.send();


timer = setTimeout(getPlaylist, 1000);
}

CSS ANIMATION:

<!DOCTYPE html>
<html>
<head>
<script src="/testsite/OneSecondPlaylist.js"></script>
<style type="text/css">

#wrapper {
    width: 257.4px;
    height: 41.85px;
    overflow: hidden;
    background-color: #383838;
    color: #FFFFFF;
    line-height: 41.85px;
    font-size: 80%;
    font-family: baumans;
    color: #FFFFFF;
}

.textbox {
-moz-animation-duration: 4s;
    -moz-animation-name: slidein;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: linear;
    white-space:nowrap;
}
@-moz-keyframes slidein {
from {
    margin-left:3%;
    }
to {
    margin-left:-33%;
    }

</style>
</head>
<body onload="getPlaylist()">
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/baumans:n4:default.js" type="text/javascript"></script>
<div id="wrapper">
    <div id="list0artist"></div>
</div>
<div id="wrapper">
    <div id="list0title" class="textbox"></div>
</div>

</body>
</html>

ANIMATION NOTE: I am aware that i need to play with the webkits to get it working on all browsers

I hope i have not included too much code, i felt it was important to show it in its entirety as you may have some pointers outside of the question i am asking..

So to sum up i am basically asking you guys to help me code a JavaScript / CSS intergrated script that will animate based upon the rules i have defined.

Thanks for reading this through, i hope you dont think im being lazy asking for this, i feel i am making good headway for somebody who has zero coding knowledge and just need a push in the right direction!!!.. Many Thanks!!! Justin..

Is it possible for you to set up a fiddle showing what progress you've made so far? — badAdviceGuy
– badAdviceGuy, Commented Feb 19, 2014 at 21:20
Better yet, could you give us an example of just the outputted HTML, js, and CSS? — Zach Saucier
– Zach Saucier, Commented Feb 19, 2014 at 22:22
Sorry... i should note.. i only have the example running in Firefox at the moment, i will get to the other browsers later.. — Justin
– Justin, Commented Feb 19, 2014 at 23:07

Zach Saucier · Accepted Answer · 2014-02-20 00:09:24Z

1

var texts = document.getElementsByClassName('text'); // Class I added to innards

for (var i = 0; i < texts.length; i++) {

    if (texts[i].parentNode.offsetWidth < texts[i].offsetWidth) {
        texts[i].classList.add("textbox");
    }
}

Demo

Some notes:

You can't have decimal pixels like .4px, it will be rounded up or down based on the browser
I'd recommend pausing at some point in the animation, continuous movement is annoying for users
Using margins is kind of iffy, I might opt for using left instead. This is what I did in the demo

Edit

To fix the positioning issue for the animation you can use transforms instead of position:absolute.

transform:translateX(calc(-100% + 257px)); /* -100% + parent width */

Demo

But like I said before, using a js solution would likely be better

edited Feb 20, 2014 at 0:09

answered Feb 19, 2014 at 23:30

Zach Saucier

26.2k12 gold badges101 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Justin Over a year ago

Thanks Zach, How do i make the keyframes only animate enough to bounch the text back and forth from START to END (like in my JSFiddle) :))

Zach Saucier Over a year ago

Isn't that what my demo is doing?

Justin Over a year ago

Yes it is working but if the text length becomes larger or smaller then the animation will not END in the right place, there will be a big blank area because of the keyframe setting jsfiddle.net/Musicman/4aqAp

Justin Over a year ago

Originally my JSFiddle had "left:-160%;" in the keyframes... I inputted this just to show how things should look.. How do i go about setting this correctly :)) Thanks For Your Time!!!

Zach Saucier Over a year ago

@Justin Updated based on your request

|

Collectives™ on Stack Overflow

Using Javascript & CSS Animations to create a TEXT marquee

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related