Animate Any

animate.cssライブラリを統合し、管理インターフェースを通じてDrupalサイト上の任意の要素にCSSアニメーションを適用できるようにします。

animate_any

4,212 sites

drupal.org

gui theme

animation css effects visual animate.css frontend ux

Drupal 8 Drupal 9 Drupal 10

インストール

Drupal 10, 9 v3.1.0

composer require 'drupal/animate_any:^3.1'

Drupal 8 v8.x-1.6

composer require 'drupal/animate_any:8.x-1.6'

概要

Animate Anyは、人気のあるanimate.cssライブラリの機能を、コーディング知識なしでウェブサイトに導入できるDrupalモジュールです。サイトビルダーが60種類以上のCSSアニメーションをサイト上の任意のDOM要素に適用できる、使いやすい管理インターフェースを提供します。

このモジュールでは、管理者が親要素（CSSクラスまたはIDセレクタを使用）を指定し、その親要素内でアニメーションを適用する子セクションを定義できます。各アニメーションは、ページ読み込み、ビューポートへのスクロール、クリック、ホバー、その他のマウス操作など、様々なイベントでトリガーできます。

アニメーション設定はデータベーステーブルに保存され、Drupalの構成管理システムにエクスポートできるため、異なる環境（開発、ステージング、本番）間でアニメーション設定を簡単にデプロイできます。

Features

コードを書かずにクラスまたはIDセレクタを使用して任意のDOM要素にCSSアニメーションを適用
bounce、fade、flip、rotate、zoom、slide、特殊アニメーションなど60種類以上のアニメーション効果
複数のトリガーイベントオプション：ページ読み込み、ビューポートへのスクロール、クリック、ホバー、マウス進入/離脱、マウスアップ/ダウン、マウス移動
アニメーションタイプ選択時に管理フォームでアニメーションのライブプレビューを表示
親要素に複数のアニメーション子セクションを含む階層的なアニメーション構造
ページリロードなしでアニメーション行を追加・削除できるAJAX対応の動的フォーム
バージョン管理とデプロイのためにデータベースからDrupalのアクティブ構成にアニメーション設定をエクスポート
マルチ環境同期のためにアクティブ構成からデータベースにアニメーション設定をインポート
スクロールトリガーアニメーションで要素が表示されたときにアニメーションが再生されるよう自動ビューポート検出
繰り返しイベントトリガーアニメーションのため1秒後にアニメーションクラスを自動削除

Use Cases

ページ読み込み時にヒーローセクションをアニメーション

ホームページのヒーローセクションにフェードインアニメーションを追加します。親要素を'body.front'またはホームページのbodyクラスに設定し、子識別子'.hero-section'を追加、'ページ読み込み時'イベントを選択し、'Fade In'アニメーションを選択します。訪問者がホームページにアクセスすると、ヒーローコンテンツが優雅にフェードインします。

スクロール時にコンテンツセクションを表示

コンテンツセクションに魅力的なスクロールアニメーションを作成します。'#main-content'を親として使用し、'.content-block'などの識別子を追加、'ページスクロール時'イベントを選択し、'Slide In Up'や'Fade In Up'などのアニメーションを選択します。ユーザーがページをスクロールすると、各コンテンツブロックがビューポートに入るときにアニメーションで表示されます。

インタラクティブなボタンホバー効果

コールトゥアクションボタンに注目を集めるホバー効果を追加します。親を'.cta-wrapper'または類似のコンテナに設定し、'.cta-button'を識別子として追加、'ホバー'イベントを選択し、'Pulse'や'Rubber Band'アニメーションを選択します。ユーザーがホバーするとボタンがアニメーションし、クリックを促します。

クリックトリガーのフィードバックアニメーション

ユーザーが要素をクリックしたときに視覚的フィードバックを提供します。いいねボタンの場合、ボタンを含む親セレクタを使用し、ボタンの識別子を追加、'クリック'イベントを選択し、'Bounce'や'Tada'アニメーションを選択します。クリック時に要素がアニメーションし、満足感のあるユーザーフィードバックを提供します。

環境間でアニメーションをデプロイ

開発環境でアニメーションを設定し、エクスポートを使用してアクティブ構成に保存します。Drupalの構成同期を使用してファイルにエクスポートします。ステージング/本番環境では、構成ファイルをインポートし、インポートタブを使用してデータベースに反映させます。これですべての環境でアニメーションが一貫します。

ナビゲーションメニューアイテムをアニメーション

ナビゲーション要素に控えめなアニメーションを追加します。ナビゲーションコンテナを親として使用し、メニューアイテムの識別子を追加、'マウスエンター'イベントを選択し、'Swing'や'Shake'などの控えめなアニメーションを選択します。ユーザーがホバーするとメニューアイテムがアニメーションし、ナビゲーション体験に洗練さを加えます。

