JavaScript

Topic text with changing word. JQUERY or CSS?

I want to make an animation of changing words like here http://doyouimpress.com [14.04.2015 site topic]

This is what I have in my code

HTML

<h1 class="negative-topic">EXPERIENCE SERVICES OF 
  <span id="changing-word">SPECIAL</span><br /> REAL ESTATE AGENT
</h1>

JQUERY

(function(){

    // List your words here:
    var words = [
        'SPECIAL',
        'DILIGENT',
        'FRIENDLY',
        'WISE'
        ], i = 0;

    setInterval(function(){
        $('#changing-word').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
        });
       // 2 seconds
    }, 2000);

})();

The code above works but I need some advices regarding it.

1)Using JQUEARY language how can I change color of these words? Eg. I'd like the FRIENDLY to be orange and WISE to be blue.

2)The mutual timer for change animation is 2 sec (2000). How is possible to let the SPECIAL word be 3s and all the rest only 1 seconds?

3)Should I rather use only CSS animations to achieve the desired effect or use JQUERY? I found nice tutorial here http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations also it seems that doyouimpress.com site is using something similar to the tympanus.net tutorial. Atleast I couldn't find any JQUERY events related to this animation. Comparing my jquery code with the tympanus tutorial JQ is much more clearer and have less code.

Thanks alot!

2 Answers

Zachary Green
Zachary Green
16,359 Points

sorry for the misunderstanding.

(function(){

    // List your words here:
    var words = [
        'SPECIAL',
        'DILIGENT',
        'FRIENDLY',
        'WISE'
        ], i = 0,
         delay = 1;

    setInterval(function(){
        $('#changing-word').fadeOut(function(){
            var word = words[i=(i+1)%words.length]
            $(this).html(word).fadeIn();
            $(this).css('textColor', 'orange'); // or color of choice

            if (word == 'SPECIAL'){
             delay = 3;
            }else {
             delay = 1;
            }
        });
       // 2 seconds
    }, delay * 1000);

})();

A huge thanks for the help! I really appreciate this :).

Zachary Green
Zachary Green
16,359 Points

to answer the first question while inside the fadeout function you can change the text color of the words by doing $(this).css('textColor', 'orange') or you can use a hex value or rgba. http://api.jquery.com/css/#css-propertyName-value

on to the second question you can have a while loop set a var to the delay you want while a word is being displayed. something like this

setInterval(function(){
        $('#changing-word').fadeOut(function(){
             var word = words[i=(i+1)%words.length]
            $(this).html().fadeIn();
            if (word == 'SPECIAL'){
             delay = 3
            }else {
             delay = 1
            }
        });
       // 2 seconds
    }, delay);

Zachary,

You'd have to have the delay either set to 3000 or 1000 in the if-else statements or use (delay * 1000); in the second argument of the setInterval function because that delay must be in milliseconds i.e.

setInterval(function(){
        $('#changing-word').fadeOut(function(){
             var word = words[i=(i+1)%words.length]
            $(this).html().fadeIn();
            if (word == 'SPECIAL'){
             delay = 3;
            }else {
             delay = 1;
            }
        });
       // 2 seconds
    }, (delay * 1000));
Zachary Green
Zachary Green
16,359 Points

you are correct Marcus my mistake

No worries!

(function(){

    // List your words here:
    var words = [
        'SPECIAL',
        'DILIGENT',
        'FRIENDLY',
        'WISE'
        ], i = 0;

setInterval(function(){
        $('#changing-word').fadeOut(function(){
             var word = words[i=(i+1)%words.length]
            $(this).html().fadeIn();
            if (word == 'SPECIAL'){
             delay = 3;
            }else {
             delay = 1;
            }
        });
       // 2 seconds
    }, (delay * 1000));

})();

This code above is not working for me. Words are not changing. Are you sure about the code?

Also I don't understand where exactly I should put the $(this).css('textColor', 'orange'). I just started to learn JQUERY and struggle to understand the logic. Anyway, are you sure about the code above? Is it like this?

    var words = [
        'SPECIAL',
        'DILIGENT' $(this).css('textColor', 'orange'),
        'FRIENDLY' $(this).css('textColor', 'red'),
        'WISE'
        ], i = 0;