ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
新着のお知らせはありません
PREMIUM
詳解JavaScript Intersection Observer API編
ある要素が特定の領域と交差したかを監視することができるJavaScriptのIntersection Observer APIについて見ていきます。
0%
動画レッスン一覧
(13)
質問と回答
(25)
未完了
#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の挙動
処理の設定
#04 処理が実行されるタイミングを知ろう
IntersectionObeserver クラスの引数に、callback 関数を渡す処理がわかりません
2022年1月27日
なぜ callback() としていないのに関数を呼び出せているのですか?
2022年1月27日
IntersectionObserver クラスはブラウザ側で用意しているため、以前のレッスンの Post クラスのように作る必要はないのですか?
2022年1月27日
intersectionObserver のインスタンスを作るというのがわかりません
2022年1月27日
#06 交差した要素の情報を取得しよう
IntersectionObserver の引数に関数名 callback を渡せるのはなぜですか?
2022年1月27日
「交差したターゲットの処理を引数で受け取る」とはどういう意味ですか?
2022年1月27日
entries とはなんですか?
2022年1月27日
callback 関数の引数に配列を渡す意味がわかりません
2022年1月27日
#08 要素が交差したらふわっと表示させよう
クラスをつける要素を取得する際に、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日
#11 targetの監視を止めてみよう
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 すべての要素に処理を設定しよう
forEach の処理がどうなっているのかよくわかりません
2022年3月2日
それぞれのセクションで出現する際の動きを変えるにはどうすればよいですか?
2022年1月27日
右側のライオンが表示されないのはなぜですか?
2022年1月27日
このレッスンの方法でページ上部へ戻るボタンを作ったのですが、うまくいきません
2022年1月27日
ギャラリー
このレッスンについて
最終更新日
2021年3月10日
バージョン情報
Chrome 88 / Visual Studio Code 1.53.2
関連キーワード
(4)
基礎講座
(343)
初心者向け
(342)
JavaScript
(137)
ウェブサイト構築
(155)
このレッスンを共有する