August 12, 2014

Weebly Tricks #67 - Rotating Words using CSS Animations

Posted by Domz at 8/12/2014

Weebly Changing Text Effects


My first text effects were pretty outdated so I scan codrops looking for something modern and innovative. Luckily, I came up with this "typography effects" using CSS animations. It switches (or changes/ rotates) words making a simple sentence more meaningful. These types of typography effects are often used to create effective and interactive landing pages. I am recommending you to start using Google Chrome as your browser.







Importance of a Good Typography Effect
From random thoughts at coderops.

One of the most effective typography tools is the words on the page. Say something with meaning to grab your audience. Catch their attention with fun or interesting words. The No. 1 reason to use this type is to communicate with your visitors through text or message.

Typography has long been an invaluable tool for communicating ideas and information. Choosing the correct typography for the website is a very important part of the design process.



TUTORIAL

We will be using the simplest style for our tutorial. I tested it on three themes using Chrome and Firefox. Our HTML or body code will only be composed of two sentences with changing words each. It supports up to 6 words or phrases with specific timings to appear. I would recommend you to insert your header code on a single page only.

Now, head to the codes.



HEADER CODE
Where to place these codes? Click Here!

<style>
.rw-wrapper{
width: 80%;
position: relative;
margin:0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence{
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
color: #444;
white-space: nowrap;
font-size: 150%;
font-weight: normal;
}
.rw-words{
display: inline-block;
text-indent: 10px;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
  margin-top: -32px;
}
.rw-words-1 span{
-webkit-animation: rotateWordsFirst 18s linear infinite 0s;
-ms-animation: rotateWordsFirst 18s linear infinite 0s;
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
    -webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3) {
    -webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4) {
    -webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5) {
    -webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #8d6b9d;
}
.rw-words span:nth-child(6) {
    -webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
color: #9b6b9d;
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
    0% { opacity: 1; -ms-animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

@-webkit-keyframes rotateWordsSecond {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsSecond {
    0% { opacity: 1; -ms-animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}
@media screen and (max-width: 768px){
.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
.rw-sentence { font-size: 9px; }
}

.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>



BODY CODE
Where to place these codes? Click Here!

<section class="rw-wrapper">
    <h2 class="rw-sentence">
      <span>Do you know what is the most important <br/> component of a website?</span> <br/>
        <span>It's</span>
        <span>not the</span>
        <div class="rw-words rw-words-1">
<span></span>
            <span>Author,</span>
            <span>Content,</span>
            <span>Traffic,</span>
            <span>Ranking,</span>
            <span>Accomplishments,</span>
        </div>
        <br />
        <span>But it's</span>
        <div class="rw-words rw-words-2">
<span></span>
            <span>You.</span>
            <span>Your Presence.</span>
            <span>Your Visits.</span>
            <span>Your Support.</span>
            <span>Your Contribution.</span>
        </div>
    </h2>
</section>
<br/>

Notes:
Red text - This are your static sentences or words, They don't have any effects.
Blue text - These words will be rotating. Maximum of 6 words.



Conclusion

The success of this tutorial can also be affected with the background you will use, the images you will add and of course the meaning of your sentences. It uses words and not images making it SEO friendly. Experiment with this and try to grab the first 8 seconds of your visitor. If you need some help adjusting the sentences, just post at the forum. Before I forgot, the code author is Mary Lou of Codrops.

Subscribe below to get more useful tutorials straight from your inbox for FREE.

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!

...

4 comments:

  1. can you help me i want make in Arabic please it's from right to left

    ReplyDelete
    Replies
    1. Hi Medoo,

      Sorry but I can't help you with that.

      Delete
  2. Is there any way to change the main color of it?

    ReplyDelete

 

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

Home | | Privacy Policy | Top