header-logo
はじめましょう!Wix でサイトやビジネスを構築する方法をご紹介します。テンプレートを使用してサイトをカスタマイズしたり、パートナーに依頼してウェブプレゼンスを確立しましょう。
サイトの作成Wix エディタの使い方とサイトコンテンツの管理方法について学びましょう。訪問者のプライバシーを保護し、サイトをよりアクセシブルにします。
アカウント・お支払いアカウント設定を確認し、定期購入とプレミアムプランを管理、請求内容を把握しましょう。
Wix モバイルアプリの使用Wix Owner アプリを使用してビジネスを効率的に運営し、訪問者と関わり、コミュニティを構築しましょう。
ドメインの接続ドメインの購入・接続・移管方法と、サイトデータを安全に保つ方法について理解しましょう。
ビジネスの管理支払いの受け付け、分析、訪問者とのつながりなど、ビジネスを構築し成長させるための適切なツールを見つけましょう。
サイトの宣伝検索エンジンでサイトを宣伝し、メルマガを送信し、有料広告を掲載する方法を学びましょう。
Wix Studio・パートナー・エンタープライズWix Studio、パートナー、エンタープライズアカウントを最大限に活用し、ビジネスを拡大しましょう。
ヘルプサイトのパフォーマンスや技術的な問題を解決するための情報を入手しましょう。製品ロードマップでは今後の機能について確認できます。
placeholder-preview-image
Wix Learnコースとチュートリアルでスキルを習得する。
Wix ブログウェブデザインやマーケティングなどのヒントを得る。
SEO ラーニングハブ検索エンジンからのトラフィックを増やす方法について学ぶ。
Website developmentフルスタックプラットフォームでカスタムサイトを構築する。
Wix パートナーに依頼あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
この記事では下記を説明します:
  • ギャラリーにスクロール効果を追加する
  • アニメーション設定をカスタマイズする

Wix プロギャラリー:ギャラリーにスクロール効果を追加する

この記事内
  • ギャラリーにスクロール効果を追加する
  • アニメーション設定をカスタマイズする
訪問者がギャラリーアイテムをスクロールする際に表示されるアニメーション効果を追加しましょう。アニメーションにトランジションスタイルを追加し、その時間を調整することで、訪問者に興味を持ってもらいます。
これらのアニメーション効果は、サイトの「折り目」線より下で訪問者がスクロールすることで起動します。「折り目」の上は、サイトが読み込まれた際に表示される部分を指します。「折り目」の下の部分を表示させるには、スクロールダウンが必要です。
ヒント:
この記事では、デスクトップデバイスで表示できるようにギャラリーのデザインをカスタマイズする方法を説明します。モバイルサイトのギャラリーデザインをカスタマイズすることも可能です。

訪問者がギャラリーを下にスクロールしたときに再生される視覚効果を追加します。楽しいスクロール効果は、シャッフルレイアウトを除くすべてのギャラリーレイアウトで利用できます。利用可能なアニメーション効果は、選択したレイアウトによって異なります。

ギャラリーにスクロール効果を追加する方法:

  1. エディタにアクセスします。
  2. ページ上のプロギャラリーをクリックします。
  3. 「設定」をクリックします。
  4. 「デザイン」タブをクリックします。
  5. 「スクロール効果」をクリックします。
  6. 次のオプションからアニメーションを選択します:
    • なし:スクロールに効果は適用されません。
    • フェードイン:スクロール中に画像が徐々に表示されます。
    • フェードアウト:スクロールすると画像が白黒になります。
    • スライド:スクロールすると画像が上にスライドします。
    • 拡大表示:スクロールすると画像が大きくなります。
    • 縮小表示:スクロールすると画像が小さくなります。
    • ズームアウト:スクロールすると画像がズームアウトします。
    • 一色:スクロール時に画像に 1 つの色が適用されます。
ギャラリー設定の「デザイン」タブにあるスクロール効果のスクリーンショット。
注意:
スライドショーとサムネイルレイアウトでは、スクロール、フェード、スタックのスライドアニメーションのみ使用できます。

アニメーション設定をカスタマイズする

スクロール効果の時間をカスタマイズし、ギャラリーアイテム間のスムーズな移行を追加することで、サイト訪問者の注意を維持しましょう。

アニメーション設定をカスタマイズする方法:

  1. エディタにアクセスします。
  2. ページ上のプロギャラリーをクリックします。
  3. 「設定」をクリックします。
  4. 「デザイン」タブをクリックします。
  5. 「スクロール効果」をクリックします。
  6. 「アニメーションをカスタマイズ」をクリックします。
  7. アニメーション設定を編集します:
    • トランジションスタイル:ドロップダウンをクリックし、アニメーションの再生スタイルを選択します(例: リニア、イーズイン、バウンスアウト)。
    • 所要時間:スライダーをドラッグして、アニメーションの所要時間を調整します。
「トランジションスタイル」ドロップダウンが表示された「アニメーションを編集」パネルのスクリーンショット。
ライブサイトでの表示を確認する:
サイトをプレビューして、アニメーションの動作を確認しましょう。

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
Unlock personalized helpLog in to get the most out of Helpmate.