Knowing full well that it's deprecated, I fooled around with the MARQUEE tag and got the exact result I was looking for: a single transparent png image of a ship travelling at a steady speed across the viewport on an infinite loop. This was beautiful as it was so simple and gave me the required result with very little code and without any headaches whatsoever! As we all know (or quickly find out!), sadly the MARQUEE tag is not advisable on a working website.
However, what I don't know and now need to know is how to replicate the same thing without using those MARQUEE tags? Can it be done solely with HTML & CSS? I have searched online and find many differing and confusing answers.
Can anyone fulfill this challenge?
You can use an infinite CSS animation.
To move from right to left first position the ship just off the viewport to the right, this can be done by translating it 100vw.
Then to move it over to the left translate it by -100%. 100% in a translateX is 100% of the element's own width so the ship disappears off to the left.
.ship {
width: 30px;
height: 20px;
background: blue;
animation: move 10s linear infinite forwards;
position: fixed;
top: 0;
left: 0;
}
#keyframes move {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
}
}
<div class="ship"></div>
Related
I've created a ticker that I want to have along the side of my page, with text alongside a png image scrolling vertically across it. I've been able to set it up for the most part, but am running into a problem with having my correctly sized image be included in the animation.
The animation works when the image is larger than the ticker container, but when I make it smaller (either through adjusting the height with CSS or through resizing the original image) the image is not included in the scrolling animation.
I've included both the image and the text in the .ticker-item class, with the following css:
.ticker-item {
flex-shrink: 0;
margin-right: 32px;
animation: ticker-animation 40s linear infinite;
}
#keyframes ticker-animation {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
Here's a codepen with an example that includes both images: https://codepen.io/uxconor/pen/WNdpwbv
As you can see, the larger tiger head is scrolling down the page alongside the text, but for whatever reason, the smaller tiger head is just staying in the same position.
I am doing a bus animation for my html. I set the bus as if it's coming from the left end and move all the way into the right end of the page. However, in my code below, the bus runs all the way to the right then just teleporting back to the left for the next animation loop. I want whatever part of the bus moving into the right end of the page and disappear, it will appear right away on the left side and continue to move. How can I do this?
Thanks for helping me:)
Edit: Here's a picture of how I want it to be: Snake on Nokia. As you can see, the head of the snake moves into the border and appear right away on the opposite side of the border, continue moving; until all of it goes into the right border.
div {
position: relative;
animation-name: travelbus;
animation-duration: 6s;
animation-iteration-count: infinite;
}
#keyframes travelbus {
from {
left: -5%;
}
to {
left: 110%;
}
}
You can use CSS transform translateX to position the bus relative to its own width.
So for example, if the bus is positioned left: 0 and you do transform: translateX(-100%) the bus will 'hide' just to the left of the page.
To get it to move across the whole page you want it to move 100vw plus the width of the bus so it completely disappears to the right. You can do this with a calc: transform: translateX(calc(100vw + 100%))
Using these in the animation instead of the left positioning used in the question the bus will move right across the page, disappear, then start reappearing at the left side.
Note, to make the movement more uniform and 'natural/steady' I've set the timing function of the animation to linear rather than the default.
UPDATE: the requirement was a little more complex than I had first understood. As a bus begins to disappear on the right hand side another should start to appear on the left hand side. This means we have to do some extra things:
Have another element that represents bus number 2 (It is not possible to split an element so part shows on the left side and part on the right)
start this second bus moving after a delay - the delay being the time the first bus has taken to travel its own length plus the width of the screen.
alter the %s in the keyframes animation so that the buses have time to also travel one of their lengths (so they go out of sight on the right hand side).
In this snippet CSS variables are used to hold the journey time and the length of the bus in vw units. These can be used to calculate the delay time of the second bus. Note however that the % values for the keyframes need to be calculated in advance as CSS does not allow variables to be used there. If the length of the bus alters relative to the width of the viewport then the %s will have to be recalculated.
Because we are using relative units for bus length the animation is responsive and should work whatever the viewport width, though of course the bus will seem to travel slower on narrower devices.
.bus {
--buslength: 5; /* length of a bus in vw units */
--time: 6s; /* total journey time of a bus from first appearing on the left to totally disappearing on the right */
position: absolute;
left: 0;
transform: translateX(-100%);
animation-name: travelbus;
animation-duration: calc(2 * (var(--time) * ((100 + var(--buslength)) / (100 + (2 * var(--buslength))))));
animation-iteration-count: infinite;
animation-timing-function: linear;
display: inline-block;
margin: 0;
padding: 0;
width: calc(var(--buslength) * 1vw);
height: calc((var(--buslength) * 1vw) / 3);
background-color: red;
}
.bus:nth-of-type(2) {
animation-delay: calc(var(--time) * ((100 + var(--buslength)) / (100 + (2 * var(--buslength)))));
}
#keyframes travelbus {
0% {
transform: translateX(-100%);
}
55% {
transform: translateX(calc(100vw + 100%));
}
55.01% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
<div class="bus"></div>
<div class="bus"></div>
So I know that marquee animations are like, sooo totally 1999, but I really need scrolling text for my project.
Basically, I have a text that should scroll all the way across the browser window (viewport?) and go all the way across and offscreen before restarting all the way at the beginning. A simple marquee. However, when I load the page, the text scrolls only some of the way off of the page, then resets to the beginning without completing the scroll.
Here's my code (the link text is from an earlier problem I was encountering but have already solved.)
a {
margin: auto;
text-decoration: none;
-webkit-animation: marquee 10s linear infinite;
}
#-webkit-keyframes marquee {
0% { -webkit-transform: translateX(1500px) }
100% { -webkit-transform: translateX(-500px) }
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="www.nytimes.com">It looks like each element is running into the next because they are all separate objects and each one subtracts
a certain amount of space from the total width, causing the others behind it to move faster.</a>
</body>
</html>
I've tried changing the positioning property of the elements and the animation duration but nothing seems to give me the results I so desperately desire?
You can use vw, which is for viewport width. This is a percentage, although you don't add a percent sign. So 100vw is 100% of the viewport width. You can then marquee from 100% to -100% to move the text from right to left. 100vw means the text starts just outside the screen on the right side. -100vw means the text moves until it leaves the left side, assuming the a tag itself is (at most) the width of the screen (at most 100vw).
The end value of the animation should be negative the width of the element. If, for example, your tag would be 200px wide, the start value of the animation should still be 100vw, but the end value should be -200px.
a {
margin: auto;
text-decoration: none;
-webkit-animation: marquee 10s linear infinite;
}
#-webkit-keyframes marquee {
0% {
-webkit-transform: translateX(100vw)
}
100% {
-webkit-transform: translateX(-100vw)
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="www.nytimes.com">It looks like each element is running into the next because they are all separate objects and each one subtracts
a certain amount of space from the total width, causing the others behind it to move faster.</a>
</body>
</html>
PS. Don't forget to add the prefixes for other vendors for the animation before go-live.
I have an image sticking out of the bottom of the screen. I want to slide up the image using a CSS animation.
The problem is the image dimensions vary depending on the size of the window. Thus I do not know initially how much of the image is sticking out of the screen.
Simply what I want to do is move the image to bottom: 0%
So the code would look similar to this except that I don't know the starting percentage (I don't know it's -35%).
#-moz-keyframes moveUpImage
{
0% { bottom: -35% }
100% { bottom: 0% }
}
Is there a way to tell CSS that I want the animation to go from starting/current position to bottom: 0% ?
If you want to do a css animation from the current position of the element to the bottom use css transitions, doing it that way you just need to apply the bottom position and the animation will take place. (probably using position absolute).
I'm having some trouble figuring out why the bouncing arrow on my web page is not going behind the rest of the elements on the web page.
I've animated an arrow using CSS3 with the following code
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
However, if you scroll on down the page, the arrow can still be seen, especially on the Timeline section and "Where do cats sleep" section. I've tried z-index on a few elements and nothing seems to be fixing it.
You can view it here
It's probably something small but can't figure it out, thanks!
This may seem kind of silly, but for the header use:
position: relative;
z-index: -2;
Then, for the .arrow, use:
z-index: -1;
It will be behind all z-index: auto elements which is pretty much the rest of the page. The header has to be position: relative so the negative z-indices work together.