Entrance Chat Gallery Guilds Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
October 14, 2025 - @933.07 (what is this?)
Activity rating: Four Stars Posts & Arts: 61/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: :eyes: ~ Inconvenience is counterculture ~ :eyes: Guild Events: There are no events!

+  MelonLand Forum
|-+  World Wild Web
| |-+  ♺ ∙ Web Crafting Materials
| | |-+  Minecraft style randomized splash screen text


« previous next »
Pages: [1] Print
Author Topic: Minecraft style randomized splash screen text  (Read 558 times)
Furbisms
Full Member ⚓︎
***
View Profile WWWArt


What's up party people?
⛺︎ My Room
StatusCafe: furbisms
iMood: Furbisms
RSS: RSS

Guild Memberships:
Artifacts:
DiamondKurbyJoined 2025!
« on: September 21, 2025 @526.71 »

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:

Code
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:

Code
<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.

Code
@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.
 
« Last Edit: September 21, 2025 @631.67 by Furbisms » Logged

Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi