エレメント（Elementor）では、いくつかの方法で視差を使用したパラレックススクロール効果を追加できます。エレメントプロを使用している場合は、Scrolling Effectsを使用してパラレックス効果を適用できます。フルページのパラレックススクロールが必要な場合は、プラグインを使用できます。
エレメント（Elementor）にパラレックススクロール効果（Parallax Scroll）を追加する方法
Avada, Divi など多目的有料テーマでは、パララックス（視差効果）機能を提供します。エレメンタでも視差を利用した効果を適用できます。
エレメントのスクロール効果を使う
次の画像は、CodePenに公開されたParallax Scrollingコードの中から選別して示しています。最初の例は Firewatchのローンチサイトに適用された効果を示します。
Elementor Proを使用している場合は、[スタイル]タブの[Scrolling Effects]オプションを使用するか、[詳細]タブのモーション効果でScrolling Effectsを有効にして、適切な設定で上記の画像と同様の効果を得ることができます。
Parallax効果のための背景画像の 固定かどうか를 固定(Fixed)で選択してテストしてください。
フルページパラレックス効果
以下は、フルページパラレックススクロール効果です（Full Page Parallax Scroll Effect）の例です。このような効果を適用したサイトをたくさん見たことでしょう。
上記の効果をエレメントに適用する場合は、プラグインを使用するか、コードを直接作成して追加できます。
無料のプラグインでは、 Granular Controls For Elementorというプラグインがありましたが、6年以上アップデートができなくなって今はもう動作しないようです。 （動作していても長い間更新されていないプラグインは、プラグインのクラッシュやセキュリティの問題を引き起こす可能性があるため、使用しないでください。）
いくつかの有料プラグインで視差効果を提供します。 200万人以上のユーザーが使用するEssential Addons for ElementorのProバージョンでParallax機能を有効にして使用できます。
このプラグインはハングル化されていますが、翻訳でぎこちない部分が目立つですね。有料版をご利用の場合 必須アドオン » 拡張子 (Extensions) タブで パララックスを有効にできます。無料版を使用している場合は、プロ版にアップグレードするように指示するウィンドウが表示されます。 （「拡張子」は「拡張機能」に翻訳する方がより正しい表現のようです。 「プレミアム拡張」から「レプリカ」など一部のエクステンションは、韓国語表現だけでは正確にどんな機能をするのか意味がすぐに届きませんね。）
AdSense必要なプラグインの有料版の詳細については、プラグインの紹介ページを参照してください。
JavaScriptコードを使用してパラレックス効果を実装する
GitHubリポジトリにSydneyテーマに視差効果を追加するjQueryコードをエレメント用に変換して上がっています。
コードが古く、最新エレメンタ版ではうまく動作しないという方もいらっしゃいますね。フェッヘットリポジトリに登場したコードをJavaScriptに変換し、最新のエレメントバージョンを考慮して修正してみました。
/* Code to add Parallax Scroll Effect in Elementor */
function add_parallax_script() {
?>
<script language="JavaScript" type="text/javascript">
;(function() {
'use strict';
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
var parallax = function() {
var testMobile = isMobile.any();
if (!testMobile) {
var parallaxElements = document.querySelectorAll('.parallax');
window.addEventListener('scroll', function() {
var scrollPosition = window.pageYOffset;
parallaxElements.forEach(function(element) {
var speed = element.getAttribute('data-speed') || 0.3;
element.style.backgroundPosition = "50% " + (scrollPosition * speed) + "px";
});
});
}
};
document.addEventListener('DOMContentLoaded', function() {
parallax();
});
})();
</script>
<?php
}
if (!is_admin()) {
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('jquery');
add_action('wp_head', 'add_parallax_script');
});
}上記のコードを チャイルドテーマの関数ファイルに追加してください。
そして次のCSSコード デザイン » カスタマイズ » 追加のCSSに追加してください。
.parallax {
transition: none !important;
}セクションの[詳細設定]タブで、CSSクラス部分にparallaxを入力します。
そして 스타일 タブの背景画像セクションで 固定かどうか를 固定(Fixed)で選択してうまくいくかどうかをテストしてください。上記のコードは十分なテストを受けていませんでした。環境によってはうまく機能しないか、望みどおりに機能しない可能性があります。
コメントを残す