Dear Ivan,
Thanks for the good words 🙂
You can easily achieve the animation on https://www.downloads.eleopard.in/animate-it-demo-wordpress , and Visual composer makes it even better!
A side note: You can see Animate It! button in the Text editor element on Visual composer, so you can use the short-codes.
(sceen: https://adobe.ly/2HQDzIS)
We can do this using the editor short-codes as well. Its juts that below steeps seem easier and quicker to me.
Now, for the animation Just a few steps:
1. Add RAW HTML Module to you Post/Page.
2. Paste the following in it (Change the text as you wish):
<div class="about-extension animated flipInX delay1">
<h3>
<img class="animated flipInY delay2" src="https://www.downloads.eleopard.in/images/animateit-demo/animateit-icon.png" alt="" />
</h3>
<h3 class=" animated bounceIn delay3">
Title here
</h3>
<p class=" animated bounceIn delay4">
Description here. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
3. Click on Cog Icon on the Page to add the following CSS:
(Screenshot: http://demo.az-themes.com/alice/documentation/_include/img/009_vc_custom_css.png)
.about-extension {
background: rgba(255,255,255,0.2);
border-radius: 0;
margin-top: 20px;
margin-bottom: 20px;
padding: 50px;
text-align: left;
color: #ffffff;
max-width: 780px;
margin: 0 auto;
}
.about-extension img{
float: left;
margin: -12px 20px 10px 2px;
max-width: 112px;
height: auto;
}
.about-extension h3{
color: #ffffff;
}
4. Save.
Now, I have additionally added a dark background image and padding to the row using the Design options in Row Settings.
Let me know if this works for you.
-
This reply was modified 8 years, 2 months ago by
eleopard.
Oh and you can see the demo using Visual composer here:
http://beyond-digital.wpdevcloud.com/post-for-ivan/
This is test website of ours using Visual Composer.
Thread Starter
iv m
(@ivanomartiello)
thank you very much for your support ad great work, i will test it soon, but i have an important question….i will use your plugin if i can be able to animate , only if is it possible when a user is in the view area of text or image animated. so when i select “scroll” it doesn’t work for me, i changed percentage also, but it works only when the page load…so what the meaning of scroll function? thank you!
-
This reply was modified 8 years, 2 months ago by
iv m.
Dear Ivan,
I am sorry but I am not able to understand.
Can you send me a link to your page, and explain the issue again?