I figured some people would be interested in the code for this even though it's fairly simple, I'm not used to making tutorials so let me know if anything needs explained better!
JS for the random text:
const texts = [
"Random text here"
"More Random Text"
];
document.getElementById("splashtext").innerHTML = texts[Math.floor(Math.random() * 2)];
As you add text, make sure to change the number after math random to be however many texts in your array there are. Then, in your document, add this:
<div id="splashtext">
<script src="link-to-your-javascript.js"></script>
</div>
after that, to make it sit over my logo at an angle and animate I styled it in CSS, using media queries so that I could make it so that it only does that on screens big enough to not look weird/cover anything. Otherwise, on smaller screens/mobile it remains where I put it (At the bottom of the page, which I think looks decent) You might not want to copy what I did exactly, change this to suit your site, but I thought I'd show this to give an idea of what I did so you can use it as a jumping off point.
@media screen and (min-width: 1250px) {
#splashtext {
position: absolute;
top: 1%;
left:65%;
color: #ac4bdf;
text-shadow: 1px 1px 2px white, 0 0 25px white, 0 0 5px white;
text-align: center;
transform: rotate(10deg);
animation-name: splashtext;
animation-duration: 1.3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes splashtext {
0% {font-size: 1.2em;}
50% {font-size: .8em;}
100% {font-size: 1.2em;}
}
}
If you add this to your site, please show me, I'd love to see! You can adapt this all sorts of ways. I hope this helps someone, because I was initially pretty sheepish about javascript myself. Also, if there's anything I could clarify or even improve on my code, let me know. I am definitely not a genius at this or anything, I just do my best, haha.