Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="doom-damage"></div>
<main>
  <h1>Scroll Down, Take Doom Damage</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo minima repellendus aut reprehenderit, neque aliquid accusamus non corporis ratione necessitatibus incidunt molestias ut, temporibus ad facere, laboriosam beatae. Molestias, perferendis?</p>
  <p>In eveniet placeat maxime recusandae ipsam necessitatibus, ea exercitationem. Porro sapiente aliquid, cumque itaque possimus aliquam, dignissimos, quaerat temporibus voluptatum esse reiciendis impedit necessitatibus fugiat sed eaque error labore eius.</p>
  <p>Cupiditate dignissimos quam, eius neque distinctio aliquid reprehenderit beatae enim? Repudiandae cumque distinctio non accusamus dolore, necessitatibus labore suscipit corporis quisquam exercitationem perspiciatis neque error laborum sequi hic. Neque, temporibus!</p>
  <p>Impedit beatae vel praesentium nesciunt repellat! Corrupti voluptate odit voluptatum, inventore quibusdam rerum nobis, fugiat perferendis ducimus doloribus, adipisci dolorem culpa alias neque esse hic est error perspiciatis aut nam!</p>
  <p>Eligendi adipisci esse iste deleniti tempore ipsam aspernatur necessitatibus accusantium ut officia vitae porro ipsum assumenda repellendus, explicabo provident error nobis. Autem quia quis, reprehenderit aliquid placeat earum voluptas aperiam?</p>
  <p>Similique maiores ipsam nam a facilis nobis mollitia aliquam culpa necessitatibus error recusandae magni, itaque beatae dolore aliquid numquam minima quaerat officia optio! Nobis amet ratione unde est voluptatum hic.</p>
  <p>Aut quisquam, aliquam, commodi est doloribus vero quia tenetur molestiae ab error magni minus iste. Tenetur earum rerum accusamus recusandae, cum omnis ab nobis, quisquam aut sint reiciendis at laudantium.</p>
  <p>Pariatur possimus officiis perferendis. Possimus dolorum perferendis, obcaecati, quod mollitia ullam doloremque animi quisquam, ab quia porro rem aliquam dolores vero dolore expedita ex sunt accusantium neque sed asperiores. Voluptas!</p>
  <p>Repudiandae nisi porro dolores quas, animi itaque natus deleniti. Vitae est eum cupiditate vero nulla animi error fugit! Enim, mollitia architecto. Ut, dolores. Eius ipsum repudiandae eveniet, iure expedita illum.</p>
  <p>Cum praesentium aliquam ad illum harum aut voluptatibus sunt necessitatibus aperiam! Doloribus provident magnam eaque ullam temporibus illo labore sunt deserunt cupiditate sed. Doloremque nam repellendus atque amet minus ut?</p>
  <p>Nihil, expedita. Sed animi cumque quidem ea perspiciatis rerum at officia dicta neque quae consequuntur vel sint dolor earum fuga fugit consectetur placeat tempora, ut voluptatem odit dolorum, quod atque!</p>
  <p>Ex incidunt, repellat voluptatibus minus provident itaque nostrum magnam iure voluptates, dolorum consectetur mollitia corporis. Dolore voluptatem ex et placeat, sint molestiae aut laboriosam assumenda libero inventore, obcaecati hic voluptatum!</p>
  <p>Ullam expedita odit sint dolore, molestiae inventore laboriosam? Iure, quisquam minus commodi dicta iste exercitationem repellendus, quasi voluptas fugiat fugit laudantium vero in, mollitia totam laborum earum porro ipsa? Provident.</p>
  <p>Illum laboriosam deleniti fuga nihil debitis voluptas facilis eveniet ratione, consequuntur earum? Nam, suscipit facilis. Nemo eligendi accusamus eum, facilis nostrum magnam rem deleniti dolores harum maxime, assumenda vero reiciendis.</p>
  <p>Inventore molestias sapiente quisquam at iure harum, cupiditate molestiae? Veniam mollitia animi, eius delectus porro sapiente est necessitatibus deleniti alias impedit obcaecati. Voluptatum laboriosam nulla at, nisi iure non minima.</p>
  <p>Sit perspiciatis cumque reiciendis quam corporis, non esse illum ipsam distinctio, ab magni earum quibusdam alias soluta, quidem beatae adipisci saepe impedit rem sunt. Quasi, doloremque? Vitae repellat recusandae voluptate.</p>
  <p>Rerum ab consequuntur itaque, hic, sed qui nostrum accusantium blanditiis quibusdam nisi quaerat, veritatis reiciendis. Eaque quaerat fuga, ratione commodi cumque voluptates nemo libero placeat harum dignissimos, quos error voluptas?</p>
  <p>Deserunt laboriosam numquam, aliquid cum facere dicta totam provident saepe officia deleniti. Odio mollitia voluptate pariatur adipisci sed sequi soluta nihil voluptatibus maiores provident molestias quibusdam optio, veritatis magnam voluptatem!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio temporibus in ea provident facere, qui enim ducimus labore cumque aperiam vel tempora odit at ratione consectetur voluptates, illum eaque explicabo.</p>
  <p>Vel ea libero, dignissimos consectetur neque repellendus dolorum nam ullam alias reprehenderit quas quam ipsa magnam nostrum suscipit quibusdam nesciunt eaque inventore labore architecto asperiores aut nobis sunt ipsum. Sed.</p>
  <p>Quia eveniet aperiam illo! Earum, placeat ut! Quam iste delectus est rem excepturi deserunt, officia dolorem nobis laboriosam cumque optio. Eveniet, harum voluptatibus quam dolor molestias voluptatem impedit nisi similique.</p>
  <p>Blanditiis alias, repudiandae eligendi ducimus fugiat vero eaque corporis doloremque veniam illum perspiciatis ea voluptas asperiores odit dolore quos sapiente. Quidem quo nisi a saepe, laboriosam pariatur asperiores sit? Animi.</p>
  <p>Facere nostrum quae provident. Maxime nam inventore sint fuga cupiditate, nostrum sunt recusandae, ducimus eveniet doloribus autem dicta temporibus saepe tempore modi possimus molestias consectetur officiis exercitationem magnam! Ab, earum!</p>
  <p>Recusandae odio nihil nostrum obcaecati sequi! Dicta ut, possimus enim alias voluptate et numquam magnam. Iusto eius dolorem impedit, temporibus facilis obcaecati perspiciatis et fugit, reiciendis enim, libero similique officiis.</p>
  <p>Dolores aspernatur ea cum ad aperiam at facilis! Sunt, non! Enim deleniti nemo ut molestiae eius deserunt culpa, qui omnis quasi nostrum cum, hic impedit maiores, ipsum voluptatem repellendus illum.</p>
  <p>Perferendis non quasi praesentium nam vitae ut necessitatibus, sint vero quidem distinctio, hic neque assumenda sunt iure enim omnis deserunt dolor aut facere. Vel similique cumque saepe porro eaque quod.</p>
  <p>Aliquam amet asperiores, autem sapiente quae natus, non nemo quas perspiciatis nisi laborum labore in neque esse ipsum necessitatibus odit ducimus vero qui nihil aspernatur recusandae? Iure nobis quas doloribus.</p>
  <p>Inventore doloremque sed voluptas, ratione consequatur alias quo quibusdam in fugiat deserunt, architecto amet. Iste consequuntur recusandae debitis quae dolore? Obcaecati natus nam sit. Corrupti expedita aut possimus vero laboriosam.</p>
  <p>Voluptatum a sequi perspiciatis. Cum sequi, nobis commodi eius iste eveniet optio iure libero consequatur sit perspiciatis qui expedita incidunt, error quae voluptatum consequuntur saepe! Explicabo vero quasi suscipit aut.</p>
  <p>Aut consequatur esse nisi dolore, sapiente, ducimus dolorem sed, facilis quidem veniam amet asperiores adipisci autem corporis voluptatum aliquam deleniti cum magni eligendi sit expedita quis reiciendis explicabo odit! Fugit!</p>
  <p>Esse ipsum voluptatum numquam odio soluta alias id voluptatem, non dolorem culpa at, eos magni perspiciatis eius. Numquam ipsa deserunt libero, harum perspiciatis pariatur? Sequi accusantium voluptate ipsa corrupti quos.</p>
  <p>Cupiditate, similique totam delectus ut error, nam blanditiis accusantium quasi qui dolore soluta. Aspernatur mollitia veritatis pariatur voluptates animi quos velit dolores numquam nihil voluptatibus id necessitatibus, consectetur error corporis.</p>
  <p>Sint explicabo odio commodi dicta hic, ducimus natus doloribus iusto veniam error odit officia dignissimos eveniet ex nemo, provident, sed delectus debitis nobis sit atque nam exercitationem. Nesciunt, corporis! Asperiores.</p>
  <p>Dignissimos commodi amet dolore maxime ipsa neque, quo porro reiciendis ex voluptatem aut distinctio natus quisquam accusamus doloribus sunt architecto laborum ratione excepturi numquam consequuntur at unde voluptate. Voluptatem, dolore.</p>
  <p>Minima aperiam rem asperiores facilis quaerat aut soluta, vero labore officiis excepturi sequi dolorem? Quia accusantium quas quae voluptatem, quasi ut in, magni ipsum repudiandae, dolorem dolores deleniti a obcaecati?</p>
  <p>Harum recusandae eveniet distinctio modi voluptatum cum asperiores similique minus quos fugit vero deserunt debitis eius assumenda, praesentium nemo doloribus. Quas magnam minima minus pariatur maiores accusantium maxime odit. Assumenda.</p>
  <p>Ullam error tempora fuga accusantium consectetur veritatis, perspiciatis repellendus, voluptatibus voluptates iure quaerat quidem fugiat placeat eveniet, temporibus possimus. Veritatis quisquam nam, qui praesentium in tempora. Ipsa aliquam veritatis molestias?</p>
  <p>Ea, obcaecati ipsam debitis architecto inventore sunt impedit saepe ipsum quos placeat quo, magnam cum eius, quas minima soluta consequuntur fuga sapiente blanditiis vero. Obcaecati impedit numquam vel velit hic.</p>
  <p>Vero sit excepturi, perferendis iste consequatur facere suscipit nisi perspiciatis maxime voluptatum repellat soluta pariatur facilis odit fugiat dolore doloremque laborum sed culpa aut ex aliquid! Soluta provident quam nesciunt?</p>
  <p>Delectus repellat facilis rerum expedita quos quidem, ullam ut saepe et quam est, accusamus accusantium exercitationem impedit tenetur repudiandae earum numquam deleniti ipsam dicta, perspiciatis soluta eveniet facere! Atque, labore?</p>
  <p>Velit incidunt minima dignissimos. Debitis reprehenderit nostrum magni laborum quidem perspiciatis, iste laudantium fugit numquam placeat adipisci incidunt minima nemo, sunt eos aliquam vitae id tempora earum dolorum itaque ducimus!</p>
  <p>In suscipit quisquam voluptatibus tenetur ratione porro eveniet ex nostrum quae culpa necessitatibus neque, atque magnam eligendi, repellat ipsum maiores, eius ducimus quidem molestiae voluptatem! Dolorem rem eaque repellendus eos.</p>
  <p>Nostrum culpa cumque laborum modi voluptate excepturi sit illum nobis, ut fugiat qui, quam omnis, ab totam perferendis id veritatis praesentium accusamus aut reprehenderit cum vel impedit facilis magni! Ex.</p>
  <p>Natus, numquam magnam, ipsum fuga fugiat laboriosam voluptatum, exercitationem sunt officiis reprehenderit excepturi ducimus! Maxime harum alias eaque, consequuntur ut deserunt explicabo debitis qui laboriosam natus sunt sit voluptatem aspernatur?</p>
  <p>Repellendus eligendi iste ipsam aspernatur deserunt voluptatum, corporis suscipit inventore mollitia tenetur voluptate deleniti quia et excepturi non, autem doloremque reiciendis officiis. Perspiciatis vero earum deleniti mollitia, quidem magni sequi?</p>
  <p>Earum odit quis dolorem quibusdam soluta fugit eum culpa cupiditate cum. Id, enim iure modi unde velit pariatur nulla, alias laboriosam, beatae sequi sit. Nam perspiciatis dolorum architecto reiciendis asperiores!</p>
  <p>Temporibus tempore optio nihil aperiam molestias error perferendis sed atque veritatis, velit libero nesciunt magni tempora cum aliquam voluptate deleniti sit saepe, similique itaque est sint, impedit dolorem? Delectus, doloremque!</p>
  <p>Doloremque dolor ut id culpa commodi excepturi at nisi error dolorem iste possimus aliquid, voluptatum aliquam magni beatae animi voluptates itaque consequuntur nulla aspernatur. Voluptas sed itaque quaerat ipsum mollitia!</p>
</main>
              
            
!

CSS

              
                main {
  max-width: 500px;
  margin: 1rem auto;
  font: 120%/1.6 system-ui;
  padding: 1rem;
}

#doom-damage {
  background-color: red;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.do-damage {
  background-color: red;
  animation: 0.4s doom-damage forwards;
}

@keyframes doom-damage {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

h1 {
  line-height: 1;
}

              
            
!

JS

              
                let nextDamagePosition = null;
let doomLastScroll = 0;
let ticking = false;
const damage = document.getElementById("doom-damage");

function doomCheckForDamage(scrollPos) {
  // Do something with the scroll position
  if (scrollPos > nextDamagePosition) {
    doomTakeDamage();
    nextDamagePosition += window.innerHeight;
  }
}

function doomTakeDamage() {
  damage.classList.add("do-damage");
  setTimeout(function () {
    damage.classList.remove("do-damage");
  }, 400);
}

window.addEventListener("scroll", function (e) {
  if (nextDamagePosition === null) {
    nextDamagePosition = window.innerHeight + window.scrollY;
  }
  doomLastScroll = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function () {
      doomCheckForDamage(doomLastScroll);
      ticking = false;
    });

    ticking = true;
  }
});

              
            
!
999px

Console