概要
elementor/controls/exit-animations/additional_animationsフィルタは、Elementorのエクストリームアニメーション機能を拡張し、ユーザーが独自のアニメーション効果を追加できるようにするために使用されます。このフィルタを使用することで、サイト制作者はElementorで作成したコンテンツに対して、さまざまなExitアニメーションを簡単に適用可能です。
よく使用される機能には、次のようなものがあります：
1. ページ要素が画面外に出ていく際のアニメーション追加
2. カスタムアニメーション効果の定義
3. レスポンシブデザインに対応したアニメーション設定
4. 特定のユーザーアクションに基づくアニメーショントリガー
5. アニメーションの速度や遅延の調整
6. スクロール位置に応じたアニメーション設定
フィルタの概要
- 構文:
add_filter( 'elementor/controls/exit-animations/additional_animations', 'your_callback_function' ); - パラメータ:
$animations– 追加のアニメーションの配列 - 戻り値: 変更されたアニメーションの配列
- 使用可能なプラグインElementorのバージョン: Elementor 3.x以降
- 使用可能なワードプレスのバージョン: WordPress 5.x以降
この関数のアクションでの使用可能性
| アクション | 使用可能性 |
|---|---|
| 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 |
サンプルコード
サンプル1: シンプルなアニメーション効果の追加
add_filter( 'elementor/controls/exit-animations/additional_animations', function( $animations ) {
$animations['fade-out'] = [
'name' => __( 'Fade Out', 'text-domain' ),
'css' => '.fade-out { opacity: 0; transition: opacity 0.5s ease; }',
];
return $animations;
});
このサンプルコードは、コンテンツ要素の「フェードアウト」アニメーション効果を追加します。この効果は、要素が非表示になるときに使用されます。
引用元: https://developer.wordpress.org
サンプル2: スライドアニメーションの追加
add_filter( 'elementor/controls/exit-animations/additional_animations', function( $animations ) {
$animations['slide-left'] = [
'name' => __( 'Slide Left', 'text-domain' ),
'css' => '.slide-left { transform: translateX(-100%); transition: transform 0.5s ease; }',
];
return $animations;
});
このサンプルでは、「スライド左」アニメーションを追加します。要素がスライドインすることで視覚的に面白くなります。
引用元: https://developer.wordpress.org
サンプル3: 拡大縮小アニメーションの追加
add_filter( 'elementor/controls/exit-animations/additional_animations', function( $animations ) {
$animations['zoom-out'] = [
'name' => __( 'Zoom Out', 'text-domain' ),
'css' => '.zoom-out { transform: scale(0); transition: transform 0.5s ease; }',
];
return $animations;
});
このサンプルは、「ズームアウト」アニメーションを追加します。要素が縮小することで、消える印象を与えます。
引用元: https://developer.wordpress.org
サンプル4: 回転アニメーションの追加
add_filter( 'elementor/controls/exit-animations/additional_animations', function( $animations ) {
$animations['rotate-out'] = [
'name' => __( 'Rotate Out', 'text-domain' ),
'css' => '.rotate-out { transform: rotate(90deg); transition: transform 0.5s ease; }',
];
return $animations;
});
このサンプルでは、「回転アウト」アニメーションを追加します。要素が回転しながら消えるエフェクトが得られます。
引用元: https://developer.wordpress.org
サンプル5: 上方向へのスライドアウトアニメーションの追加
add_filter( 'elementor/controls/exit-animations/additional_animations', function( $animations ) {
$animations['slide-up'] = [
'name' => __( 'Slide Up', 'text-domain' ),
'css' => '.slide-up { transform: translateY(-100%); transition: transform 0.5s ease; }',
];
return $animations;
});
このサンプルでは、「スライドアップ」アニメーションを追加します。要素が画面の上にスライドして消えるようになります。
引用元: https://developer.wordpress.org