How to Fade In Out multiple texts using CSS jQuery like on Droplr

0 votes

I've seen this type of animation on a website just when CSS3 key-frames started to gain momentum, but couldn't find it nor could I replicate it using CSS or jQuery, and here's where I thought some of you could help.

I've animated what I hope to achieve and I've embedded it below. I believe this can be coded using the new CSS3 key-frames or jQuery's .animate(); feature. I don't know. I've tried everything I know, but all in vain.

Here's the GIF animation of what I wanted:

GIF animation where the text "I am" is static and the word "invincible" fades out, the word "awesome" fades in, the word "awesome" fades back out, and the word "invincible" fades back in, in an infinite loop.

I just noticed, http://droplr.com/ uses a very similar transition on their home page, but with a few sliding effects. And the data (words) that come up are all random, all the time. I'd like to know how that is possible!

Jun 29 in Web Development by gaurav
• 17,000 points
9 views

1 answer to this question.

0 votes

The jQuery fadeIn() method is used to fade in a hidden element. Syntax: $(selector). fadeIn(speed,callback);

answered Jun 29 by rajatha
• 7,040 points

Related Questions In Web Development

0 votes
1 answer

how to use substr() function in jquery?

To get substring of a string in ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
11 views
0 votes
1 answer

How to loop through array in jQuery?

Generic loop: var i; for (i = 0; i ...READ MORE

answered Jun 28 in Web Development by rajatha
• 7,040 points
19 views
0 votes
1 answer

How to display current element in jQuery?

<! DOCTYPE html> <html> <head> <script> $(document). ready(function(){ $("button"). click(function(){ $("p"). text("Welcome to ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
16 views
0 votes
1 answer

How to create a simple map using JavaScript/JQuery

var map = new Object(); // or ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
17 views
0 votes
1 answer

CSS3 Rotate Animation

I noticed that there is an ERROR ...READ MORE

answered Feb 18 in Others by Aditya
• 7,300 points
47 views
0 votes
0 answers

Looping Animation of text color change using CSS3

I have text that I want to ...READ MORE

Jun 22 in CSS by Edureka
• 9,760 points
8 views
0 votes
0 answers

CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120"> Cannot get ...READ MORE

Jun 22 in CSS by Edureka
• 9,760 points
20 views
0 votes
1 answer

jQuery text animation "explosion" effect on hover

The logic: Wrap each textual character inside a <span> tag Make ...READ MORE

answered 4 days ago in Web Development by rajatha
• 7,040 points
6 views
0 votes
1 answer

how to rotate image image 3d in jquery on swipe up and swipe down

If you're not using one of the ...READ MORE

answered 4 days ago in Web Development by rajatha
• 7,040 points
4 views
0 votes
1 answer

How to place images using jQuery masonry plugin to start

You were just missing a css class that adjusts ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
8 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP