I am looking for marquee tag alternatives and found how to do this through css. However the messages I am using are of variable lengths, so is there an alternative to putting in the '45s' attribute to maybe 100% so that no matter how long or short the message is, the message will show all of the message and loop again once the message has been displayed?
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
color: #ffffff;
background-color: #000000;
font-family: Arial Rounded MT Bold;
}
.marquee span {
display: inline-block;
padding-left: 100%; /* show the marquee just outside the paragraph */
animation: marquee 45s linear infinite;
}
#keyframes marquee {
from { text-indent: 0%}
to { text-indent: -150% }
}
<p id="PassengerNews_Scrollbar" class="microsoft marquee" style="height: 95%; width: 90%;left: 5%;top: 2%;font-size: 7%;">
<span>|*NewsData*|</span>
</p>
Use the jQuery.Marquee plugin (License: ISC). If you don't want to use the plugin, you can use following code snippet from the plugin to calculate the delay
// formula is to: (Width of the text node + width of the main container / Width of the main container) * speed;
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
With o.duration initialized with 5000 meaning 5 seconds.
you want something like this?
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
color: #ffffff;
background-color: #000000;
font-family: Arial Rounded MT Bold;
height: 90%;
width: 90%;
left: 5%;
top: 5%;
font-size: 7%;
}
.marquee .line__wrap {
display: block;
position: absolute;
width: auto;
left: 0;
animation: marquee__wrap 2s linear infinite;
font-size: 18px;
}
.marquee .line {
position: relative;
margin-left: -100%;
animation: marquee 2s linear infinite;
}
#keyframes marquee__wrap {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
#keyframes marquee {
from {
left: 100%;
}
to {
left: 0%;
}
}
<p id="PassengerNews_Scrollbar" class="microsoft marquee">
<span class="line__wrap">
<span class="line">|*NewsData*|</span>
</span>
<span class="line__wrap" style="top: 30px;">
<span class="line">|*NewsData*|long long long long massage</span>
</span>
</p>
Related
I'm trying to have an infinite keyframe animation for text (span) moving horizontally by using the translateX property.
I manage to have the beginning of the infinite animation, however when I reach the end of the animation it "jumps" back to the beginning without it being smooth.
Also when reaching the last span of the animation, I would like that we start to see the beginning of the first span, so that it looks like it's indefinitely scrolling and not have blank space at the end of the animation.
I also tried to create different keyframes for each span, but this method made it very difficult to time the speed.
html, body {
margin: 0;
}
.scroll {
display: flex;
position: relative;
width: 100%;
height: 15%;
min-height: 150px;
margin: auto;
background-color: #252525;
overflow: hidden;
z-index: 1;
}
.m-scroll {
display: flex;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
white-space: nowrap;
transform: scale(2);
transition: all 1s ease;
}
.m-scroll > div {
display: flex;
animation: scrollText 10s infinite linear;
}
.m-scroll h1 {
margin: 0;
margin-right: 150px;
font-size: 25px;
color: #ffffff;
transition: all 2s ease;
}
#keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
<div class="scroll">
<div class="m-scroll">
<div>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
<h1>
<span>TEXT </span><span>INFINITE </span><span>SCROLL</span>
</h1>
</div>
</div>
</div>
So how could I make it become smooth ?
This behavior happens in full screen, on small device, the problem doesn't seem to appear. If you run the code snippet, please expand it
I have stripped things down to give a basic continuous scroll - with the overall width of the 'sentence' (span) being a minimum 100vw in this snippet.
html,
body {
margin: 0;
}
.scroll {
position: relative;
width: 100vw;
height: 15%;
min-height: 150px;
background-color: #252525;
overflow: hidden;
z-index: 1;
margin: 0;
padding: 0;
}
.m-scroll {
overflow_ hidden;
height: 100%;
white-space: nowrap;
animation: scrollText 10s infinite linear;
margin: 0;
font-size: 0;
display: inline-block;
}
span {
font-size: 50px;
display: inline-block;
min-width: 100vw;
margin: 0;
padding: 0;
color: white;
}
#keyframes scrollText {
from {
transform: translateX(0%);
}
to {
transform: translateX(-50%);
}
}
<div class="scroll">
<div class="m-scroll"><span style="rbackground: cyan;">TEXT INFINITE SCROLL </span><span style="rbackground: magenta;">TEXT INFINITE SCROLL </span><span style="rbackground: yellow;">TEXT INFINITE SCROLL </span><span style="rbackground: gray;">TEXT INFINITE SCROLL </span></div>
</div>
Note: I removed the flexes as I have never been able to make them play nicely with scrolling text. Maybe someone can put me right on that.
I am trying to create a curtain effect on some text. I want the text to be hidden at first and then have an animated reveal from the middle of the text to the outer edges. I want this to work even if there is an odd number of letters. In other words, breaking up the string would not work. If there is only one giant character in the string I want it to reveal from the center of the character to the outer edges of the character. I do not want a curtain effect on the background, since I don't know what I want to have for a background yet. I want it only on the text.
Here is what I have so far:
HTML
<div class="container">
<div class="my-name">The Incredible Houdini</div>
</div>
CSS
body {
margin: 0;
}
.container {
position: relative;
font-size: 3vh;
width: 100%;
height: 100vh;
background: lightblue;
}
.my-name {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
font-weight: bold;
color: darkblue;
width: 0;
overflow: hidden;
white-space: nowrap;
animation: showName 5s linear 3s forwards;
}
#keyframes showName {
from {
width: 0;
}
to {
width: 15ch;
}
}
The overflow:hidden and the width from 0 to 100 give me what I want in terms of the individual characters gradually being revealed instead of popping in like a typewriter. The problem is that it generates from the left to the right. Is there any way I can start expanding the width from the middle to the outer edges?
Firstly, you would need a keyframe to auto width which you can't do. I'd suggest rethinking your methodology.
I'd go with animating a clip path
body {
margin: 0;
}
.container {
position: relative;
font-size: 25vh;
width: 100%;
height: 100vh;
background: lightblue;
display:flex;
justify-content:center;
align-items:center;
}
.my-name {
font-weight: bold;
color: white;
overflow: hidden;
padding: .25em;
background: rebeccapurple;
clip-path: inset(0 100% 0 100%);
animation: showName 5s linear forwards;
}
#keyframes showName {
0% {
clip-path: inset(0 100% 0 100%);
}
100% {
clip-path: inset(0);
}
}
<div class="container">
<div class="my-name">The Incredible Houdini</div>
</div>
I'm trying to create a sequential text animation. One line, then the next, then the next. But it animates all three lines at the same time.
.autotype {
overflow: hidden;
white-space: nowrap;
}
.autotype {
animation: autotype 8s steps(10, end);
animation-iteration-count: infinite;
}
#keyframes autotype {
from {
width: 0px;
}
}
#keyframes autotype {
0% {
width: 0px;
}
20% {
width: 70px;
}
40% {
width: 140px;
}
60% {
wdith: 210px;
}
80%. {
width: 280px;
}
100% {
width: 500px;
}
}
.alignnone {
height: 20px;
width: 50px;
position: relative;
top: 4px;
}
<div class="autotype">.
<p>Hello, and welcome to
<img src="http://4309.co.uk/wp-
content/uploads/2020/01/
Screenshot_20200110_150836-
300x115.jpg" alt="" width="300" height="115" class="alignnone size-medium
wp-image-8431" />Feel free to look</p>
<p>around the site and contact us via the form<br> on the contact page</div>
So how do i animate it so that it reveals the first line, and only when this is fully revealed begins the second and so on. I've tried using height in the animation itself but, whilst this works for the first line, when it goes higher for the next line they've already rendered.
Since CSS cannot detect characters, I suggest you to
Wrap the lines inside a separate class autotype1, autotype2 and autotype3.
Hide the other lines initially with width: 0 or opacity: 0;
Use animation-delay with timing like 2n, 3n to make it sequential.
If you want to make it infinite, you might want to add a bit of JS with the help of these answers: CSS animation delay in repeating
.autotype {
overflow: hidden;
white-space: nowrap;
}
.autotype {
animation: autotype 4s steps(10, end);
animation-fill-mode: forwards;
}
.autotype2 {
width: 0;
animation-delay: 4s;
margin-bottom: 0;
}
.autotype3 {
width: 0;
animation-delay: 8s;
margin-top: 0;
}
#keyframes autotype {
from {
width: 0px;
}
}
#keyframes autotype {
0% {
width: 0px;
}
20% {
width: 70px;
}
40% {
width: 140px;
}
60% {
width: 210px;
}
80%. {
width: 280px;
}
100% {
width: 500px;
}
}
.alignnone {
height: 20px;
width: 50px;
position: relative;
top: 4px;
}
<div>.
<p class="autotype autotype1">Hello, and welcome to
<img src="http://4309.co.uk/wp-
content/uploads/2020/01/
Screenshot_20200110_150836-
300x115.jpg" alt="" width="300" height="115" class="alignnone size-medium
wp-image-8431" />Feel free to look</p>
<p class="autotype autotype2">around the site and contact us via the form<br>
</p>
<p class="autotype autotype3"> on the contact page</p>
</div>
Is marquee element supported in Html 5 ? if not, how could we give that effect (design) by Css 3 coding. I mean scrolling text one side to another side, etc etc.
Some browsers still supports marquee element. But when I google it. Some sites are saying that it is not supported by html 5. So what is its alternative options in css 3.
You can use css keyframes for making marquee effect
<div class="marquee">
<div>
<span>This is marquee text...done with css keyframes without using marquee tag</span>
<span>This is marquee text...done with css keyframes without using marquee tag</span>
</div>
body { margin: 20px; }
.marquee {
height: 25px;
width: 600px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
From MDN
The HTML <marquee> element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.
The element is obsolete and must not be used. While some browsers still support it, it's not required.
Marquee in CSS3
body {
margin: 20px;
}
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% {
left: 0;
}
100% {
left: -100%;
}
}
<div class="marquee">
<div>
<span>You spin me right round, baby. Like a record, baby.</span>
<span>You spin me right round, baby. Like a record, baby.</span>
</div>
</div>
I do have following ticker:
<!--
<marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="1" style="color:#000000;font-size:16px;font-family:Arial;" >
myreference
</marquee>
<!--
Now I would like to change myreference (which is the text in my ticker) with a (string) variable outside this ticker. How can I do that?
Thanks
The HTML marquee tag may not be supported by various browsers so its not recommended to rely on this tag, instead you can use Javascript and CSS to create such effects.
I hope it help you!!!
CSS
.marquee {
height: 25px;
width: 420px;
overflow: hidden;
position: relative;
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 5s linear infinite;
}
.marquee span {
float: left;
width: 50%;
}
#keyframes marquee {
0% { left: 0; }
100% { left: -100%; }
}
HTML
<div class="marquee">
<div>
<span>Your marquee here</span>
</div>
</div>