How can i go about creating pulsating, yellow text on the side of my title with a random saying, sort of like Minecraft?

Code Help HTML/CSS/JS
1

Question: How can i go about creating a yellow text on the side of my title with a random saying, sort of like Minecraft?

Repl link: https://replit.com/@BluebayStudios/Ples-nerd

1 Like
2

Make text, give it position: absolute; so you can move it around in the CSS. Make it yellow of course by using the color property. You can rotate it by saying the rotate property. Like so: rotate: 35deg;

As for pulsating, that’s another story. You would likely use CSS animations for it though. I don’t feel like righting that rn though.

4 Likes
3

I assume you’re referring to splash texts like those in Minecraft, you could do something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Splash Text</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="title-container">
  <h1>Your Title <span id="splash-text"></span></h1>
</div>

<script src="script.js"></script>
</body>
</html>

For styles.css, you can style it like this:

.title-container {
  display: flex;
  align-items: center;
}

#splash-text {
  background-color: yellow;
  padding: 2px 8px;
  margin-left: 10px;
  font-style: italic;
}

And for the JavaScript (script.js), you can write:

document.addEventListener('DOMContentLoaded', function() {
  const sayings = [
    "Don't worry, be happy!",
    "Always look on the bright side!",
    "Keep calm and carry on!"
  ];

  const splashText = document.getElementById('splash-text');
  splashText.textContent = sayings[Math.floor(Math.random() * sayings.length)];
});

This will place a random saying in the splash text each time the page is loaded.

3 Likes
4

For a simple CSS animation you can use the@keyframes keyword. Here’s an example of making an animation from a start and end state:

@keyframes Pulse {
    from {
        font-size: 10px;
    }
    to {
        font-size: 20px;
    }
}

And here’s an example of making an animation using percentages to symbolize how complete the animation is at a stage (terrible explanation, but hopefully you get the point):

@keyframes Pulse {
    0% {
        font-size: 10px;
    }
    25% {
        font-size: 13px;
    }
    50% {
        font-size: 15px;
    }
    75% {
        font-size: 17px;
    }
    100% {
        font-size: 20px;
    }
}

This example will start fast, lose speed, then end fast (because of the sizes I set at the percentage markers).

You can use any percentages you like, and usingfrom and to is like using 0% to 100%.

Then to some your animation to an element:

some-selector {
    animation-name: Pulse;
    animation-duration: 1s;
    /* repeat the animation infinitely */
    animation-iteration-count: infinite;
    /* play the animation start to finish, then in reverse (use normal to avoid alternating between directions) */
    animation-direction: alternate;
}

There’s a lot more you can do, you can read up on CSS animations here.

5

IMG_2084
IMG_20842160×1459 211 KB

Is there something interfering with my code?

6

I did a few changes to the css, but how can i make it slanted, on the text? Doesn’t really need to be pulsing.

8

i think you can use the transform: skew property in CSS to slant your text
eg:

p {
 transform: skew(-20deg); /*tilts all paragraphs 20 degrees to the left*/
}
9

The text stays the same. #splash-text { color: yellow; padding: 2px 8px; margin-left: 10px; font-size: 15px; transform: skew(200deg); }

10

As I said, you need to make it have position: absolute. This way you can change its position absolutely using the top, left, bottom, and right properties.

12

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.