Tips

モジュールとanimate.cssライブラリをインストールした後は、必ずすべてのキャッシュをクリアしてください
アニメーションが適用される場所を制限するために具体的な親セレクタを使用してください - 'body'のような広いセレクタは意図しないアニメーションを引き起こす可能性があります
スクロールアニメーションでは、ユーザーがアニメーションのトリガーを見られるよう、対象要素がファーストビューより下にあることを確認してください
管理フォームのライブプレビューは'ANIMATE ANY'見出しでアニメーションを表示します - 保存前にこれを使用してプレビューしてください
同じ親要素を持つ識別子は、整理のために自動的に1つのデータベース行にマージされます
イベントトリガーのアニメーション（クリック、ホバーなど）は1秒後に自動的にリセットされ、繰り返しアニメーションが可能になります
サイトを環境間で移動する際は、アニメーションの一貫性を維持するためにエクスポート/インポート機能を使用してください
animate.cssライブラリが見つからない場合、モジュールは警告を表示します - /libraries/animate_any/animate.cssが存在することを確認してください

Technical Details

Animate any設定 /admin/config/animate_any

ウェブサイト要素に新しいCSSアニメーションを追加するためのメイン設定ページ。このページでは、親要素を定義し、アニメーションとトリガーイベントを持つ複数の子セクションを追加できます。

アニメーション一覧 /admin/config/animate_any/list

設定されたすべてのアニメーションを親要素と子識別子とともにページネーション付きテーブルで表示します。各アニメーション設定の編集と削除操作を提供します。

アニメーションフォームの編集 /admin/config/animate_any/edit/{element}

既存のアニメーション設定を変更するための編集フォーム。親要素とすべての子セクションアニメーションの現在の値が事前入力されています。

削除の確認 /admin/config/animate_any/delete/{id}

データベースとアクティブ構成の両方からアニメーション設定を完全に削除するための確認ページ。

データベースに構成をインポート /admin/config/animate_any/import

Drupalのアクティブ構成からデータベーステーブルにアニメーション設定をインポートします。バージョン管理から構成をデプロイしたり、別の環境から同期したりする際に便利です。

データベースから構成をエクスポート /admin/config/animate_any/export

データベースからDrupalのアクティブ構成にアニメーション設定をエクスポートします。エクスポート後、構成同期を使用してバージョン管理用の同期ディレクトリにエクスポートしてください。

Animate Any権限

アニメーション設定の追加、編集、削除、インポート、エクスポートを行うAnimate Any管理ページへのアクセスを許可します。

hook_page_attachments

すべてのページでanimate_any/animateライブラリをアタッチし、アニメーション設定データをJSONとしてJavaScriptに渡します。

管理フォームに「animate.cssライブラリがありません」という警告が表示される

https://github.com/daneden/animate.css からanimate.cssをダウンロードし、animate.cssファイルを/libraries/animate_any/animate.cssに配置してください。完全なパスはDRUPAL_ROOT/libraries/animate_any/animate.cssになります。

フロントエンドにアニメーションが表示されない

まずすべてのキャッシュをクリアしてください。animate.cssライブラリが正しくインストールされていることを確認してください。親セレクタがページに存在し、子識別子が正しいことを確認してください。ブラウザの開発者ツールを使用して要素の存在を確認し、コンソールでJavaScriptエラーをチェックしてください。

スクロールアニメーションがスクロール時ではなく即座にトリガーされる

スクロールアニメーションは要素がビューポートに表示されたときのみトリガーされます。要素がページ読み込み時にすでに表示されている場合、アニメーションは即座にトリガーされる可能性があります。アニメーション要素を初期ビューポートより下に配置するか、ファーストビューの要素には'ページ読み込み時'を使用してください。

アニメーションが1回だけ再生され、繰り返されない

イベントトリガーのアニメーション（クリック、ホバーなど）では、繰り返しアニメーションを可能にするためにアニメーションクラスが1秒後に自動的に削除されます。スクロールとページ読み込みアニメーションは意図的に1回だけ再生されます。繰り返し可能なスクロールアニメーションが必要な場合は、代わりにクリックまたはホバーイベントの使用を検討してください。

構成のインポート/エクスポートが機能しない

正しいワークフローに従っていることを確認してください：エクスポートはデータベースをアクティブ構成に保存します（同期ディレクトリではありません）。その後、Drupalの構成同期を使用してファイルにエクスポートする必要があります。インポートでは、まず構成ファイルをアクティブ構成に同期し、次にインポートタブを使用してデータベースに反映させます。