prof3ssorSt3v3/intersection.html

## intersection.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Intersection Observer</title>
    <style>
      .container {
        margin: 150px;
      }
      .container p {
        color: #777;
        font-size: 1.6rem;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        line-height: 1.6;
        padding: 1rem;
        border: 1px solid #eee;
        margin: 1rem 0;
        transform: translateX(-100%);
        transition: transform 0.5s linear;
        /* opacity: 0; */
      }
      .container p.active {
        opacity: 1;
        transform: translateX(0);
      }
      .container p:nth-child(5n) {
        color: cornflowerblue;
      }
      .cover {
        position: fixed;
        top: 250px;
        right: 50px;
        bottom: 250px;
        left: 50px;
        background-color: hsla(30deg, 40%, 80%, 0.5);
      }
    </style>
  </head>
  <body>
    <!-- container div has 30 paragraphs with lorem ipsum text -->
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus
        maxime placeat quos ducimus vero maiores quisquam nisi dolorem soluta
        ab! Similique ab praesentium ipsam, quos ea voluptatum placeat
        reprehenderit nam!
      </p>
      <p>
        Quam suscipit fugit possimus culpa delectus nisi iste, dignissimos
        accusantium odio consequuntur est corrupti voluptate dolor repudiandae
        autem, nulla corporis. Qui nisi sit enim rerum a ipsum dolorum
        exercitationem corrupti.
      </p>
      <p>
        Temporibus cupiditate voluptas fugit tenetur reprehenderit doloribus
        laudantium distinctio dolore, maxime quos praesentium nostrum quaerat
        architecto molestiae, nesciunt voluptatem deleniti veniam minus.
        Laborum, sapiente reprehenderit? Distinctio aliquam aliquid quo
        veritatis.
      </p>
      <p>
        Nostrum officia accusantium aliquid distinctio amet sit. Magni enim
        dicta fuga, qui alias debitis vel, cupiditate aperiam cum, ut
        blanditiis. Et cumque quidem eius minima optio molestias perferendis
        amet omnis?
      </p>
      <p>
        Ex fugiat maiores impedit enim facilis, magnam pariatur, aliquid ut id
        sequi laudantium mollitia tenetur nemo rem ratione ea in quo quidem,
        voluptatibus aliquam quia dolorum voluptatum debitis. Minima, veniam.
      </p>
      <p>
        Cumque molestiae quas illum incidunt ipsa sequi cupiditate rem sapiente
        nulla exercitationem corporis porro itaque temporibus in aperiam
        consequatur eum voluptas officia, velit voluptatum! Pariatur aperiam
        omnis dolores quaerat assumenda!
      </p>
      <p>
        Odio vel at corporis sint necessitatibus inventore earum, expedita
        obcaecati asperiores est repellat, ipsum deleniti ad commodi assumenda
        error quisquam dignissimos cupiditate distinctio quidem corrupti
        repellendus delectus. Tempore, placeat aperiam.
      </p>
      <p>
        Adipisci sapiente a excepturi, expedita veritatis autem sed animi rem
        quod voluptas possimus ea eos accusantium cum maiores! Harum dolores
        nihil magnam delectus saepe, sed reiciendis in praesentium expedita
        perferendis.
      </p>
      <p>
        Mollitia magni sint necessitatibus, ratione sequi repellendus itaque
        eaque provident temporibus velit corrupti, consectetur saepe laudantium
        sed odit culpa exercitationem eum. Dolores quis sunt iusto a cum quas
        tempore perferendis.
      </p>
      <p>
        Quidem aspernatur non esse reprehenderit expedita porro mollitia ex
        soluta enim inventore corporis voluptatem provident eius excepturi
        tempora natus animi, sint, cumque sequi, officia voluptatum? At nisi
        incidunt sint illo.
      </p>
      <p>
        Fugiat dignissimos rem odit pariatur vero nam unde iste incidunt ullam
        esse perspiciatis alias officia animi officiis, possimus laudantium
        voluptates saepe, nisi quia dolore? Consequuntur corrupti numquam odio
        praesentium assumenda.
      </p>
      <p>
        Corporis, in iste natus, ipsa necessitatibus cupiditate pariatur
        accusantium nihil cum architecto neque dolore velit qui ratione hic
        culpa dignissimos! Similique, saepe ullam! Eum alias quasi omnis fugit
        iste voluptatum.
      </p>
      <p>
        Similique voluptas eaque voluptatem velit molestias atque iusto nulla.
        Delectus facilis fugiat eligendi rerum. Quod quo quisquam, ipsum impedit
        nobis nemo eos illum possimus quidem consequatur facilis quis! Expedita,
        corporis.
      </p>
      <p>
        Autem quo itaque temporibus iste magni libero aut nisi, excepturi eos,
        et ea omnis, numquam nobis dolore inventore accusamus cumque aliquam
        saepe sint nemo repudiandae. Est modi soluta dignissimos fuga?
      </p>
      <p>
        Dolores architecto, corrupti similique aliquid eum repudiandae eaque ut,
        earum nostrum possimus voluptatem cupiditate reiciendis hic animi
        impedit, ab autem inventore quod ex quasi? Obcaecati quisquam
        perferendis tempora pariatur ex?
      </p>
      <p>
        Ipsa dolorem fuga quod labore quam iusto odio quae debitis, dignissimos
        amet assumenda voluptate saepe excepturi repellendus pariatur adipisci
        omnis temporibus tempore voluptatum aut. Quae ipsam laudantium maxime
        odit laboriosam.
      </p>
      <p>
        Adipisci placeat accusantium voluptas voluptates officiis nobis iure
        aliquam ut veniam ex corporis iusto aperiam inventore itaque
        voluptatibus omnis repudiandae magni sequi, molestiae illo iste fugit
        mollitia laudantium dignissimos! Dolorem.
      </p>
      <p>
        Debitis perferendis reiciendis esse velit repellendus fugiat voluptates
        harum ipsa aliquid quisquam illo corrupti aut, error molestiae iusto id
        consequuntur soluta nam quibusdam fuga ut molestias perspiciatis
        deserunt. Voluptatum, debitis!
      </p>
      <p>
        Dicta voluptatem repudiandae modi expedita beatae ad perspiciatis hic
        deleniti explicabo fugit tempore praesentium quo sit quibusdam ipsam,
        velit eos debitis nobis dolore maxime iste neque repellat incidunt.
        Aspernatur, voluptate.
      </p>
      <p>
        Pariatur maiores quos libero veritatis aut blanditiis, mollitia at nobis
        illum odit eius amet voluptatibus debitis quas tenetur laudantium dolor
        inventore atque vel porro in facilis similique molestiae! Soluta,
        impedit.
      </p>
      <p>
        Rerum, harum beatae sequi distinctio voluptatem quos et veniam laborum
        itaque dolores accusantium porro perspiciatis magni eveniet aliquid a
        libero maiores. Dolorum nostrum quasi, beatae similique ratione quisquam
        quos dolore?
      </p>
      <p>
        Numquam explicabo quo reprehenderit fugit aut veritatis, suscipit
        cumque, incidunt, enim odit nihil consectetur facere natus voluptatum
        dolores eaque officia cum aspernatur ea beatae modi. Ratione nihil
        repudiandae voluptatibus dolor.
      </p>
      <p>
        Est consequatur recusandae, deserunt voluptatibus veritatis id accusamus
        magni, doloribus possimus eaque rem sint. Quae ea voluptates voluptatem
        cumque sint nobis. Perspiciatis dignissimos iste qui dolores placeat
        praesentium blanditiis aperiam.
      </p>
      <p>
        Incidunt, in nisi dicta amet quam culpa, maiores ullam autem esse
        tempore consectetur nam illum quos debitis magni obcaecati, cupiditate
        vitae. Quae illo nemo aspernatur voluptatibus asperiores. Omnis, placeat
        voluptatibus.
      </p>
      <p>
        Odit rem ullam optio aliquam earum, illum cum dolor quos voluptate
        libero impedit commodi iure repellat obcaecati minus dolore cupiditate
        excepturi ad pariatur repellendus laborum omnis nemo! Quae,
        necessitatibus harum.
      </p>
      <p>
        Assumenda quam vero culpa nobis consectetur enim dolores quae autem
        aliquid eum dicta quia nisi sunt quod velit recusandae aperiam sint,
        debitis facilis nemo architecto reiciendis at. Reprehenderit, modi
        nobis.
      </p>
      <p>
        Dolorum atque obcaecati dolor earum adipisci ab exercitationem. Enim
        esse quaerat deserunt itaque, animi, ipsa rerum incidunt obcaecati iusto
        consequuntur debitis similique, non facere repellat soluta. Inventore
        repellendus in magnam.
      </p>
      <p>
        Facilis suscipit dolor aliquam commodi consequatur laborum eius deserunt
        perferendis, quod rem ducimus maxime similique voluptas. Doloremque
        eaque ducimus vitae neque necessitatibus, pariatur cum obcaecati, minima
        reprehenderit repellat aliquam enim!
      </p>
      <p>
        Iure sunt deserunt placeat iusto asperiores harum fuga libero laborum
        tempora! Veniam distinctio eveniet natus dignissimos, incidunt quia quos
        iste non deleniti iure. Excepturi, totam minus! Eos quae perspiciatis
        nulla!
      </p>
      <p>
        Illo similique asperiores voluptate distinctio reiciendis dolorem quis
        ad nisi suscipit modi temporibus reprehenderit omnis totam ipsa corporis
        eaque aliquam earum dolorum, minima voluptates blanditiis. Sit assumenda
        cumque quae facere.
      </p>
    </div>
    <div class="cover">&nbsp;</div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        let options = {
          root: null,
          rootMargin: "-250px -50px",
          threshold: 0.05
        };
        let observer = new IntersectionObserver(beTouching, options);
        document.querySelectorAll(".container p").forEach(p => {
          observer.observe(p);
          //console.log("watching", p.textContent);
        });
      });
      function beTouching(entries, ob) {
        //entries all 30 paragraphs
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            console.log("intersecting");
            //console.log(entry.target);
            //console.log(entry.time, entry.intersectionRatio);
            entry.target.classList.add("active");
            //ob.unobserve(entry.target);
          } else {
            entry.target.classList.remove("active");
          }
        });
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Intersection Observer</title>
	<style>
	.container {
	margin: 150px;
	}
	.container p {
	color: #777;
	font-size: 1.6rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	line-height: 1.6;
	padding: 1rem;
	border: 1px solid #eee;
	margin: 1rem 0;
	transform: translateX(-100%);
	transition: transform 0.5s linear;
	/* opacity: 0; */
	}
	.container p.active {
	opacity: 1;
	transform: translateX(0);
	}
	.container p:nth-child(5n) {
	color: cornflowerblue;
	}
	.cover {
	position: fixed;
	top: 250px;
	right: 50px;
	bottom: 250px;
	left: 50px;
	background-color: hsla(30deg, 40%, 80%, 0.5);
	}
	</style>
	</head>
	<body>
	<!-- container div has 30 paragraphs with lorem ipsum text -->
	<div class="container">
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus
	maxime placeat quos ducimus vero maiores quisquam nisi dolorem soluta
	ab! Similique ab praesentium ipsam, quos ea voluptatum placeat
	reprehenderit nam!
	</p>
	<p>
	Quam suscipit fugit possimus culpa delectus nisi iste, dignissimos
	accusantium odio consequuntur est corrupti voluptate dolor repudiandae
	autem, nulla corporis. Qui nisi sit enim rerum a ipsum dolorum
	exercitationem corrupti.
	</p>
	<p>
	Temporibus cupiditate voluptas fugit tenetur reprehenderit doloribus
	laudantium distinctio dolore, maxime quos praesentium nostrum quaerat
	architecto molestiae, nesciunt voluptatem deleniti veniam minus.
	Laborum, sapiente reprehenderit? Distinctio aliquam aliquid quo
	veritatis.
	</p>
	<p>
	Nostrum officia accusantium aliquid distinctio amet sit. Magni enim
	dicta fuga, qui alias debitis vel, cupiditate aperiam cum, ut
	blanditiis. Et cumque quidem eius minima optio molestias perferendis
	amet omnis?
	</p>
	<p>
	Ex fugiat maiores impedit enim facilis, magnam pariatur, aliquid ut id
	sequi laudantium mollitia tenetur nemo rem ratione ea in quo quidem,
	voluptatibus aliquam quia dolorum voluptatum debitis. Minima, veniam.
	</p>
	<p>
	Cumque molestiae quas illum incidunt ipsa sequi cupiditate rem sapiente
	nulla exercitationem corporis porro itaque temporibus in aperiam
	consequatur eum voluptas officia, velit voluptatum! Pariatur aperiam
	omnis dolores quaerat assumenda!
	</p>
	<p>
	Odio vel at corporis sint necessitatibus inventore earum, expedita
	obcaecati asperiores est repellat, ipsum deleniti ad commodi assumenda
	error quisquam dignissimos cupiditate distinctio quidem corrupti
	repellendus delectus. Tempore, placeat aperiam.
	</p>
	<p>
	Adipisci sapiente a excepturi, expedita veritatis autem sed animi rem
	quod voluptas possimus ea eos accusantium cum maiores! Harum dolores
	nihil magnam delectus saepe, sed reiciendis in praesentium expedita
	perferendis.
	</p>
	<p>
	Mollitia magni sint necessitatibus, ratione sequi repellendus itaque
	eaque provident temporibus velit corrupti, consectetur saepe laudantium
	sed odit culpa exercitationem eum. Dolores quis sunt iusto a cum quas
	tempore perferendis.
	</p>
	<p>
	Quidem aspernatur non esse reprehenderit expedita porro mollitia ex
	soluta enim inventore corporis voluptatem provident eius excepturi
	tempora natus animi, sint, cumque sequi, officia voluptatum? At nisi
	incidunt sint illo.
	</p>
	<p>
	Fugiat dignissimos rem odit pariatur vero nam unde iste incidunt ullam
	esse perspiciatis alias officia animi officiis, possimus laudantium
	voluptates saepe, nisi quia dolore? Consequuntur corrupti numquam odio
	praesentium assumenda.
	</p>
	<p>
	Corporis, in iste natus, ipsa necessitatibus cupiditate pariatur
	accusantium nihil cum architecto neque dolore velit qui ratione hic
	culpa dignissimos! Similique, saepe ullam! Eum alias quasi omnis fugit
	iste voluptatum.
	</p>
	<p>
	Similique voluptas eaque voluptatem velit molestias atque iusto nulla.
	Delectus facilis fugiat eligendi rerum. Quod quo quisquam, ipsum impedit
	nobis nemo eos illum possimus quidem consequatur facilis quis! Expedita,
	corporis.
	</p>
	<p>
	Autem quo itaque temporibus iste magni libero aut nisi, excepturi eos,
	et ea omnis, numquam nobis dolore inventore accusamus cumque aliquam
	saepe sint nemo repudiandae. Est modi soluta dignissimos fuga?
	</p>
	<p>
	Dolores architecto, corrupti similique aliquid eum repudiandae eaque ut,
	earum nostrum possimus voluptatem cupiditate reiciendis hic animi
	impedit, ab autem inventore quod ex quasi? Obcaecati quisquam
	perferendis tempora pariatur ex?
	</p>
	<p>
	Ipsa dolorem fuga quod labore quam iusto odio quae debitis, dignissimos
	amet assumenda voluptate saepe excepturi repellendus pariatur adipisci
	omnis temporibus tempore voluptatum aut. Quae ipsam laudantium maxime
	odit laboriosam.
	</p>
	<p>
	Adipisci placeat accusantium voluptas voluptates officiis nobis iure
	aliquam ut veniam ex corporis iusto aperiam inventore itaque
	voluptatibus omnis repudiandae magni sequi, molestiae illo iste fugit
	mollitia laudantium dignissimos! Dolorem.
	</p>
	<p>
	Debitis perferendis reiciendis esse velit repellendus fugiat voluptates
	harum ipsa aliquid quisquam illo corrupti aut, error molestiae iusto id
	consequuntur soluta nam quibusdam fuga ut molestias perspiciatis
	deserunt. Voluptatum, debitis!
	</p>
	<p>
	Dicta voluptatem repudiandae modi expedita beatae ad perspiciatis hic
	deleniti explicabo fugit tempore praesentium quo sit quibusdam ipsam,
	velit eos debitis nobis dolore maxime iste neque repellat incidunt.
	Aspernatur, voluptate.
	</p>
	<p>
	Pariatur maiores quos libero veritatis aut blanditiis, mollitia at nobis
	illum odit eius amet voluptatibus debitis quas tenetur laudantium dolor
	inventore atque vel porro in facilis similique molestiae! Soluta,
	impedit.
	</p>
	<p>
	Rerum, harum beatae sequi distinctio voluptatem quos et veniam laborum
	itaque dolores accusantium porro perspiciatis magni eveniet aliquid a
	libero maiores. Dolorum nostrum quasi, beatae similique ratione quisquam
	quos dolore?
	</p>
	<p>
	Numquam explicabo quo reprehenderit fugit aut veritatis, suscipit
	cumque, incidunt, enim odit nihil consectetur facere natus voluptatum
	dolores eaque officia cum aspernatur ea beatae modi. Ratione nihil
	repudiandae voluptatibus dolor.
	</p>
	<p>
	Est consequatur recusandae, deserunt voluptatibus veritatis id accusamus
	magni, doloribus possimus eaque rem sint. Quae ea voluptates voluptatem
	cumque sint nobis. Perspiciatis dignissimos iste qui dolores placeat
	praesentium blanditiis aperiam.
	</p>
	<p>
	Incidunt, in nisi dicta amet quam culpa, maiores ullam autem esse
	tempore consectetur nam illum quos debitis magni obcaecati, cupiditate
	vitae. Quae illo nemo aspernatur voluptatibus asperiores. Omnis, placeat
	voluptatibus.
	</p>
	<p>
	Odit rem ullam optio aliquam earum, illum cum dolor quos voluptate
	libero impedit commodi iure repellat obcaecati minus dolore cupiditate
	excepturi ad pariatur repellendus laborum omnis nemo! Quae,
	necessitatibus harum.
	</p>
	<p>
	Assumenda quam vero culpa nobis consectetur enim dolores quae autem
	aliquid eum dicta quia nisi sunt quod velit recusandae aperiam sint,
	debitis facilis nemo architecto reiciendis at. Reprehenderit, modi
	nobis.
	</p>
	<p>
	Dolorum atque obcaecati dolor earum adipisci ab exercitationem. Enim
	esse quaerat deserunt itaque, animi, ipsa rerum incidunt obcaecati iusto
	consequuntur debitis similique, non facere repellat soluta. Inventore
	repellendus in magnam.
	</p>
	<p>
	Facilis suscipit dolor aliquam commodi consequatur laborum eius deserunt
	perferendis, quod rem ducimus maxime similique voluptas. Doloremque
	eaque ducimus vitae neque necessitatibus, pariatur cum obcaecati, minima
	reprehenderit repellat aliquam enim!
	</p>
	<p>
	Iure sunt deserunt placeat iusto asperiores harum fuga libero laborum
	tempora! Veniam distinctio eveniet natus dignissimos, incidunt quia quos
	iste non deleniti iure. Excepturi, totam minus! Eos quae perspiciatis
	nulla!
	</p>
	<p>
	Illo similique asperiores voluptate distinctio reiciendis dolorem quis
	ad nisi suscipit modi temporibus reprehenderit omnis totam ipsa corporis
	eaque aliquam earum dolorum, minima voluptates blanditiis. Sit assumenda
	cumque quae facere.
	</p>
	</div>
	<div class="cover"> </div>
	<script>
	document.addEventListener("DOMContentLoaded", () => {
	let options = {
	root: null,
	rootMargin: "-250px -50px",
	threshold: 0.05
	};
	let observer = new IntersectionObserver(beTouching, options);
	document.querySelectorAll(".container p").forEach(p => {
	observer.observe(p);
	//console.log("watching", p.textContent);
	});
	});
	function beTouching(entries, ob) {
	//entries all 30 paragraphs
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	console.log("intersecting");
	//console.log(entry.target);
	//console.log(entry.time, entry.intersectionRatio);
	entry.target.classList.add("active");
	//ob.unobserve(entry.target);
	} else {
	entry.target.classList.remove("active");
	}
	});
	}
	</script>
	</body>
	</html>