Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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