<header>
  <h1>Intersection Observer Demo</h1>
</header>

<div class="container">
  <p>Change shape cold immunity constrict dazed dispel domain spell effective character level fighter figment subschool huge illusion magical beast type natural weapon player character powerful charge reptilian subtype staggered take 10.</p>

  <p>Ability damaged angel subtype copper piece creation subschool creature type drow domain flight hardness natural reach negative energy pounce reaction rebuke undead rend subschool transmutation turning check.</p>

  <img class="fade-in" src="https://unsplash.it/400" width="400" height="400">

  <p>Archon subtype automatic hit change shape ethereal evil subtype fatigued free action heat dangers huge melee touch attack nonplayer character ocean domain panicked ranged attack shadow subschool spell immunity surprise swallow whole thirst tremorsense water subtype.
  <p>

  <p>Baatezu subtype barbarian character destruction domain diminutive druid eladrin subtype evil subtype fire domain fortitude save material plane negative energy plane reach weapon saving throw school of magic space spider domain swift action transitive plane untrained war domain.</p>

  <p>Ability score chaotic subtype cowering craft domain fear cone force damage living silver piece summoning subschool tanar'ri subtype turn resistance wisdom. Baatezu subtype bonus creation subschool divination druid fear aura granted power lawful magical beast type mentalism domain nauseated sorcerer spell domain total concealment travel domain.</p>

  <img class="fade-in" src="https://unsplash.it/401" width="400" height="400">

  <img class="fade-in" src="https://source.unsplash.com/random" width="400" height="400">

  <p>Ability score alternate form base land speed bolster undead class class skill conjuration creature type dispel drow domain dungeon master elemental type engaged fear effect good subtype initiative count lawful natural reach paralyzed pattern subschool resistance bonus rune domain special ability spell vermin type.</p>

  <p>5-foot step bolster undead character class confused copper piece difficult terrain direct a spell energy damage environment extraplanar fey type fly gnome domain hit die initiative natural nobility domain nonabilities reach weapon regeneration round saving throw sorcerer storm domain vermin type.</p>

  <p>Chaos domain circumstance bonus darkness domain diminutive drow domain enchantment improved evasion law domain luck domain negative energy poison size modifier swallow whole thrown weapon turn undead.</p>
  <p>Change shape cold immunity constrict dazed dispel domain spell effective character level fighter figment subschool huge illusion magical beast type natural weapon player character powerful charge reptilian subtype staggered take 10.</p>

  <p>Ability damaged angel subtype copper piece creation subschool creature type drow domain flight hardness natural reach negative energy pounce reaction rebuke undead rend subschool transmutation turning check.</p>

  <img class="fade-in" src="https://source.unsplash.com/random/?girl" height="400" width="400">

  <p>Archon subtype automatic hit change shape ethereal evil subtype fatigued free action heat dangers huge melee touch attack nonplayer character ocean domain panicked ranged attack shadow subschool spell immunity surprise swallow whole thirst tremorsense water subtype.
  <p>

  <p>Baatezu subtype barbarian character destruction domain diminutive druid eladrin subtype evil subtype fire domain fortitude save material plane negative energy plane reach weapon saving throw school of magic space spider domain swift action transitive plane untrained war domain.</p>

  <p>Ability score chaotic subtype cowering craft domain fear cone force damage living silver piece summoning subschool tanar'ri subtype turn resistance wisdom. Baatezu subtype bonus creation subschool divination druid fear aura granted power lawful magical beast type mentalism domain nauseated sorcerer spell domain total concealment travel domain.</p>

  <p>Ability score alternate form base land speed bolster undead class class skill conjuration creature type dispel drow domain dungeon master elemental type engaged fear effect good subtype initiative count lawful natural reach paralyzed pattern subschool resistance bonus rune domain special ability spell vermin type.</p>

  <p>5-foot step bolster undead character class confused copper piece difficult terrain direct a spell energy damage environment extraplanar fey type fly gnome domain hit die initiative natural nobility domain nonabilities reach weapon regeneration round saving throw sorcerer storm domain vermin type.</p>

  <p>Chaos domain circumstance bonus darkness domain diminutive drow domain enchantment improved evasion law domain luck domain negative energy poison size modifier swallow whole thrown weapon turn undead.</p>

  <p>Change shape cold immunity constrict dazed dispel domain spell effective character level fighter figment subschool huge illusion magical beast type natural weapon player character powerful charge reptilian subtype staggered take 10.</p>

  <p>Ability damaged angel subtype copper piece creation subschool creature type drow domain flight hardness natural reach negative energy pounce reaction rebuke undead rend subschool transmutation turning check.</p>

  <p>Archon subtype automatic hit change shape ethereal evil subtype fatigued free action heat dangers huge melee touch attack nonplayer character ocean domain panicked ranged attack shadow subschool spell immunity surprise swallow whole thirst tremorsense water subtype.
  <p>

  <p>Baatezu subtype barbarian character destruction domain diminutive druid eladrin subtype evil subtype fire domain fortitude save material plane negative energy plane reach weapon saving throw school of magic space spider domain swift action transitive plane untrained war domain.</p>

  <p>Ability score chaotic subtype cowering craft domain fear cone force damage living silver piece summoning subschool tanar'ri subtype turn resistance wisdom. Baatezu subtype bonus creation subschool divination druid fear aura granted power lawful magical beast type mentalism domain nauseated sorcerer spell domain total concealment travel domain.</p>

  <p>Ability score alternate form base land speed bolster undead class class skill conjuration creature type dispel drow domain dungeon master elemental type engaged fear effect good subtype initiative count lawful natural reach paralyzed pattern subschool resistance bonus rune domain special ability spell vermin type.</p>

  <p>5-foot step bolster undead character class confused copper piece difficult terrain direct a spell energy damage environment extraplanar fey type fly gnome domain hit die initiative natural nobility domain nonabilities reach weapon regeneration round saving throw sorcerer storm domain vermin type.</p>

  <img class="fade-in" src="https://source.unsplash.com/random/?dance" width="400" height="400">

  <p>Chaos domain circumstance bonus darkness domain diminutive drow domain enchantment improved evasion law domain luck domain negative energy poison size modifier swallow whole thrown weapon turn undead.</p>
</div>

@import "https://unpkg.com/open-props";

:root {
  font-family: var(--font-sans);
}

header {
  height: 600px;
  background-color: var(--purple-12);
  color: var(--gray-0);
  margin: 0;
  display: flex;
  flex-flow: column;
  place-content: center;
  align-items: center;
}

.container {
  width: 80ch;
  margin: 0 auto;
}

p {
  font-size: var(--font-size-4);
}

.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

.fade-in.appear {
  opacity: 1;
}

const faders = document.querySelectorAll(".fade-in");

const appearOptions = {
  threshold: 0,
  rootMargin: "50px 0px 50px 0px"
};

const appearOnScroll = new IntersectionObserver(function (
  entries,
  appearOnScroll
) {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      return;
    } else {
      console.log(entry.target);
      entry.target.classList.add("appear");
      appearOnScroll.unobserve(entry.target);
    }
  });
},
appearOptions);

faders.forEach((fader) => {
  appearOnScroll.observe(fader);
});