プラグインElementorのelementor/controls/animations/additional_animationsフィルタの使用方法・解説

概要

elementor/controls/animations/additional_animations フィルタは、Elementorプラグインにおいてアニメーション効果を追加するためのフックです。このフィルタを使用することで、デフォルトのアニメーションに加えて独自のアニメーションオプションを追加することができます。このフィルタは、特に以下の機能を実装する際によく使われます。

カスタムアニメーション効果の追加
特定の要素に対して異なるアニメーションを適用
アニメーションのトリガー条件の設定
スクロールに応じたアニメーションの実装
モバイルデバイス向けのアニメーションの調整
ユーザーインタラクションに基づくアニメーション効果の追加

構文

add_filter( 'elementor/controls/animations/additional_animations', 'your_custom_animation_function' );

パラメータ

array $animations: 追加されるアニメーションの配列.

戻り値

array: 追加されたアニメーションの配列.

使用可能なバージョン

Elementorバージョン: 3.0以降
WordPressバージョン: 5.0以降

この関数のアクションでの使用可能性

アクション	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプル01: フェードインアニメーションを追加

add_filter( 'elementor/controls/animations/additional_animations', function( $animations ) {
    $animations['fade-in'] = 'Fade In';
    return $animations;
});

このサンプルコードは、Elementorのアニメーション選択に「Fade In」というアニメーション効果を追加します。

サンプル02: スライドアップアニメーションを追加

add_filter( 'elementor/controls/animations/additional_animations', function( $animations ) {
    $animations['slide-up'] = 'Slide Up';
    return $animations;
});

このサンプルコードは、Elementor内に「Slide Up」というアニメーション効果を追加します。

サンプル03: ゆっくり拡大するアニメーションを追加

add_filter( 'elementor/controls/animations/additional_animations', function( $animations ) {
    $animations['slow-grow'] = 'Slow Grow';
    return $animations;
});

このサンプルコードは、要素がゆっくりと拡大するアニメーション効果を追加します。

サンプル04: ジャンプアニメーションを追加

add_filter( 'elementor/controls/animations/additional_animations', function( $animations ) {
    $animations['jump'] = 'Jump';
    return $animations;
});

このサンプルコードは、「Jump」という新しいアニメーション効果をElementorに追加します。

サンプル05: ひねりアニメーションを追加

add_filter( 'elementor/controls/animations/additional_animations', function( $animations ) {
    $animations['twist'] = 'Twist';
    return $animations;
});

このサンプルコードは、要素がひねるアニメーション効果をElementorに追加します。

概要

構文