Weebly Tricks #93 - Animated Text Fills

Codrops has posted a new Text Animation styles which I think should be taught to Weeblers. The idea is to add effects to our text either by texture or background. They created 11 effects which is highly experimental but should work on most modern browsers. I will teach you on how to create one on this tutorial.

CLICK HERE FOR LIVE DEMO

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>

/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

/* Other styles */
html, body {
  height: 100%;
}
</style>
<style>
.wcustomhtml {
background: #111;
}
</style>

Notes:

Red text - This is completely optional. I just changed the background of the HTML box into black for a better output of the text. You may remove it by not including the whole red text. Or change the background color by replacing the #111 with the color of your choice.

---

BODY CODE
Where to place these codes? Click Here!

---

<svg viewBox="0 0 600 200">

  <!-- Symbol -->
  <symbol id="s-text" style="font: 10em/1 Open Sans, Impact;">
    <text text-anchor="middle"
          x="50%" y="50%" dy=".35em">
      Weebly
    </text>
  </symbol>

  <!-- Duplicate symbols -->
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>

Notes:
Green text - The box width
Blue text - The box height
Red text - This will be the font size of your text.
Yellow text - Your message.

---

CONCLUSION

---

You might have noticed that there is no JQuery required for the above tutorial. The code has also been simplified for you to better understand and easily applied on your Weebly site. Just take note of its browser compatibility.

The above demo is only 1 among the 11 awesome samples of Codrops so you may visit the code source found on the demo page. I may help you insert the others.

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!