Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Change an element every few seconds and sync with animation

Change an element every few seconds and sync with animation

Problem

Recently I've been learning some javascript to improve my pages.

I tried to make a simple exercise in which I change an Element every 5 seconds but when I tried to add a fadein animation with css and only applies to the first time, at this point I don't really know if my javascript isn't written the right way or it has something to do with my css.

Can someone with more knowledge and experience give me some tips?

Okay, so basically the problem is I can't get the animation repeating like the sentences, you can check it out here:

//Calling the element.
var $slogan = document.getElementById("slogan");

// Setting an array with several strings.
var sloganArray = ["This sentence will change every 5 seconds!", "See? I'm changing!", "Knock Knock.", "Who's there?", "Heck I don't know!"];

//Setting variable to control the index.
var sloganIndex = 0;

/* This function (only when called) replaces the text of the element called before with text contained on the strings of the array, each time incrementing one and going through every array position. */
function changeSlogan() {
    $slogan.innerHTML = sloganArray[sloganIndex];
    ++sloganIndex;
    if (sloganIndex >= sloganArray.length) {
        sloganIndex = 0;
    }
  }

//Calling the function created before every five seconds.
setInterval(changeSlogan,5000);
#slogan {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #000;
    opacity: 1;
    transition: opacity .3s ease-out;
    -webkit-animation:fadeIn ease-out ;
    -moz-animation:fadeIn ease-out ;
    animation:fadeIn ease-out;
    -webkit-animation-fill-mode:forward;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forward;
    animation-fill-mode:forward;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-delay: 4.9s; /* Chrome, Safari, Opera */
    animation-delay: 4.9s;
    animation-iteration-count: infinite;
}

This is a dynamic sentence!

Thank you for you time!

Problem courtesy of: csalmeida

Solution

I would suggest to use only css and no javascript for your case . I created three effects.Use .slogan, .slogan up, .slogan down and put the changing elements inside elements as below.

Check and the css here : http://jsfiddle.net/csdtesting/ncmctw65/1/

Html to set:

Cool fading text only with css try .slogan, .sloga down, .slogan up

This sentence will change every 5 seconds!

See? I'm changing!

Who's there?

eck I don't know!

Hope you liked that!

Solution courtesy of: Giannis Grivas

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Change an element every few seconds and sync with animation

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×