Chat Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 28, 2026 - @569.98 (what is this?)
Activity rating: Two Stars Posts & Arts: 23/1k.beats Random | Recent Posts | Guild Recents
News: :happy: Open the all windows! Your mind needs storms and air! :happy: Guild Events: There are no events!

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


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


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

Guild Memberships:
Artifacts:
Cherry Blossom PetalsPlush ToyビートルさんFairy CreatureDiamondcall me beep me
« 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

https://dragcave.net/image/dq1uq.gifhttps://i.imgur.com/ni1ijVU.gifhttps://finaloutpost.net/s/piEqa.png

Artifact Swap: Eyeball!Spinning Star!Blue FishPhone FerretPhone OctopusPhone ArmadilloPhone CardLaptopKickboardFrying PanComputerBattery
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

MelonLand Nav

@000

Want to Login or Join ?

Minecraft: Online
Join: craft.melonking.net