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>
Related
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>
See the code in this jsfiddle: https://jsfiddle.net/frpL3yr1/
The idea is that I want a bar of images at the top of the screen. The img-wrapper div will later be animated via javascipt to move to the left when you mouse over. For an example of what I am ultimately attempting to accomplish, see this page. The difference is that in mine, the animation will only run when moused-over.
The issue is that in my jsfiddle and the linked example, the width of the div containing the images is hard-coded. In my case, the css hard-codes the width of img-wrapper to 200%. I need my page to support an arbitrary number of images, so I need its width to be equal to that of the contents. The way my jsfiddle is implemented, if there are more images that can fit in img-wrapper, they will wrap to a new line.
What is the best way to go about fixing this?
Approach using flexbox and animation:
html, body {
margin:0;
padding:0;
overflow: hidden;
}
.demo-ribbon {
width: 100%;
height: 70vmin;
margin-top: 2rem;
overflow: hidden;
}
.img-wrapper {
height: 70vmin;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
}
img {
flex: 1;
object-fit: content;
margin: 0 .2rem;
width: 100vmin;
height: 100%;
}
.lead {
animation: bannermove 12s linear 320ms infinite paused alternate;
}
.img-wrapper:hover .lead {
animation-play-state: running;
}
#keyframes "bannermove" {
0% {
margin-left: 0%;
}
100% {
margin-left: -230%;
}
}
You will need to add prefixes in order to work in all browsers especially animation
Further reading: https://devdocs.io/css/animation
working pen: https://codepen.io/manAbl/pen/KROvjx ;
Aspect Ratio: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp & https://css-tricks.com/aspect-ratio-boxes/
Hope helps! :)
Use flexbox and animation with translate :)
.demo-ribbon {
width: 100%;
overflow: hidden;
}
.demo-ribbon .img-wrapper {
display: flex;
justify-content: stretch;
margin-right: 0;
position: relative;
width: 100%;
}
.demo-ribbon .img-wrapper img {
transition: all 0.5s ease;
margin: 2px;
}
.demo-ribbon .img-wrapper img:first-child {
animation: lefttoRight 25s linear 320ms infinite paused alternate;
}
.demo-ribbon .img-wrapper img:hover {
transform: scale(1.1);
cursor: pointer;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}
.demo-ribbon .img-wrapper:hover img {
animation-play-state: running;
}
#keyframes lefttoRight {
0% {
margin-left: 0;
}
50% {
margin-left: -200%;
}
100% {
margin-left: 0%;
}
}
<html>
<body>
<div class="demo-ribbon">
<div class="img-wrapper">
<img class="lead" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
<img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
<img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
<img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
<img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
<img src="http://static.asiawebdirect.com/m/phuket/portals/www-singapore-com/homepage/pagePropertiesImage/singapore.jpg.jpg">
<img class="" src="https://www.s-ge.com/sites/default/files/cserver/styles/sge_header_lg/streamy/company/images/Hongkong-Fotolia-48687313-rabbit75-fot-282451.jpg?itok=ANpJxrgW">
<img class="" src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg">
</div>
</div>
</body>
</html>
I wan to make animation from left to right (animation start in invisible area like left: -100px) and end in invisible area too (right: -100px) I am using this code which works but not correctly on different sizes of screens becuase is in %. And i need to remake it but i dont know how.
.ip_first_block {
width: 100%;
height: 100%;
}
section {
position: relative;
overflow: hidden;
}
.ip_welcome_text {
width: 100%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.astronaut1 {
position: relative;
animation: lefttoright 10s;
animation-fill-mode: forwards;
}
#keyframes lefttoright {
from {
transform: translateX(-1500%);
}
to {
transform: translateX(2200%);
}
}
<section style="height:100%;">
<div class="ip_first_block" id="ifb">
<div class="ip_welcome_text">
<div class="astronaut1">
<img src="images/astronaut.svg" height="70px" ; width="70px;" />
</div>
</div>
</div>
</section>
It's easier if you animate the position, e.g. left property:
body {margin: 0}
.astronaut1 {
overflow: hidden;
}
img {
position: relative;
left: -70px; /* starting point; needs to be at least the img width to hide it */
animation: lefttoright 10s forwards;
}
#keyframes lefttoright {
to {left: 100%} /* cover the entire parent width */
}
<div class="astronaut1">
<img src="http://placehold.it/70x70" alt="" height="70" width="70">
</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 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>