Hi
I have forgotten how to do this. So perhaps someone could refresh my memory.
When someone clicks on the website I am making I want the text on the main page to appear onload. So I have a text in my website that I want to appear over the main image of the page.
But I want it to load in a cool way. I want it to load from the right to left. And then just sit there, like it does in some websites. But onload. So you notice it when clicking on the page.
I’d use CSS animations for that.
#my-headline {
animation: slide-in 4s forwards
}
@keyframes slide-in {
from {transform:translateX(100vw)}
to {transform:translateX(0)}
}
Also put overflow:hidden on the container so you don’t get a horizontal scrollbar.
Ah that made it work. Only it created lots of whitespace out to the right. How can I eliminate that? It put the text a lot more to the right and created whitespace out o the right like this:
Never mind. It worked when I altered the transformX
One thing that happened now though. Is that the links in the dropdown menu went out of controll a bit. They now appear below the text that comes into the image at onload. Even though I have given they a very high z-index.
How can I make them appear above the onload-text when hovered.
As the image below shows they now appear below the onload-text when hovered:
Never mind I just gave the header a higher z-index and it worked
