Auto Text Effect Animation HTML, CSS, and JavaScript – C0deCraft by Rana

October 14, 2024

Facebook

Auto Text Effect Animation - CodeCraft by Rana

The provided code creates an “Auto Text Effect Animation” using HTML, CSS, and JavaScript. The effect involves displaying a series of career titles that appear one character at a time, simulating a typing animation. Let’s break down each part of the code:

HTML Code Explanation | Auto Text Effect Animation

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Text Effect Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container"></div>
    <script src="index.js"></script>
  </body>
</html>

DOCTYPE Declaration: <!DOCTYPE html> specifies that the document is an HTML5 document.
HTML Tag (<html>): Defines the root of the HTML document with an lang attribute set to “en” (English).
Head Section (<head>):
- <meta charset="UTF-8" />: Sets the character encoding to UTF-8, supporting all characters and symbols.
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />: Ensures compatibility with modern Internet Explorer rendering modes.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Makes the webpage responsive on all devices by setting the viewport’s width to the device width.
- <title>Auto Text Effect Animation</title>: Sets the title of the webpage that appears on the browser tab.
- <link rel="stylesheet" href="style.css" />: Links to an external CSS file named “style.css” for styling the webpage.
Body Section (<body>):
- <div class="container"></div>: Creates a div element with the class “container.” This is where the animated text will appear.
- <script src="index.js"></script>: Links to an external JavaScript file named “index.js” to handle the animation logic.

CSS Code Explanation | Auto Text Effect Animation

@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");

body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  background-color: salmon;
  font-family: "Permanent Marker", cursive;
}

Font Import: @import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap") Imports the “Permanent Marker” font from Google Fonts for use in the document.
Body Styling:
- margin: 0;: Removes any default margin from the body.
- display: flex;: Applies Flexbox layout to the body for easier alignment of child elements.
- justify-content: center;: Centers the content horizontally.
- height: 100vh;: Sets the height of the body to 100% of the viewport height.
- align-items: center;: Centers the content vertically.
- background-color: salmon;: Sets the background color of the page to a salmon color.
- font-family: "Permanent Marker", cursive;: Applies the imported “Permanent Marker” font to the text on the page.

JavaScript Code Explanation | Auto Text Effect Animation

const containerEl = document.querySelector(".container");

const careers = ["YouTuber", "Web Developer", "Freelancer", "Instructor"];

let careerIndex = 0;
let characterIndex = 0;

updateText();

function updateText() {
  characterIndex++;
  containerEl.innerHTML = `
    <h1>I am ${careers[careerIndex].slice(0, 1) === "I" ? "an" : "a"} ${careers[
    careerIndex
  ].slice(0, characterIndex)}</h1>
    `;

  if (characterIndex === careers[careerIndex].length) {
    careerIndex++;
    characterIndex = 0;
  }

  if (careerIndex === careers.length) {
    careerIndex = 0;
  }
  setTimeout(updateText, 400);
}

Variable Declarations:
- const containerEl = document.querySelector(".container");: Selects the HTML element with the class “container” and stores it in the variable containerEl.
- const careers = ["YouTuber", "Web Developer", "Freelancer", "Instructor"];: An array of career titles that will be displayed in the animation.
- let careerIndex = 0;: Keeps track of the current career title in the array.
- let characterIndex = 0;: Keeps track of the current character position within the selected career title.
Function updateText(): This function updates the content containerEl to display the current career title with a typing effect.
- characterIndex++: Increments the character index to display the next character in the career title.
- The template literal updates the innerHTML of containerEl:javascriptCopy codecontainerEl.innerHTML = ` <h1>I am ${careers[careerIndex].slice(0, 1) === "I" ? "an" : "a"} ${careers[ careerIndex ].slice(0, characterIndex)}</h1> `; This code checks if the current career title starts with the letter “I” to determine whether to use “an” or “a” as the article. It then displays the title one character at a time using .slice(0, characterIndex).
Condition Checks:
- If the characterIndex reaches the length of the current career title, the function increments careerIndex to move to the next career title and reset characterIndex to 0.
- If the careerIndex reaches the end of the array (careers.length), it resets to 0 to loop the animation.
Recursive Call with setTimeout(): setTimeout(updateText, 400); calls the updateText function again after a delay of 400 milliseconds to continue the animation.

Summary | Auto Text Effect Animation

The code creates a typing Auto Text Effect Animation where different career titles are displayed one character at a time in the center of the screen. When each title completes, it transitions to the next, and the sequence loops continuously. The combination of HTML, CSS, and JavaScript achieves the desired effect, with CSS handling the styling and layout while JavaScript provides dynamic content updates.