Automatic Animated Title Display

INFORMATION & CODE

Automatic Automated Title Display

What the Code Does

This code provides a complete, responsive webpage layout featuring a dynamic, text-switching animation. It combines HTML structure, CSS styling, and JavaScript logic to create an engaging landing page or hero section that highlights UI components and learning resources.

How the Code Works

The HTML sets up the semantic structure, incorporating a main container with a background image class, multiple heading tags for titles and subtitles, and placeholder spans (.last_word and .sub) intended for the dynamic text. It also links an external stylesheet for presentation and a JavaScript file at the end to handle interactivity.

The CSS styles the page to occupy the full height of the viewport (100vh) and applies a full-screen background image pulled from an external URL (e-nash.net). It utilizes text shadows to ensure headings remain readable over the image background and incorporates responsive media queries (triggered at a screen width of 600px) to seamlessly adjust font sizes and text container widths for mobile devices.

The JavaScript brings the page to life by automatically cycling through arrays of words and corresponding subtitle sentences. Using setInterval, the script triggers the setLastWord function every 3 seconds, updating the HTML content inside the .last_word and .sub elements to create a rotating slideshow effect of related action phrases.

How to Use the Code

To use this code, save the HTML, CSS, and JavaScript portions into three separate files named index.html, styles.css, and scripts.js respectively, ensuring they are placed in the same folder directory. You can then open the index.html file in any modern web browser to view and interact with the animated webpage.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Automatic Animated Title Display</title>
    <link rel="stylesheet" href="styles.css">
    

  </head>
  <body>
    <div class="image">
      <div class="text">
        <h1 class="nash"><span class="inner-title">E-Nash</span> UI components</h1>
        <h3>Learn as you code</h3>
        <h1>Together We
          <span class="last_word"></span>
        </h1>
        <h2 class="sub"></h2>
        <div class="p">
          <p>Use this website as a compliment to the tutorial that you are learning from, as
          it will help you understand some aspects of the coding process. While giving you
          some useful tools to help your learning process.</p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS


                      body {
        padding: 0;
        margin: 0;
        height: 100vh;
      }
      .image {
        width: 100%;
        height: 100%;
        margin-top: -35px;
        background-image: url("https://e-nash.net/photos/module-favicon.png");
        background-size: cover;
        background-position: 100% 100%;
      }
      .text {
        width: 37.5%;
      }
    @media(max-width: 600px) {
      .text {
        width: 100%;
      }
    }
      .nash {
        padding-top: 100px;
        color: rgba(255, 255, 255, 1);
        font-size: 32px;
        text-shadow: 0 0 1px #000000, 2px 2px #000000;
        text-align: center;
      }
    @media(max-width: 600px) {
      .nash {
        font-size: 24px;
      }
    }
      h1 {
        padding: 50px 0 0 0;
        color: rgba(255, 255, 255, 1);
        font-size: 54px;
        text-shadow: 0 0 1px #000000, 2px 2px #000000, 3px 3px #000000;
        text-align: center;
      }
    @media(max-width: 600px) {
      h1 {
        padding: 100px 0 0 0;
        font-size: 32px;
      }
    }
      .inner-title {
        margin-top: 2px;
        color: #00ff00;
        font-family: 'Oleo Script', cursive;
        font-size: 30px;
		  }
      .sub {
        color: #ffffff;
        font-size: 24px;
        text-align: center;
        text-shadow: 0 0 1px #000000,  2px 2px #000000;
      }
    @media(max-width: 600px) {
      .sub {
        font-size: 24px;
      }
    }
      h3 {
        color: #ffffff;
        text-align: center;
        text-shadow: 0 0 1px #000000,  2px 2px #000000;
      }
      .p {
        padding: 10px 20px;
        margin: 50px 30px;
        background-color: rgba(170, 170, 170, 0.8);
        border-radius: 20px;
		  font-weight: 600;
        text-align:center;
      }
      p {
        color: #ffffff;
        font-weight: 600
        text-align: center;
      }

JAVASCRIPT


                      window.onload = (setLastWord);
                  
      let inc = 0;
      const last = document.querySelector(".last_word");
      const sub = document.querySelector(".sub");
      var word = ["Create", "Design", "Develop", "Produce", "Display"];
      var subtle = ["Create some tools help you learn", "Design your own useful tools",
                   "Develop those ideas for your use", "Then produce your ideas",
                   "Then see how they display"];
      function setLastWord() {
        if (inc < 5) {
          last.innerHTML = word[inc];
          sub.innerHTML = subtle[inc];
          inc++;
        }else{
          inc = 0;
        }
      }
      setInterval(setLastWord, 3000);

MENU

INFORMATION & CODE

Automatic Automated Title Display

What the Code Does

How the Code Works

How to Use the Code

HTML

CSS

JAVASCRIPT

PREVIEW

E-Nash UI components

Learn as you code

Together We