質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1453閲覧

jQueryが正常に作動しない。

rrgsn

総合スコア9

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/01 11:56

編集2020/05/01 13:59

前提・実現したいこと

<実現したい事>
jQueryが正常に作動するようにしたい。

<前提>

<script>でhtmlに記述すると作動するものもある。 読み込みがうまくできていないのかもしれない.... <script type="text/javascript"> $(document).ready(function(){ alert("jQueryファイルの読み込み完了でーす。"); }); </script>

上記でポップが上がるし、読み込みはできているようだが、

発生している問題・エラーメッセージ

jQueryが正常に作動しない。

sectionに到達した際に画像アニメーションが動くようにしたいが、
URLに飛んですぐ動いてしまう。

HTML

1 <body> 2 <div class="wrapper"> 3 <div class="fullPageScroll"> 4~(中略) 5 <section id="section1" class="section section1"> 6 <h1>Company Profile</h1> 7 <div class="img-wrap"> 8 <img src="/Users/~/image.jpg"> 9 </div> 10    </section> 11~(中略) 12 </div> 13 </div> 14 </body>

CSS

1.section3 { 2 background-color: white; 3 position: relative; 4 } 5 6 .section3 h1 { 7 position: absolute; 8 left: 16%; 9 top: 7%; 10 text-align: center; 11 font-size: 3em; 12 font-family: 'Raleway', sans-serif; 13 } 14 15 .section1 img { 16 display: block; 17 width: 40%; 18 height: 100vh; 19 float: right; 20 } 21 22 .img-wrap { 23 overflow: hidden; 24 position: relative; 25 } 26 27 .img-wrap:before { 28 animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards; 29 background: #fff; 30 bottom: 0; 31 content: ''; 32 left: 0; 33 pointer-events: none; 34 position: absolute; 35 right: 0; 36 top: 0; 37 z-index: 1; 38 } 39 40 @keyframes img-wrap { 41 100% { 42 transform: translateX(-100%); 43 } 44 }

JS

1 // スムーススクロール 2 const paginations = document.querySelectorAll(".pagination a"); 3 paginations.forEach(pagination => { 4 pagination.addEventListener("click", e => { 5 e.preventDefault(); 6 const targetId = e.target.hash; 7 const target = document.querySelector(targetId); 8 target.scrollIntoView({ behavior: "smooth" }); 9 }); 10 }); 11 12 // Intersection Observer 13 const sections = document.querySelectorAll(".section"); 14 const observerRoot = document.querySelector(".fullPageScroll"); 15 const options = { 16 root: observerRoot, 17 rootMargin: "-50% 0px", 18 threshold: 0 19 }; 20 21 22 /** 23 * 交差したときに呼び出す関数 24 * @param entries - IntersectionObserverEntry IntersectionObserverが交差したときに渡されるオブジェクトです。 25 */ 26 function doWhenIntersect(entries) { 27 entries.forEach(entry => { 28 if (entry.isIntersecting) { 29 activatePagination(entry.target); 30 } 31 }); 32 }; 33 34 /** 35 * ページネーションの大きさを変える関数 36 * @param element - HTMLElement 現在表示中のスライドのHTML要素を引数に取ります。 37 */ 38 function activatePagination(element) { 39 const currentActiveIndex = document.querySelector( 40 "#pagination .active" 41 ); 42 if (currentActiveIndex !== null) { 43 currentActiveIndex.classList.remove("active"); 44 } 45 const newActiveIndex = document.querySelector( 46 `a[href='#${element.id}']` 47 ); 48 newActiveIndex.classList.add("active"); 49 }; 50 51 52 $(window).scroll(function() { 53 var windowHeight = $(window).height(100); 54 topWindow = $(window).scrollTop(), 55 targetPosition = $("section3").offset().top; 56 const image = document.querySelectorAll('.img-wrap'); 57 58 const observer = new IntersectionObserver(function(entries) { 59 entries.forEach(function(entry) { 60 if (entry.intersectionRatio > 0) { 61 entry.target.classList.add('img-animation'); 62 } else { 63 entry.target.classList.remove('img-animation'); 64 } 65 }); 66 }); 67 68 69 Array.prototype.forEach.call(image, function(img) { 70 observer.observe(img); 71 }); 72 });

試したこと

head内の読み込みの順番を変更

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>xxxx</title> <link rel=stylesheet type="text/css" href="style.css"> <script src="/Users/xxxx/Desktop/KK/js/jquery-3.5.0.js"></script> <script src="/Users/xxxx/Desktop/KK/js/fullpage.js"></script> <script src="/Users/xxxx/Desktop/KK/js/test.js"></script> <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap" rel="stylesheet"> </head>

scriptでの対応

<script> $('.gnavCont a').click(function(){ $('#navToggle').prop('checked', false); }) </script>

上記のハンバーガーメニューのリンクをクリックしたら
メニューが閉じるはscriptなら正常に作動。

$(window).scroll(function() { var windowHeight = $(window).height(100); topWindow = $(window).scrollTop(), targetPosition = $("section3").offset().top; const image = document.querySelectorAll('.img-wrap'); const observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.intersectionRatio > 0) { entry.target.classList.add('img-animation'); } else { entry.target.classList.remove('img-animation'); } }); }); Array.prototype.forEach.call(image, function(img) { observer.observe(img); }); });

