サーバーにアップロードすると、アニメーションが正しく機能しません

Question

前提・実現したいこと

cssとjsで、スクロールすると内容が出てくる、というアニメーションをつくっております。
ファイル→Googleで開く、で確認すると綺麗に出来上がっているのですが、サーバーにアップロードすると、アニメーションが全く機能しません。
どうしたら良いでしょうか。

現在サーバーにアップしているサイトです。aboutページのみ、.viewのcssを外しています。
https://halsora.sakura.ne.jp/index.html

該当のソースコード

■html(該当箇所のみ抜粋)
<section class="section-contact view">
        ・・・
</section>

■css
.view{
opacity : 0;
transform : translate(0, 70px);
transition : all 500ms;
}
.view.scrollin{
opacity : 1;
transform : translate(0, 0);
}

■js
$(function(){
    $(window).scroll(function (){
        $(".view").each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 200){
                $(this).addClass("scrollin");
            }
        });
    });
});

試したこと

上記した通り、サーバーにアップロードする前に、ファイルをGoogleで開き、確認したときには綺麗にアニメーションが出来ていました。

Comments

[m.ts10806]

HTMLはなるべく、DOCTYPE宣言から提示してください。
このままだと「必要なファイルが全てアップロードされてないか、パスが違うんでしょう」くらいになります。

[7seHAL]

わかりづらくてすみません。
html全体を書くと長くなってしまうので、該当箇所のみを抜粋させていただきました。
DOCTYPE宣言や、scriptなどのリンクも表記しております。

[m.ts10806]

リンクになっていなかったので気づかなかったです。
マークダウンにはリンク機能もありますので、そちらを利用してください。
ただ、実際の自身のサイトURLだと宣伝効果があり、あまりよろしくないので、
「問題が再現できる最小構成のコード」を改めて組みなおして提示されたほうが良いかもしれません。
※それにより問題が整理できて自己解決できる例もあるようです

[7seHAL]

実際の自身のサイトURLを載せるのは、あまり良くないのですね。ありがとうございます。
このようなサイトに質問を投稿するのが初めてなので、言及していただけてありがたいです。

DOCTYPE宣言や、scriptなどのリンクも表記しているのは実際のhtmlファイルで、質問の文章中には載せておりません。

[m.ts10806]

ひとまず今回はリンク先確認しますが、次からは別途組みなおすとかそのあたりは配慮したほうがいいかもしれません。

[yambejp]

コンソールで確認してエラーなどでていませんか？

Answer 1

ブラウザ開発ツールのコンソール確認すると、エラー出ています。

ソース見た感じslick本体の読み込み記述がありません。
公式サイトにもCDNが用意されているのでひとまずそちらを利用してみてください。

あと蛇足ですが、
jQueryが複数バージョン読み込まれています。
パフォーマンス観点でも良くありませんし
機能がバッティングして動くものが動かなくなることもあるので、
最新のものだけにし、下位バージョンでしか動かない機能を使っている場合は書き換えて対応するようにすべきかなと。

Comments

[7seHAL]

今回、slickのjsが必要なかったので(以前他のサイトで使ったjsの使いまわしをしていました…)、削除したら、上手くアニメーションが動きました！
コードを綺麗に書くことと、jQueryの勉強の必要性を強く感じました…。

ありがとうございました！

[m.ts10806]

エラーを確認する癖をつけたらよいかと思います。
ひとまず、解決されたようで何よりです。

[7seHAL]

確認はしていたのですが、該当箇所のjsには直接関係ないからと、スルーしてしまっていました…。
逐一、エラー確認→直すの癖をつけようと思います。

[m.ts10806]

JavaScriptの場合、構文エラーや今回のようなエラーがあるだけで動作しなくなります。
何かのボタンとかのイベントで動作しているならともかくページ読み込み時のものであれば尚更です。

>スルーしてしまっていました…。
それは「把握していたこと」となるので、質問本文に記載しましょう。
https://teratail.com/help/question-tips#questionTips2-1
https://teratail.com/help/question-tips#questionTips3-4

[m.ts10806]

この回答を正しく指摘できる人が低評価しているとは思えない。
直接言えない後ろめたい理由があるんでしょうね。
不純すぎてかわいそう。他にやることあるでしょ。ほんまに。

[m.ts10806]

低評価された方、コメント願います。
ちなみにteratail運営に相談しており、返信も得られました。

>teratailでは嫌がらせ目的の低評価など、他ユーザー様への迷惑行為を禁止しております。
サイトの利用規約に違反する行為が見られた場合、必要に応じて操作の取り消しやアカウントの停止を行っております。

だそうです。
個別に注意喚起がきたあなた、不純なことやってないで、
指摘するなら真っ向から指摘しなさい。