Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
a Summer night - @8.16 (what is this?)
Activity rating: One Star Posts & Arts: 6/1k.beats Random | Recent Posts | Guild Recents
News: :skull: Websites are like whispers in the night  :skull: Guild Events: HOMESTUCK ART-APALOOZA

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


« previous next »
Pages: [1] Print Embed
Author Topic: Minecraft style randomized splash screen text  (Read 1201 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: an Autumn day » 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: an Autumn day by Furbisms » Logged

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

Artifact Swap: Phone FerretPhone OctopusPhone ArmadilloPhone 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
MelonLand @000

Minecraft: Online
Join: craft.melonking.net