This zone is sleeping right now! ZzzZZzzz

Better not disturb it! ~You go to the petrol station and buy a slushy instead, everything is cool!~

This area will open again in 000.beats!

(Learn about Swatch Time)

Some other zones are awake :^]


Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
Autumn, 19 Oct 2026 - @946.24
Forum Activity: Two Stars Random | Recent Posts | Guild Recents
News: :happy: Open the all windows! Your mind needs storms and air! :happy: Guild Events: MelonLand's Seasonal RPG Jam
Super News: ~~MelonLand's Halloween Profile Design Contest 2026~~
+  MelonLand Forum
|-+  Da Web Revival
| |-+  ✁ ∙ Web Crafting
| | |-+  ♺ ∙ Snippets & Materials
| | | |-+  Minecraft style randomized splash screen text


« previous next »
Pages: [1] Print Embed
Author Topic: Minecraft style randomized splash screen text  (Read 1355 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: Autumn, 21 Sep 2025 @527 » Toggle Font Embed

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: Autumn, 21 Sep 2025 @632 by Furbisms » Logged

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

Artifact Swap: Phone FerretPhone OctopusPhone CardFrying Pan
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ 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
@000 Melon
Land
Forum Art Hub Chat Webring Explore Random Recent Tenement Arcade Want to Login or Join ? Web Craft Guide Graphic Catalogue Wiki Help I'm Lost! Link Land Newsletters Image Stream Minecraft: Online
Zap!
Passport Sites tamaNOTchi Asatte Add your site?
Aero Archive Onio Cafe 32 Bit Cafe Status Cafe