ヘルプセンター
ヘルプセンター
入門
Tildaの仕組み
新しいページを作成する
ページをコピーする
ページを転送する
ページを並べ替える
サイト設定
ドメイン名を購入する
ドメイン名を接続する
DNS を設定する
カスタム ドメイン エラーのトラブルシューティング
ホームページ
ヘッダーとフッター
ウェブサイトのフォントを設定する
コードのエクスポート
プロジェクト譲渡
無料の tilda.ws サブドメイン
色の設定
URL リダイレクトの作成
HTTPS のセットアップ
ページ フォルダ
ページ編集
ナビゲーション メニューを追加する
アンカーと内部リンク
モバイル デバイスでの表示
HTMLコードを埋め込む
Google マップを追加
多言語ウェブサイトの作成
オンラインで公開するための画像の準備
カバーを売り込む
ノンブレークスペース&ソフトハイフン
ページの公開
フィードバック ウィジェットを追加する
Facebookでプレビュー
コメント セクションを追加する
Instagram フィードを埋め込む
投稿一覧または目次ページ
オンラインストアと支払い
オンラインストアと支払い処理
オンライン ストアに商品を追加する
ショッピング カートの設定
製品の直販
支払いシステムの割り当て
Stripeを設定する
PayPal を設定する
2Checkoutを設定する
注文通知の送信
オンライン決済システムなしで販売する
単一の製品の販売
製品バリエーションを追加
配送オプション
補完製品
プロモーション コード (割引) を作成する
フォーム
データ キャプチャ フォームの設定
データ取得フォーム
Eメール
Google Sheets
MailChimp
Google フォーム
SendGrid
センディンブルー
ユニセンダー
アモCRM
パイプドライブ
Zoho CRM
トレッロ
Telegram
Slack
ザピア
メーラーライト
Notion
Salesforce
ハブスポット
ウェブフック
カスタム スクリプト
フォームのエラーを回避する
Monday.com
分析
ウェブサイト統計の追跡
グーグルアナリティクス
Googleタグマネージャー
目標達成率を提出する
SEO
ウェブサイトをオンラインで宣伝する
Zero Block
カスタム ブロックを作成する
レスポンシブ デザイン
キーボード ショートカット リスト
アニメーション
ステップバイステップのアニメーション
Figmaからインポート
メールキャンペーンビルダー
メールの作成、編集、および送信
プランと請求
予定
価格と支払い
サブスクリプションの自動更新をキャンセルする
お支払い確認
Tildaビジネスプランへのアップグレード
特別プラン
開発者向け
HTMLコードを埋め込む
コードのエクスポート
ウェブフック
Tilda API
WordPressプラグイン
TILDAヘルプセンター
Zero Block:ステップバイステップのアニメーション
Zero Blockで複雑なアニメーションを設定する方法
ビデオチュートリアル
ステップバイステップのアニメーション
Zero Blockでステップバイステップのアニメーションを作成する方法に関するこのビデオチュートリアルを見るか、以下の詳細なハウツーガイドをお読みください。
Zero Blockには2つのアニメーションモードがあります。
1)基本アニメーションは単純なアニメーションです。これらは、外観効果(不透明度、ボトムアップ、右から左など)、視差、固定など、既製の最も一般的に使用される効果です。これらは90%のケースで十分です。
基本的なアニメーション→ガイド
2)ステップバイステップのアニメーションにより、明るく創造的なアイデアを好きなように実現できます。
ステップバイステップのアニメーションを使用して達成できることの
さまざまな例
を確認してください。
ステップバイステップ アニメーションの概要
ステップバイステップのアニメーションツールは、プロのデザイナーを対象としたWebエディターであるZero Blockで利用できます。ブロックライブラリ(「その他」カテゴリのすぐ下)でZero Blockを選択するか、ページの下部にあるZero Blockをクリックして、ページにを追加します。
Zero Blockの左上隅にある[ブロックの編集]をクリックしてカスタマイズします。
新しい要素を追加して選択し、[設定]パネルを開き、[ステップバイステップのアニメーション]セクションまで下にスクロールして、[追加]をクリックします。
要素の段階的なアニメーションを作成すると、この要素のすべての基本アニメーション設定がキャンセルされます。
アニメーションを開始するイベントを選択する方法
ステップ バイ ステップのアニメーションの作成を開始するには、アニメーションの再生を開始する条件である Event を選択します。次の 5 つの条件から選択できます。
画面上の要素 - 特定の要素が画面に表示されるとすぐにアニメーションの再生が開始されます。
画面上のブロック - ブロック全体が画面に表示されると、アニメーションの再生が開始されます。
スクロール時 - アニメーションの再生が開始され、スクロール中も再生が継続されます。
ホバー時 - ホバー時にアニメーションの再生が開始されます。
クリック時 - クリック時にアニメーションの再生が開始されます。
アニメーションの開始点には、Start Trigger、Loop、および Trigger Offset の 3 つの追加オプションがあります。
開始トリガーは、アニメーションを開始する領域またはものです。ウィンドウ上部、ウィンドウ中央、またはウィンドウ下部の 3 つの領域から選択します。
トリガー オフセットは、アニメーションの開始点から、選択したウィンドウの上部、ウィンドウの中心、またはウィンドウの下部までのオフセットです。
ループは、ループで再生するアニメーションを設定するために使用されます。
Play Element または Play All をクリックして、アニメーション、選択した要素、またはブロック内のすべての要素をテストできます。
アニメーションステップを追加する方法
最初のステップはデフォルトで設定されています。スタートといいます。ステップを追加し、各ステップで要素のプロパティを変更します。これにより、要素が変更されます。
ステップを追加するには、[ステップの追加] をクリックします。
ステップを切り替えることができます。要素の境界線が青色に変わることは、要素が元の位置にあることを意味し、要素の境界線が緑色に変わることは、ステップが編集中であることを意味します。
たとえば、起動時に要素が非表示になるようにするには(不透明度 - 0%)、最初のステップを追加し、不透明度を 0%、[継続時間] を 0 秒に設定します。
各ステップには、継続時間、移動、スケール、不透明度、回転、イージング、遅延などの一連のプロパティがあります。
継続時間は、アニメーションの
継続
時間を秒単位で指定します。
Move
は、要素が元の位置を基準にして移動する座標です。それらを設定するには、値を割り当てるか、要素を移動します。
スケール
は、ステップの終わりまでに要素を増減する度合いです。
不
透明度は、ステップの終わりまでの要素の透明度の値です。
回転は、ステップの終わりに向かって要素が度単位で
回転
することです。
イージング
は、アニメーション効果を選択するオプションです:線形(線形アニメーション実行);easeIn, easeOut, easeInOut (アニメーションの最初、最後、またはその両方で速度を落とす)。bounceFin (アニメーションの最後に要素が小さく跳ね返ること)。
遅延
は、アニメーションの再生が開始されるまでの一時停止時間です。
アニメーションを作成するには、ステップを追加し、各ステップで要素のプロパティを変更します。
2 ステップ アニメーションの例
この黄色い四角を右に550px移動し、移動中に縮小して元の位置に戻す方法を見てみましょう。
これは、以下のコメントを含む段階的なガイドです。
左
正しい
黄色の四角を追加するには、要素設定を開き、[ステップバイステップのアニメーション]セクションに移動して、[追加]をクリックします。
アニメーションを起動するイベントを選択します。
たとえば、Element on Screen などです。この場合、要素が画面に表示されるとアニメーションの再生が開始されます。
ステップ 1 を追加します。
プロパティを変更しましょう。 X 軸の右側に 550 ピクセル分オフセットします。
そしてその半分のサイズ (50%)。
ステップ 2 を追加します。
手順 2 で、位置とサイズの値を元の設定 (オフセット - 0 ピクセル、サイズ - 100%) に戻して、要素のプロパティを変更してみましょう。
Play Element をクリックして、アニメーションをテストします。
ブラウザでアニメーションがどのように機能するかを確認する
「要素の再生」ボタンと「すべて再生」ボタンに加えて、アニメーションをプレビューすることもできます。
ブラウザで2つのタブを開きます:Zero Blockとプレビューモードで同じページ。
したがって、[Zero Blockに保存]をクリックすると、更新後にプレビューページに変更が表示されます。
ステップバイステップのアニメーションの例:
要素が表示され、スクロールで移動します
クリックしてページを表示し、アニメーションをご覧ください。
ホバー時またはクリック時のアニメーション
クリックしてページを表示し、アニメーションをご覧ください。
ループ ニュース ティッカー アニメーション
クリックしてページを表示し、アニメーションをご覧ください。
フラグメントから要素を組み立てる
アニメーションのループ
スクロールで複数の要素をアニメーション化する
スクロールで異なる方向に要素を移動する
スクロール時に画面に沿って要素を移動する
アニメーションテキスト
スクロールで要素を非表示にする
スクロール時の要素の修正
テキストのループ
要素のサイズの変更
スクロールによる要素の左から右への移動
視差効果
入門
基本機能の見直し。
読んだ
レスポンシブ デザイン
コンテナの操作と流体要素の作成。
読んだ
ホットキー
作業を高速化するためのすべてのキーボード ショートカットのリスト。
読んだ
Zero Block:基本的なアニメーション
アニメーションの基本: 固定、視差、およびインタラクティブ効果。
読んだ
Zero Block:ステップバイステップのアニメーション
高度なアニメーション ツール: 基本原則、設定、および例。
読んだ
作成日
Tilda