Storage of Digital Codes and Information: Create interesting animated text for a welcome greeting or the name of our blogger

STODICO

Storage of Digital Code x Information

How do we create interesting animated text for a welcome greeting or the name of our blogger?

If you create a blogger with various types of information content, it will be very empty if the blog you have is just a simple template taken from blogger supplies and contains plain text without any little decoration that can make your blogger look more professional. Here are some methods and codes that you can use to make your blog look more colorful:

1. Copy the HTML code below

.text-container h2 {
  font-size: 60px;
  background: #f3fdfe;
  color: #2196f3;
  text-transform: uppercase;
  margin: 0;
  height: 0;
  overflow: hidden;
  line-height: 1;
}

.text-container h6 .char {
  transform: rotateY(90deg);
  opacity: 0;
}

.text-container p {
  font-size: 40px;
  color: #18ffff;
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
}

.text-container p .word {
  transform: translateY(100px);
  opacity: 0;
}
  
</style>

const tl = gsap.timeline();

tl.to(
  ".text-container h2",
  {
    height: "auto",
  },
  "+=0.5"
)
  .to(".text-container h2 .char", {
    rotateY: 0,
    opacity: 1,
    stagger: 0.1,
  })
  .to(".text-container p", {
    height: "auto",
    padding: 16,
  })
  .to(
    ".text-container p .word",
    {
      y: 0,
      opacity: 1,
      ease: Expo.easeOut,
      stagger: 0.1,
    },
    "-=0.4"
  );
  
</script>

2. Create a new post or if you already have a previous post. You can immediately open the post you want, after that change the writing display mode to HTML display. If so, you can paste the code at the very top. By making space at the top or lowering the HTML code for your text content, then paste the HTML code for the text animation there.

3. Edit the text in the code description (Add Your Text) according to your blogger name or the text you want to enter. You can also edit the size, color and type of font in the CSS code according to your wishes. To edit the CSS Font Code, you can read the complete tutorial here.

If so, click save and see the results. Now your blogger appearance looks a little more professional than before. Don't forget to wait for the latest updates from STODICO and other interesting information about Technology and Information.

Storage of Digital Codes and Information

Senin, 03 Juni 2024

Create interesting animated text for a welcome greeting or the name of our blogger

STODICO

How do we create interesting animated text for a welcome greeting or the name of our blogger?

Thank You For Visiting👋🏻

Postingan Populer