How to create some animations in layers?
Hi there,
There are several wonderful Extensions that add animations for the content widget and so on. Here are a few:
Advanced Animated Content
Woosh Slider
Animated Columns
Layers Plus Addons
Gallery Mojo
Layers Essential Addons
Animated Content
You also have the option of using just CSS to animate elements via transforms and other no-Javascript techniques in Custom CSS. Here is a great archive of CSS animations you can apply to any element in your pages:
https://css-tricks.com/search-results/?q=animations
There are also several child themes that include front-end animation. The main difference is you have more control over the animating when using Extensions
There’s also animate.css and wow.js which you can add on your child theme’s functions.php using this code if you don’t want to buy extensions:
//* Enqueue Animate.CSS and WOW.js
add_action( ‘wp_enqueue_scripts’, ‘sk_enqueue_scripts’ );
function sk_enqueue_scripts() {
wp_enqueue_style( ‘animate’, get_stylesheet_directory_uri() . ‘/assets/css/animate.min.css’ );
wp_enqueue_script( ‘wow’, get_stylesheet_directory_uri() . ‘/assets/js/wow.min.js’, array(), ”, true );
Then go to your customiser and on advanced settings put the custom classes you want for your transition. You can find the classes for each transition here https://daneden.github.io/animate.css/
You just simply add the widget, then go to Advanced – Custom Class(es) and add the code like this –
wow slideInUp
remember to download and add animate.min.css and wow.min,js files in your child theme’s assets folder.
Thanks Daniel Bandi.
I used this code, added to functions.php in child theme:
//* Enqueue Animate.CSS and WOW.js // https://daneden.github.io/animate.css/ // https://github.com/matthieua/WOW add_action( 'wp_enqueue_scripts', 'animate_enqueue_scripts' ); function animate_enqueue_scripts() { wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/assets/css/animate.min.css' ); wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/assets/js/wow.min.js', array(), '', true ); } //* Enqueue script to activate WOW.js function sk_wow_init_in_footer() { add_action( 'print_footer_scripts', 'wow_init' ); } //* Add JavaScript before </body> function wow_init() { ?> <script type="text/javascript"> wow = new WOW( { //boxClass: 'wow', // default //animateClass: 'animated', // default offset: 100, // default //mobile: true, // default //live: true // default } ) wow.init(); </script> <?php } add_action('wp_footer', 'wow_init', 100 );