[ 解決済 ] G2で動くjavascriptがG3で動かない

[VWSカスタマー]

■ WordPress のバージョン
6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.1.3

■ Pro Unit のバージョン
0.23.2

■ スキンの種類
Evergreen

■ スキンのバージョン
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
classに「animation」を設定したテキストや画像を、下記のjavascriptとCSSでフェードイン表示させたい。

[javascript]
jQuery(window).on(‘load scroll resize’,function(){
var windowHeight = jQuery(window).height(),
topWindow = jQuery(window).scrollTop();
jQuery(‘.animation’).each(function(){
var targetPosition = jQuery(this).offset().top;
if(topWindow > targetPosition – windowHeight + 100){
jQuery(this).addClass(“fadeInDown”);
}
});
});

[CSS]
.animation {
visibility: hidden;
}

.fadeInDown {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-ms-animation-duration:1s;
animation-duration:1s;
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

■ 自分で試した事
「外観」→「カスタマイズ」→「Lightning 機能設定」で「世代設定」の切り替え

■ 症状が発生するブラウザ
Chrome, Edge

■ 実際の症状
Genaration 2だと問題なく動作しますが、Generation 3で動作しません。

■ その他特記事項
Generation 3でも「外観」→「カスタマイズ」の画面では動作します。

[うなこ]

javascriptのコードを見ると、ダブルコーテーションなどが全角になっていますので、それが原因かもしれません。
以下を貼り付け直してみてください。

jQuery(window).on('load scroll resize',function(){
    var windowHeight = jQuery(window).height(),
    topWindow = jQuery(window).scrollTop();
    jQuery('.animation').each(function(){
    var targetPosition = jQuery(this).offset().top;
    if(topWindow > targetPosition - windowHeight + 100){
    jQuery(this).addClass("fadeInDown");
    }
    });
});

あと、VK Blocks Proにアニメーションブロックがありますので、そちらを使用しても良いかもしれません。

アニメーション（Pro版のみ）

[VWSカスタマー]

うなこ様、

回答ありがとうございます。ご指摘いただいた半角全角の違いはありませんでした。このフォーラムに半角のダブルクォーテーションを書き込むと、勝手に全角に変換されてしまうようです。

VK Blocks Proの「アニメーションブロック」については不勉強で知りませんでした。もし解決できない場合は、こちらを代用させていただきます。ご提案ありがとうございます。

[うなこ]

このフォーラムに半角のダブルクォーテーションを書き込むと、勝手に全角に変換されてしまうようです。

なるほど、私の勘違いでした。

javascriptのファイルはどのように読み込んでいますか？
子テーマのfunctions.phpにコードなどを書いていましたら、貼り付けていただけると、回答がつきやすいかもしれません。

【例】

function my_lightning_child_enquque_scripts() {
	wp_enqueue_script( 'my-test', get_stylesheet_directory_uri() . '/assets/js/test.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_lightning_child_enquque_scripts' );

パララックスについて

[VWSカスタマー]

うなこ様、

ありがとうございます。javascriptのファイルの読み込み方の変更で解決しました！

ネットの情報を参考にfunctions.phpに下記のように記述していたのですが、

function meta_headcustomtags() {
$headcustomtag = <<<EOM
<script src="/wp-content/themes/lightning-child/_g3/assets/js/animation.js" charset="utf-8"></script>
EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

これを例示いただいた下記の書き方に変更したところ、G3でも無事動くようになりました。

function my_lightning_child_enquque_scripts() {
	wp_enqueue_script( 'my-animation', get_stylesheet_directory_uri() . '/_g3/assets/js/animation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_lightning_child_enquque_scripts' );

勉強になりました。ご指導に感謝いたします。

[うなこ]

解決できてよかったです！今後ともよろしくおねがいいたします

[投稿者]

投稿