该插件尚未通过WordPress的最新3个主要版本进行测试。 当与较新版本的WordPress一起使用时,可能不再受到维护或支持,并且可能会存在兼容性问题。

RA Widgets Animate

描述

RA Widgets Animate is a WordPress plugin that adds additional widget fields into existing widget forms using the latest Animate On Scroll script to render animation. If you’re using SiteOrigin Panels, the plugin also adds ‘Animation’ tab to Widget Styles.

Features

  • Animate almost all of your widgets
  • Animate On Scroll support
  • Supports SiteOrigin Panels Widget Styles
  • Ability to choose animation type
  • Ability to add additional animation values using the built-in rawa_animations filter
  • Ability to choose anchor placement
  • Ability to change anchor element
  • Ability to change easing time
  • Ability to change animation offset
  • Ability to change animation duration
  • Ability to change animation delay
  • Ability to set animation once
  • Ability to disable animation on certain devices and viewports
  • Set global settings via plugin settings
  • Enable/disable plugin scripts and styles via plugin settings

屏幕截图

  • 'Animation' fields inside 'Widgets' screen in WordPress.
  • 'Animation' tab settings in SiteOrigin Panels.
  • 'Animation' tab settings when opened in SiteOrigin Panels.
  • 'RA Widgets Animate' settings page.

安装

  1. Upload the plugin files to the /wp-content/plugins/ra-widgets-animate directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through ‘Plugins’ screen in WordPress.

常见问题

Do I need to install SiteOrigin Panels to be able to use the animation?

No, the fields will attached itself to existing widgets on ‘Widgets’ screen in WordPress. If you have SiteOrigin Panels installed, the ‘Animation’ tab will be added to SiteOrigin Panels ‘Widget Styles’.

How can I set Animate on Scroll settings globally without having to edit each widgets?

You can set the global settings through Settings > RA Widgets Animate > Global Settings.

I have Animate on Scroll already, how can I disable the AOS script on your plugin to prevent conflict?

You can disable Animate on Scroll scripts and styles through Settings > RA Widgets Animate > Script Settings.

I want to add additional animation values, how can I do that?

As of version 1.1.7, you can now add custom animation values using the built-in rawa_animations filter. Add the following code in your functions.php file.

<?php
add_filter( 'rawa_animations', function( $animation ) {
    new_animation = array(
        'custom-animation' => __( 'Custom Animation' ),
    );

    return array_merge( $animation, $new_animation );
} );

Then, add the following to your css file:

[data-aos="custom-animation"] {
    transform: skewX(45deg);
    opacity: 0;
    transition-property: transform, opacity;
}
[data-aos="custom-animation"].aos-animate {
    transform: skewX(0);
    opacity: 1;
}

To learn more about setting custom animation values check out this pen from the Animate on Scroll author.

评价

2018年11月28日 1 回复
Just for info it's very cool but there is an error in this version 1.1.9 now, when we install it to look for css front-end: aos.css or in the directory named aos.min.css For the administrator, he looked for rawa-admin.min.js or in the plugins directory, his name is rawa-admin.js. I rename directly in the directory of plugins and after that works. 🙂
2017年7月30日
This beautiful little plugin is exactly what I was looking to accomplish on my website and I am really happy that I found it. The code is compact and elegant, and the functionality is perfect. Thank you for taking the time to make the animate on scroll library easily available for wordpress.
阅读所有4条评价

贡献者及开发者

“RA Widgets Animate” 是开源软件。 以下人员对此插件做出了贡献。

贡献者

将“RA Widgets Animate”翻译成您的语言。

对开发感兴趣吗?

您可以浏览代码,查看SVN仓库,或通过RSS订阅开发日志

更新日志

1.1.9.1

  • Fixed undefined constant
  • Added missing js, css files

1.1.9

  • Updated Animate on Scroll to version 2.3.4.
  • Fixed Animate on Scroll disable on devices implementation.
  • Updated translation.

1.1.8

  • Updated Animate on Scroll to version 2.3.0.
  • Updated translation.
  • Updated author URI.

1.1.7

  • Added custom animation filter to allow additional animation values.

1.1.6

  • Added custom viewport selection in plugin settings.
  • Modified plugin tags.

1.1.5

  • Changed style and script filenames and paths.
  • Fixed .rawa-fields from closing on widgets update.
  • Added admin script and style to Customizer screen.
  • Fixed disable object name returning array instead of string.
  • Admin style changes.

1.1.4

  • Changed donate link, added settings page screenshot.

1.1.3

  • Added missing js files, removed unneeded files.

1.1.2

  • Renamed app.js to rawa.js, trying to fixed missing js files on SVN commit

1.1.1

  • Fixing missing js files

1.1

  • Added settings page, added app.js script, modify css build path, grammar fixes, code cleanup, updated translation.

1.0.7

  • Prevent .rawa-fields from closing on widgets save, added back deleted files, migrate to Yarn from Bower.

1.0.6

  • Regex fix, removed unneeded files.

1.0.5

  • Added additional fields, fixed bug with widgets with no css selectors, updated npm packages

1.0.4

  • Code cleanup, moved siteorigin related js, css/markup changes, translation related changes

1.0.3

  • Code cleanup, moved animation, placement, easing into their own function

1.0.2

  • Removed unneeded line of codes

1.0.1

  • Fixed float issue with two-column widgets

1.0

  • First release