Scrolling text and conflicting codes
I'm a research assistant currently developing some stimuli for an experiment in the form of an online survey. I use Qualtrics for the purpose.
I would like two separate lines of rolling text, and I've found the following script on this site very useful:
position : absolute;
white-space : nowrap;
top : 0px;
left : 200px;
margin : 0px;
padding : 0px;
position : relative;
width : 200px;
height : 20px;
overflow : hidden;
<div id="scroll">This is the scrolling text</div>
The advantage with this code is that the text doesn't lag - it scrolls smoothly (opposed to a typical marquee-HTML).
My problem is the following:
I need two separate sentences to scroll on two separate lines simultaneously, e.g.:
FIRST LINE OF SCROLLING TEXT
SECOND LINE OF SCROLLING TEXT
But I can't use the above code twice in the same script? They probably conflict with each other. I am really new in programming, and I can't find any solutions. I guess I'll have to change some ID's, but I'm not sure.
So my question is: How can I have two lines of text scrolling simultaneously with the above code?
I hope a kind soul will help me out.
Thank you very much in advance.