February 22, 2015

Weebly Tricks #93 - Animated Text Fills

Posted by Domingo Tambasacan at 2/22/2015

Animated Text Fills Weebly


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.






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

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



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!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top