パララックススクロールの実装方法

どのように動作するか

視差効果は、他のオブジェクトとの関係で画像の位置を変えることを可能にします。カスタムHTMLコードを介してページの型破りなスクロールを設定し、サイトをより目を引くものにすることができます。既存のソリューションを使用することも、独自のコードを追加することもできます。

入手方法

既存のソリューションを使用する

  1. アドミンページでプロジェクトを開きます。
  2. サイドバーで「サイトビルダー」と移動します。
  3. サイトビルダーを開く」をクリックします。
  4. 以下のコードをカスタムコードブロックに挿入します:
Copy
Full screen
Small screen
<div class="img-holder" data-image="https://cdn.xsolla.net/files/uploaded/2340/4c9ab2e4036d41e2b31c4e6e01a5a7c6.jpeg"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  var script = document.createElement('script');
  script.src = "https://cdn.jsdelivr.net/npm/parallax-imagescroll@0.2.3/jquery.imageScroll.min.js";
  script.addEventListener('load', function() {
    $('.img-holder').imageScroll({
      holderClass: 'sb-image-holder',
      speed: 0.5
    });
  });
  document.getElementsByTagName('body')[0].appendChild(script);
</script>

  1. 視差効果を画像に適用するには、この画像へのリンクをdata-image属性に追加します。
  2. プレビューをクリックして変更を確認します。

この手順については、チュートリアルビデオをご覧ください:


自分のコードを追加する

  1. ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。
  1. 独自のコードをブロックに挿入します。
この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

ご意見ありがとうございました!

お役立ちリンク

最終更新日: 2024年1月22日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!