I’m working on a header with a moving background using CSS animation. I have the “scrolling” background working as a hook element in the header, but fixing the text in place has been problematic (so far). There may be a better way to do this. I’m trying to do this with CSS, but it may require a JavaScript solution. This is a dev site, so the issue isn’t time critical.
https://webdevwp.com/
Here’s the code I’m using:
#sky {
overflow: hidden;
width: 100%;
height: auto;
}
#clouds {
width: 200%;
height: 200px;
background-image: url('https://webdevwp.com/wp-content/uploads/2020/03/clouds_bg2_760x485.jpg');
background-size: cover;
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
@keyframes movingclouds {
0% {margin-left: 0%;}
100% {margin-left: -100%;}
}
#clouds h1 {
text-align: center;
position: relative;
margin-bottom: 12px;
}
#clouds h3 {
text-align: center;
}
In the Header hook:
<div id="sky">
<div id="clouds">
<h1 >Web Dev WP</h1>
</div>
</div>