I'm creating a marquee effect with CSS3 animation.
#caption { position: fixed; bottom: 0; left: 0; font-size: 20px; line-height: 30px; height:30px; width: 100%; white-space: nowrap; -moz-animation: caption 50s linear 0s infinite; -webkit-animation: caption 50s linear 0s infinite; } @-moz-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } } @-webkit-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; } }
<div id="caption"> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog. </div>
Now I can get the basic marquee effect, but the code is too specific for this demo.
Is there a way to avoid using specific values like margin-left:-4200px;
, so that it can adapt text in any length?
Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/ that uses text-indent
but still with specific values.
CSS Marquees The marquees in CSS are created using the CSS animation property along with the @keyframes to manipulate the element and create the animation. Additionally, we need to use translateX() and translateY() in order to specify the path to the scrolling contents.
The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings.
With a small change of the markup, here's my approach (I've just inserted a span
inside the paragraph):
.marquee { width: 450px; margin: 0 auto; overflow: hidden; box-sizing: border-box; } .marquee span { display: inline-block; width: max-content; padding-left: 100%; /* show the marquee just outside the paragraph */ will-change: transform; animation: marquee 15s linear infinite; } .marquee span:hover { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } /* Respect user preferences about animations */ @media (prefers-reduced-motion: reduce) { .marquee span { animation-iteration-count: 1; animation-duration: 0.01; /* instead of animation: none, so an animationend event is * still available, if previously attached. */ width: auto; padding-left: 0; } }
<p class="marquee"> <span> When I had journeyed half of our life's way, I found myself within a shadowed forest, for I had lost the path that does not stray. – (Dante Alighieri, <i>Divine Comedy</i>. 1265-1321) </span> </p>
No hardcoded values — dependent on paragraph width — have been inserted.
The animation applies the CSS3 transform
property (use prefixes where needed) so it performs well.
If you need to insert a delay just once at the beginning then also set an animation-delay
. If you need instead to insert a small delay at every loop then try to play with an higher padding-left
(e.g. 150%
)
Based on the previous reply, mainly @fcalderan, this marquee scrolls when hovered, with the advantage that the animation scrolls completely even if the text is shorter than the space within it scrolls, also any text length takes the same amount of time (this may be a pros or a cons) when not hovered the text return in the initial position.
No hardcoded value other than the scroll time, best suited for small scroll spaces
.marquee { width: 100%; margin: 0 auto; white-space: nowrap; overflow: hidden; box-sizing: border-box; display: inline-flex; } .marquee span { display: flex; flex-basis: 100%; animation: marquee-reset; animation-play-state: paused; } .marquee:hover> span { animation: marquee 2s linear infinite; animation-play-state: running; } @keyframes marquee { 0% { transform: translate(0%, 0); } 50% { transform: translate(-100%, 0); } 50.001% { transform: translate(100%, 0); } 100% { transform: translate(0%, 0); } } @keyframes marquee-reset { 0% { transform: translate(0%, 0); } }
<span class="marquee"> <span>This is the marquee text (hover the mouse here)</span> </span>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With