こっちはscriptで入れてもダメ.....

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/05/01 12:30

「sectionに到達した際」とはどういう状況ですか? sectionがはるか下の方にあって、スクロールして わずかでも見えたらなのか、所定の範囲までみえたらなのか? それともなにか判断基準があるのか・・・ またその条件から外れたときに処理をとめるのか 全体的に何をしたいかわかりません
rrgsn

2020/05/01 12:47

スクロール量ではなく、画像が可視範囲に入ってから作動をしたいです。 https://firstlayout.net/css-animation-of-images/ このサイトのスクロールアニメーションの部分を参考にしております。
guest

回答2

0

ベストアンサー

こんにちは、scrollのスクリプトだけ書いてみました。

jQuery

1$("section3").offset().top;

がおかしいんじゃないかとおもいます。

jQuery

1$("#section3").offset().top

script

1$(function () { 2 $(window).scroll(function () { 3 var windowHeight = $(window).height(); 4 (topWindow = $(window).scrollTop()), (targetPosition = $("#section3").offset().top); 5 const image = document.querySelectorAll(".img-wrap"); 6 7 const observer = new IntersectionObserver(function (entries) { 8 entries.forEach(function (entry) { 9 if (entry.intersectionRatio > 0) { 10 console.log(0); 11 entry.target.classList.add("img-animation"); 12 } else { 13 console.log(1); 14 entry.target.classList.remove("img-animation"); 15 } 16 }); 17 }); 18 19 Array.prototype.forEach.call(image, function (img) { 20 observer.observe(img); 21 }); 22 }); 23}); 24

投稿2020/05/10 03:56

fake_shibe

総合スコア806

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

たとえばこうすればよいのでは?

投稿2020/05/01 13:03

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/05/01 13:03

$(function(){ $(window).on('scroll',function(){ var win_top=window.pageYOffset; var win_bottom=win_top+window.innerHeight; var obj_top=parseInt($('#section1').offset().top); var obj_bottom=parseInt(obj_top+$('#section1').height()); console.log([win_top,win_bottom,obj_top,obj_bottom]); }); });
rrgsn

2020/05/01 13:13

申し訳ございません、初心者で恐縮なのですが こちらはどうなる仕様なのでしょうか... test.jsに記載はしてみたものの、変化もなく... 前提としてjqueryが正常に作動していない問題があるので、 そちらを先に解決しないとアニメーションまではいけないようです...
yambejp

2020/05/01 13:16

ウィンドウの表示位置とオブジェクトの位置を表示しています ウィンドウのtop/bottomの間に、オブジェクトのtop/bottomの いずれかまたは両方が入ったときに発動してください
rrgsn

2020/05/01 13:46

なるほど,,,, 作動はしないので、引き続き問題点調査します...... <script>で囲んでhtmlに記載した場合、正常に作動したケースもありましたが、 ~.js上での記載だとうまく作動しない原因は何が考えられるでしょうか....
nekora

2020/05/06 01:04

ファイルの入ってるディレクトリの階層を公開していただき、jsファイルの読み込み部分のソースコードを公開していただければ、参照している階層が間違っているなどのアドバイスが出来るかもです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問