wpengine

wpengine

Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
Animate It!
Questions
Animate IT! Fade 2-sentences text animation

TOPIC: Animate IT! Fade 2-sentences text animation

Animate IT! Fade 2-sentences text animation 7 years 3 months ago #933

  • Sylwester
  • Sylwester's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: -3
Hello
I'm newbie user to Animate IT!
I wanted to do a Fade text animation of 2 short sentences.
The first sentence of Fade appears, disappears, and the second sentence appears, and so in the loop, the first, second sentence.
Unfortunately I can not do it. How to make such a FADE infiltration one sentence in the second sentence? Please look at the code below. How to correct this code for one sentence to appear after another?
<DIV align="center" style="font-size:300%;color: #ffffff; text-decoration: none; text-shadow:0 0 6px black; font-weight:normal; font-style: normal; line-height: 1.2em;">{edsnewanimate|class="eds-animate edsanimate-sis-hidden "|data-eds-entry-animation="fadeIn"|data-eds-entry-delay="0"|data-eds-entry-duration="2.9"|data-eds-entry-timing="linear"|data-eds-exit-animation="fadeOut"|data-eds-exit-delay="0"|data-eds-exit-duration="2.9"|data-eds-exit-timing="linear"|data-eds-repeat-count="infinite"|data-eds-keep="yes"|data-eds-animate-on="load"|data-eds-scroll-offset=""}

First sentence<br>
Second sentence<br><br>

{/edsnewanimate}</div>
Last Edit: 7 years 3 months ago by Sylwester.
The administrator has disabled public write access.

Animate IT! Fade 2-sentences text animation 7 years 3 months ago #934

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Sylwester,

Thanks for using the Animate It! Apologies for the delayed reply.

Please follow below steps, and the FadeIn FadeOut sequence should work properly.

1. Paste the following CSS in:
Extensions > Plugins > System - Animate It! > Custom CSS
.fade-wrapper{
	position: relative;
}
.fade-wrapper p{
	margin: 0;
}
.fade-wrapper .animated{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	font-size:300%;
	color: #ffffff;
	text-decoration: none;
	text-shadow:0 0 6px black;
	font-weight:normal;
	font-style: normal;
	line-height: 1.2em;
}

2. Paste the following to your article/module.
Please remember to paste the Source Code mode. (See Image here)
<div class="fade-wrapper" style="text-align: center;">
<p>{edsnewanimate|class="eds-animate edsanimate-sis-hidden "|data-eds-entry-animation="fadeIn"|data-eds-entry-delay="2"|data-eds-entry-duration="1"|data-eds-entry-timing="linear"|data-eds-exit-animation="fadeOut"|data-eds-exit-delay="2"|data-eds-exit-duration="1"|data-eds-exit-timing="linear"|data-eds-repeat-count="infinite"|data-eds-keep="yes"|data-eds-animate-on="load"|data-eds-scroll-offset=""}</p>
This is Sentence 1<br />
<p>{/edsnewanimate}</p>
<p>{edsnewanimate|class="eds-animate edsanimate-sis-hidden "|data-eds-entry-animation="fadeOut"|data-eds-entry-delay="2"|data-eds-entry-duration="1"|data-eds-entry-timing="linear"|data-eds-exit-animation="fadeIn"|data-eds-exit-delay="2"|data-eds-exit-duration="1"|data-eds-exit-timing="linear"|data-eds-repeat-count="infinite"|data-eds-keep="yes"|data-eds-animate-on="load"|data-eds-scroll-offset=""}</p>
<p style="text-align: center;">Second Sentence goes here.</p>
<p>{/edsnewanimate}</p>
</div>

3. Save.

This should add 2 repeating Fading animation to your article/module.
Please note that the extra style you have added to the DIV are added in Custom CSS as well.

You can see this code live in action here: eleopardanimate.jdevcloud.com/

Please let me know if this works.
The administrator has disabled public write access.

Animate IT! Fade 2-sentences text animation 7 years 3 months ago #935

  • Sylwester
  • Sylwester's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: -3
Thanks ! Perfect !
The administrator has disabled public write access.

Animate IT! Fade 2-sentences text animation 7 years 3 months ago #936

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Sylwester,

Glad to know it worked.
Please feel free to let me know if you have any other issues.
The administrator has disabled public write access.
The following user(s) said Thank You: Sylwester

Animate IT! Fade 2-sentences text animation 7 years 2 months ago #942

  • Sylwester
  • Sylwester's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: -3
The first text is visible for a fraction of a second and immediately pervades the second.
Can it prolong the loading time of the first?

Please look changing sign at the top of the page
http://www.stopodorom.pl/
The administrator has disabled public write access.

Animate IT! Fade 2-sentences text animation 7 years 2 months ago #943

  • eLEOPARD
  • eLEOPARD's Avatar
  • Offline
  • Administrator
  • Posts: 409
  • Thank you received: 54
  • Karma: -28
Dear Sylwester,

Apologies for the delayed reply.

The duration that text stays can be changed, but equally for both the texts.
The downside here would be, if you want to let the animations stay for, lets say 3 seconds, then the animations would start after 3 seconds as well.

In the shortcode provided earlier, just change
data-eds-entry-delay="2"
to
data-eds-entry-delay="6"

and
data-eds-exit-delay="2"
to
data-eds-exit-delay="6"

Let me know if this work for you.
The administrator has disabled public write access.
Forum
Animate It!
Questions
Animate IT! Fade 2-sentences text animation
Time to create page: 0.032 seconds

Need Customization? Feel free to...

Contact Us

If you like these extensions, help us buy Yoga Mats :)