パララックススクロールの実装方法
どのように動作するか
視差効果は、他のオブジェクトとの関係で画像の位置を変えることを可能にします。カスタムHTMLコードを介してページの型破りなスクロールを設定し、サイトをより目を引くものにすることができます。既存のソリューションを使用することも、独自のコードを追加することもできます。
入手方法
既存のソリューションを使用する
- アドミンページでプロジェクトを開きます。
- サイドバーで「サイトビルダー」と移動します。
- 「サイトビルダーを開く」をクリックします。
- 以下のコードをカスタムコードブロックに挿入します：
Copy
- html
<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>
- 視差効果を画像に適用するには、この画像へのリンクを
data-image属性に追加します。 - プレビューをクリックして変更を確認します。
この手順については、チュートリアルビデオをご覧ください：
自分のコードを追加する
- ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。
- 独自のコードをブロックに挿入します。
この記事は役に立ちましたか？
ご意見ありがとうございました！
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。お役立ちリンク
最終更新日: 2024年1月22日誤字脱字などのテキストエラーを見つけましたか？ テキストを選択し、Ctrl+Enterを押します。
