ウェブサイトアニメーション

Web サイトのアニメーションを使用すると、ページの読み込み中にフェードイン、フェードアウト、縮小などの視覚効果を追加できます。 これにより、ユーザーがページをスクロールするときに Web サイトに魅力が加わります。

ウェブサイトのさまざまな要素にさまざまなアニメーション スタイルを選択できます。

ここで扱われる内容:

  1. ウェブサイトアニメーション
  2. ウェブサイトの要素
  3. アニメーションスタイル
  4. スピードアニメーション

ウェブサイトのアニメーションを編集する

アニメーションは Web サイトを視覚的に興味深いものにし、Web サイト上に存在するすべての要素に命を吹き込みます。 これらは、ユーザーにとってより魅力的で没入型のエクスペリエンスを生み出します。

ここでは、Web サイトの要素のアニメーションを管理およびカスタマイズするために使用できるすべての設定が表示されます。

ヒント

  • デフォルトでは、 上にスライドします アニメーションはウェブサイト全体に適用されます。
  • 選択 なし アニメーションを無効にしたい場合。


さまざまなウェブサイト要素

Pixpa を使用すると、Web サイトの次の要素にアニメーションを適用できます。

  1. 画像: 画像に動きを加えて、訪問者の注目を集めましょう。
  2. 見出し H1: アニメーションを使用して、メインの見出しを目立たせます。
  3. 見出し H2: サブ見出しや小さなタイトルをアニメーション化して、コンテンツの流れを強化します。
  4. テキスト: 段落や説明をアニメーション化して、コンテンツに活気を与えましょう。
  5. ボタン: 目を引く効果で行動喚起ボタンを強調します。

変更内容をすべて保存してウェブサイトに反映させるには、必ず「公開」 (6)ボタンをクリックしてください。


アニメーションスタイル

  1. フェードイン -  不透明度を透明から不透明に増やすことで要素を徐々に明らかにします。
  2. 上にスライドします - 画面上の要素が低い位置から高い位置までスムーズに移動します。
  3. 拡大する - 要素のサイズまたはスケールを徐々に大きくします。
  4. スケールダウン – 要素のサイズまたはスケールを徐々に小さくします。
  5. 明らかな - 画面上の要素を徐々に明らかにまたは明らかにします。

お願い

「なし」を選択すると、その要素のアニメーションが無効になります。


スピードアニメーション

アニメーションがある状態から別の状態に遷移する速度。 これは、アニメーション化された変化が画面上でどのくらい速く起こるか、または遅く起こるかを決定します。

選択肢は「低速」「中速」「高速」の3つです。

お願い

古いテンプレートを使用している場合、アニメーションオプションが表示されないことがあります。ウェブサイトを新しいテンプレートに切り替える必要があります。詳細はこちら


Slide Up アニメーションの実際の動作を確認してください。


お探しのものが見つかりませんか?

Pixpaエキスパートに連絡してください。

Pixpa Studioがリニューアルされました。現在、ヘルプ記事のスクリーンショットをすべて更新中です。