ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/12/07
NEW
【週刊ドットインストール】 レッスン制作の進捗、代表のひとりごと
PREMIUM
詳解JavaScript Intersection Observer API編
ある要素が特定の領域と交差したかを監視することができるJavaScriptのIntersection Observer APIについて見ていきます。
0%
動画レッスン一覧
(13)
質問と回答
(45)
未完了
#01 Intersection Observer APIを使ってみよう
(02:03)
無料公開中
概要の説明
target
root
Intersection Ratio
APIの用途
未完了
#02 学習の準備を整えよう
(02:09)
無料公開中
素材の紹介
index.htmlの作成
コンソールの表示
未完了
#03 コンテンツを配置していこう
(02:08)
無料公開中
要素の配置
main.jsの作成
未完了
#04 処理が実行されるタイミングを知ろう
(02:56)
targetの取得
observerの設定
targetの監視
処理の実行タイミング
未完了
#05 thresholdを指定してみよう
(02:07)
thresholdオプション
複数の値の指定方法
未完了
#06 交差した要素の情報を取得しよう
(02:54)
intersectionRatio
isIntersecting
target
未完了
#07 CSSアニメーションの設定をしよう
(02:04)
styles.cssの作成
CSSアニメーションの設定
未完了
#08 要素が交差したらふわっと表示させよう
(02:18)
クラスの付け外し
早期リターン
未完了
#09 root、rootMarginについて見ていこう
(02:58)
root
rootMargin
未完了
#10 rootMarginを使ってみよう
(01:57)
rootMarginの設定
rootMargin指定時の注意点
動作確認
未完了
#11 targetの監視を止めてみよう
(02:29)
callbackの第2引数
unobserve()
未完了
#12 監視対象を増やしてみよう
(01:30)
要素の設置
コードの改変
未完了
#13 すべての要素に処理を設定しよう
(02:45)
entriesの挙動
処理の設定
#02 学習の準備を整えよう
デベロッパーツールが画面右に表示されてしまいます
2022年7月23日
#04 処理が実行されるタイミングを知ろう
IntersectionObserver(callback) の仕組みが理解できません
2022年9月29日
2 回目の fired! が表示されません
2022年8月23日
それぞれの処理で何が起きているのかわかりません...
2022年6月3日
IntersectionObeserver クラスの引数に、callback 関数を渡す処理がわかりません
2022年1月27日
なぜ callback() としていないのに関数を呼び出せているのですか?
2022年1月27日
IntersectionObserver クラスはブラウザ側で用意しているため、以前のレッスンの Post クラスのように作る必要はないのですか?
2022年1月27日
intersectionObserver のインスタンスを作るというのがわかりません
2022年1月27日
#05 thresholdを指定してみよう
document オブジェクトはいつ生成されるのですか?
2023年4月12日
thresholdの書き方について
2022年5月24日
#06 交差した要素の情報を取得しよう
どのようにして callback 関数に target が渡されるのですか?
2022年9月29日
entries というのはただの変数名ですか?
2022年6月3日
IntersectionObserver の引数に関数名 callback を渡せるのはなぜですか?
2022年1月27日
「交差したターゲットの処理を引数で受け取る」とはどういう意味ですか?
2022年1月27日
entries とはなんですか?
2022年1月27日
callback 関数の引数に配列を渡す意味がわかりません
2022年1月27日
#08 要素が交差したらふわっと表示させよう
img 挙動に関して、正しい解釈かどうかを教えてください
2023年3月2日
isIntersecting は何のために使っているのでしょうか?
2022年6月1日
なぜ entries[0].target.classList.add('appear'); で target が必要なのですか?
2022年6月3日
target についてより詳しく教えてください
2022年5月24日
クラスをつける要素を取得する際に、entries[0] と書くのはなぜですか?
2022年1月27日
if 文の entries[0] は書かなくてもよいのですか?
2022年1月27日
コメントのショートカットが使えません
2022年1月27日
entries などの引数を指定できることに自力で気づける自信がありません
2022年1月27日
appear クラスをつける際に entries[0].target.classList.toggle('appear'); と書いても大丈夫ですか?
2022年1月27日
早期 return する意味は何ですか?
2022年1月27日
if (!entries[0].isIntersecting) の ! は「〜ではない」の意味ですか?
2022年1月27日
if (entries[0].isIntersecting) {entries[0].target.classList.add('appear');} でも同じ動作になりますが、どちらが正しいですか?
2022年1月27日
#10 rootMarginを使ってみよう
rootMargin: '0px 0px -100px', の値はそれぞれ何を意味しているのですか?
2022年10月28日
なぜ rootMargin を指定するとき、文字列で書いたのですか?
2022年6月10日
#11 targetの監視を止めてみよう
entries[0].isIntersecting と entries[0].target の違いがわかりません
2022年7月9日
unobserve() は廃止されている、と書いてあるのですが...
2022年5月18日
早期 return しているのに obs.unobserve(entries[0].target) が処理されるのはなぜですか?
2022年4月4日
obs がなんなのか理解できません
2022年1月27日
callback 関数の引数 observer の名前を変更しても正常に動作しましたが、 entries も変更可能ですか?
2022年1月27日
試しに作ったコードで obs.unobserve(entries[0].target); がうまく動作しなかったのですが、なぜでしょうか?
2022年1月27日
#13 すべての要素に処理を設定しよう
obs.unobserve(entry.target) は IntersectionObserver を一度表示した後に実行されるのはなぜですか?
2022年11月20日
画像が横並びになるのはなぜですか?
2022年7月9日
targets.forEach() はコードの最初の方に書いてはいけないのですか?
2022年7月9日
target が何を指しているのかわかりません
2022年5月24日
コードを少し書き換えると、entries 配列の要素の数が 1 つになってしまいます
2022年6月1日
forEach の処理がどうなっているのかよくわかりません
2022年3月2日
それぞれのセクションで出現する際の動きを変えるにはどうすればよいですか?
2022年1月27日
右側のライオンが表示されないのはなぜですか?
2022年1月27日
このレッスンの方法でページ上部へ戻るボタンを作ったのですが、うまくいきません
2022年1月27日
リリース情報(note)
『詳解JavaScript Intersection Observer API編』をリリースしました。
関連キーワード
基礎講座
(386)
初心者向け
(379)
JavaScript
(158)
ウェブサイト構築
(155)
詳細情報
最終更新日
2021年3月10日
バージョン情報
Chrome 88 / Visual Studio Code 1.53.2