ANIMATE IT! EASY CSS3 ANIMATIONS FOR WORDPRESS

ANIMATE IT! – EASY CSS3 ANIMATIONS FOR WORDPRESS

WordPress 5.0 で使う、CSS3 Animate It。

かんたんな説明

稼働中のWordPress環境に、プラグイン「Animate It!」をインストールし、投稿や固定ページに配置するブロックの「高度な設定」に、後述するクラスを記述。
そうすると、各ブロックでアニメーション動作を行えるようになります。

アニメーション 動作例

注意事項

必ず、ご自身の責任の範囲内でご利用ください。こちらの記載事項を模倣して起こる問題については当方では責任を負いません。

JUICY LTD. 株式会社　十志

Next: インストールと初期設定

インストールと初期設定

かんたんな説明

WordPressプラグイン「Animate It!」のインストールと、その設定画面になります。

1. Animate It! のインストール

管理画面でプラグインを追加します。「 Animate It 」と検索をして、プラグインがインストールされたら、サイトで有効化しましょう。

2. 初期設定の確認

インストール後に有効化すると、左側のメニューにある「設定」の中に「Animate It!」が表示されます。

設定画面の邦訳と初期値

• Scroll Offset (in percentage):　スクロールオフセット(%指定)：75%
• Enable on Smartphones:　スマートフォンで有効化: No
• Enable on Tablets:　タブレットで有効化: Yes
• Hide Horizontal Scrollbar:　水平スクロールバーを隠す: Yes
• Hide Vertical Scrollbar:　垂直スクロールバーを隠す: No
• Custom CSS:　カスタムCSS: 空欄

Next: 記事内のブロックにアニメーションをつける

記事内のブロックにアニメーションをつける

かんたんな説明

投稿や固定ページのブロックに、アニメーション用のクラスを指定します。

ブロックと「高度な設定」欄

記事内に配置されるブロックの詳細が、画面の右側に表示されます。その中に「高度な設定」という欄があるものが対象になります。

Animate It! 用の追加クラス

アニメーション動作ごとにクラス名が異なりますので、簡単な解説と一覧を載せておきます。

基本的なクラスの入れ方

animated　スタイル　遅延時間　間隔　(無限ループ)　(起動のきっかけ)

例:　スピン（スタイル spinner）

animated spinner duration1 eds-on-click

例:　スゥイング（スタイル swing）

animated swing duration1 eds-on-click

Next: アニメーションスタイルの一覧

Animate It! スタイル一覧

Hover:

[blogcard url=”https://downloads.eleopard.in/class-generator.html”]