Mike -
Timing:Let's start with this line in your CSS:
animation: marquee 10s linear infinite;The
10s is not actually speed per se, but is the '
animation-duration' - which is the time that an animation takes to complete one cycle. Or in the case of your marquee animation, how long it takes to move your marquee span from beginning to end.
So let's say you start with a span that is 100px wide and move it from point A to point B in 10s.
As you add messages (spans) in your plugin you increase the over all "marquee" width that many times over. If you have 3 messages, that's a span width of 100 x 3 or now 300px. A 300px wide marquee with a duration of 10s moving from point A to point B will need to move faster to complete one cycle.
Adding and removing messages in your plugin changes the overall width of the animation and affects how long it takes to complete the cycle.
So basically the speed of the animation is determined indirectly by the animation duration and the width of the region you're animating the marquee over.
StartingThis line in your CSS under
.marquee span defines the starting or "reset" point of the animation.
transform:translatex(0);A simple adjustment to the value fixes the start issue:
transform:translatex(100%);KeyframesIn your keyframes you have the line:
100%{transform:translatex(-100%)The negative percent value moves the element backwards to start it's forward journey again.
As you add messages in your plugin you need to increase this value (
or being a negative number is it decreasing the value?).
Using the span example from above, if you have 3 messages that create a marquee width of 300px, then your negative value needs to be
-300%Your overall CSSYour CSS for the plugin needed some adjusting to make everything work properly.
Here's the adjusted CSS modified for 3 messages:
.cosmo{
display:flex;
width:550px;
height:35px;
margin:0 auto;
}
.marquee {
flex:2;
height: 30px;
width: 550px;
position:relative;
overflow: hidden;
white-space: nowrap;
}
#alert{
flex:1;
width:25%;
height:30px;
background:red;
text-align:center;
border:5px ridge #fff;
line-height:26px;
color:#fff;
font-size:27px;
font-weight:bold;
}
.marquee span {
vertical-align: -webkit-baseline-middle;
display:inline-block;
text-align:left;
width: 100%;
transform:translatex(100%);
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0%{transform:translatex(100%)
}
100%{transform:translatex(-300%)
}
}
Here's a clip of it in action:
And here's a sample with a border around the message spans so you can see how they work together:
Summary:If you pursue this you will need to find a way to adjust the animation-duration value and the negative translatex value based on the number of marquee messages (spans).
Unless I'm missing something, I suspect you'll need to use JavaScript or jQuery to make this all work properly.
Disclaimer: I've worked with keyframes, but by no means am I an expert. I started with what you had and made it work (for the most part
).
I hope this helps you out or points you in the right direction.
).
