Tagged: animations, CSS, customize, jQuery, js, transitions
-
AuthorPosts
-
December 12, 2014 at 1:48 pm #367209
Howdy folks,
first of all: Awesome, very customizable Theme!!! Its getting better and better with every new version.
However i miss some nice and smooth CSS animations/transitions this is why i got some questions:
– I’m a beginner in CSS and so I´d like to know if there`s any possibility to add and define my own keyframes. The theme itself uses some keyframes too i think – isnt it possible to use those keyframes for any other element?
Lets say I added the Custom CSS fields to all elements and now want to animate an icon or whatever. Can you give an example?-Where can I see, which keyframes you defined and how do I use them? Can you give an example?
– Is it possible to add things like this? http://daneden.github.io/animate.css/ and if so, is it necessary to add jQuery to not to start the animation until the section where it should happen is visible?
– I’m beginning to learn jQuery too.. Which theme file do i have to change to add or change some jQuery?
Thanks for your help.
Alex
December 13, 2014 at 5:42 pm #367707Hey alexanderduenchem!
You can add your CSS in Dashboard > Enfold > General Styling > Quick CSS or inside the /enfold/css/custom.css. We use CSS animations in a lot of different areas. You can find examples in the following files.
/enfold/config-templatebuilder/avia-template-builder/assets/css/avia-builder.css /enfold/config-templatebuilder/avia-template-builder/assets/css/avia-modal.css /enfold/css/layout.css /enfold/css/shortcodes.css
You can add this to your functions.php file to include some jQuery in the footer.
add_action( 'wp_footer', 'enfold_customization_custom_js' ); function enfold_customization_custom_js() { ?> <script type = "text/javascript" src = "URL to your script"></script> <?php }
Or use the wp_head action if you want to add it to the header.
Cheers!
Elliott -
AuthorPosts
- You must be logged in to reply to this topic.