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, 2022 in Web Development by gaurav
• 23,260 points
985 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, 2022 by rajatha
• 7,640 points

Related Questions In Web Development

0 votes
0 answers

How to disabled or non-editable text editor using CSS or jQuery?

I am using a rich text editor on my ...READ MORE

Aug 18, 2022 in Web Development by gaurav
• 23,260 points
641 views
0 votes
1 answer

how to use substr() function in jquery?

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

answered Jun 27, 2022 in Web Development by rajatha
• 7,640 points
952 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, 2022 in Web Development by rajatha
• 7,640 points
1,851 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, 2022 in Web Development by rajatha
• 7,640 points
1,029 views
0 votes
0 answers

Can you control GIF animation with Javascript?

Is it feasible to use Javascript to ...READ MORE

Nov 16, 2022 in Java by Nicholas
• 7,760 points
551 views
0 votes
1 answer

CSS3 Rotate Animation

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

answered Feb 18, 2022 in Others by Aditya
• 7,680 points
470 views
0 votes
0 answers

Looping Animation of text color change using CSS3

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

Jun 22, 2022 in CSS by Edureka
• 13,620 points
1,045 views
0 votes
0 answers

CSS3 Rotate Animation

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

Jun 22, 2022 in CSS by Edureka
• 13,620 points
436 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 Aug 4, 2022 in Web Development by rajatha
• 7,640 points
1,260 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, 2022 in Web Development by rajatha
• 7,640 points
353 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP