CODEWITHSUNDEEP
javascripthtmlcss
Shankar
Shankar

Reputation: 843

Flipping 3 text with animation

I have a small requirement. I have a div with three child divs with text. On load the first text will be visible. After 3 seconds the first one hides and second one is visible. After another 3 seconds the second one hides and third one is visible. This continues.

Currently I do not have any animation on the hide of one span and show of another. So it looks kind of murky. White I want is to show some kind of animation as it happens on the windows 8 tiles. Like the text that hides should slide up and disappear and the text that is to be shown should slide in from bottom. the animation should give the user a smooth experience.

I am not using any animation library. Is this possible through javascript / css ? Below is my code. Any idea would be useful.

HTML :

<div class="dataflipping">
          <div class="first">FIRST TEXT</div>
          <div class="second">SECOND TEXT</div>
          <div class="third">THIRD TEXT</div>
</div>

JavaScript:

var srcElement = document.getElementsByClassName("dataflipping");

var elementChld = srcElement.getElementsByTagName("div");
var elementArr = [];

for (counter === 0; counter < elementChld.length; counter++) {
    elementArr.push(elementChld[counter]);
}

var elementCount = elementArray.length;


// Set all except first one to hidden initially
for (counter = 1; counter < elementCount; counter++) {
    var ele = elementArray[counter];
    ele.style.display = "none";
}

counter = 0;


setInterval(function () {
    counter++;
    var prevElement = null;
    var curElement = null;

    if (counter === 1) {
        var prevElement = elementArr[elementCount - 1];
    }
    else {
        prevElement = elementArr[counter - 2];
    }

    curElement = elementArr[counter - 1];
    prevElement.style.display = "none";
    curElement.style.display = "block";


    if (counter === elementCount) {
        counter = 0;
    }
}, 3000);

Upvotes: 3

Views: 554

Answers (1)

kajojeq
kajojeq

Reputation: 904

IF I understood well. I think easier way is to use MODULO, I wrote something like this:

elementArr[counter%elementCount]

http://jsfiddle.net/t3N4A/

I think you just need to try make position:absolute; and like i change opacity you should change it left/top position, change frequency of setInterval function to make it smoother and make it disappear where u want to. Hope that helped a little.

Upvotes: 1

Related Questions