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

Auto Save

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

              
                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="text-container">
    <div class="fade-in">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, turpis at malesuada blandit, erat dolor tempus nisl, et lacinia dui turpis eu quam. Vivamus convallis est vitae congue aliquet. Pellentesque porta eget massa id vulputate. Quisque id consequat dolor. Phasellus faucibus, nulla varius eleifend mollis, dui dolor blandit est, non accumsan enim leo non ipsum. Ut feugiat tortor purus, vitae rhoncus magna lacinia sit amet. Morbi malesuada nisl odio. Suspendisse a vulputate neque, eget aliquet odio. Cras mattis massa dui, ac auctor elit finibus sit amet. Ut id felis id augue cursus auctor ac ut dolor. Nulla laoreet nulla vitae justo commodo malesuada. Curabitur dictum ex risus, vitae bibendum neque consectetur vitae.

Curabitur lobortis pharetra tempor. Integer sodales nec neque non laoreet. Curabitur sed porta ante, sed gravida massa. Nullam vitae lorem ut nulla blandit dictum sed et tortor. In tincidunt est vel semper gravida. In lacinia vulputate sollicitudin. Vestibulum suscipit ex et hendrerit euismod. Vestibulum sed fermentum eros, et fringilla arcu. Aliquam pretium eu nisi sit amet imperdiet. Pellentesque vitae elit laoreet purus pellentesque suscipit eget et purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum justo enim, faucibus id nunc in, rhoncus interdum libero. Donec semper sed velit at scelerisque. Praesent nec ex a ipsum vestibulum accumsan porttitor nec mauris. Cras sagittis vestibulum arcu. Etiam cursus egestas magna, nec fermentum ante iaculis at.

Quisque ultricies sapien nec ipsum aliquet, vel ultrices velit semper. Etiam et lorem pellentesque, pellentesque nunc ut, congue lacus. Aenean eget libero auctor, molestie lectus id, ornare mauris. Cras metus ligula, lobortis eu augue in, facilisis interdum ipsum. Etiam rhoncus dictum erat ut porttitor. Donec non dolor felis. Donec volutpat nisi nibh, in scelerisque velit tempor vitae. Nunc at augue lacus. Quisque ut rhoncus risus, non volutpat mi. Duis at elementum sapien.

Donec et aliquam ex, egestas pulvinar arcu. Pellentesque in risus eget leo accumsan tincidunt sit amet ut nunc. Donec vitae malesuada felis. Nulla ac arcu nibh. Pellentesque ut tincidunt est, sed interdum elit. Maecenas sit amet euismod orci. Duis nec sem a justo interdum venenatis. Cras bibendum semper justo, vitae pellentesque dui convallis nec. Phasellus tincidunt, sapien a euismod faucibus, diam neque eleifend justo, quis luctus risus odio vel metus. Fusce ut fringilla risus. Sed eu quam euismod, malesuada justo vel, pharetra est. Proin cursus ligula odio.

Pellentesque eu hendrerit elit. Pellentesque finibus sagittis mi. Duis non odio in ipsum bibendum rutrum id vel nunc. Nam vitae semper lacus, vitae dictum urna. Maecenas at ultricies leo. Curabitur aliquet pretium orci, gravida gravida lectus condimentum vel. Suspendisse sit amet aliquam diam, ac iaculis lacus. Vestibulum viverra ipsum et nibh vulputate iaculis. Phasellus eu purus lectus.

Nulla pharetra auctor augue, non auctor lacus blandit ultricies. Sed finibus tortor non porttitor euismod. Nullam sed est id orci placerat sodales ut sed lectus. Phasellus id neque dui. Nunc commodo pulvinar gravida. Integer condimentum nisi nibh, eget ultricies urna consequat id. Aenean consequat posuere libero, ac interdum ex tempus id. Aliquam vulputate, nisi et volutpat tincidunt, elit ex vehicula orci, eu malesuada augue magna quis lorem. Nullam et lorem faucibus, sollicitudin arcu varius, fringilla nisl. Mauris non sollicitudin tellus, eu vehicula leo.

Cras iaculis viverra elit non mollis. Sed molestie purus neque, non feugiat orci fringilla eu. Nam vel pretium massa. Morbi eget diam non diam posuere blandit. Integer non vulputate tortor. Vivamus egestas sit amet libero sit amet venenatis. Cras ac posuere risus. Aliquam vel arcu malesuada, tristique orci a, venenatis arcu. Vivamus porttitor sapien vel velit pulvinar convallis. Mauris eu venenatis mauris. Curabitur blandit semper lorem vitae vehicula. Cras faucibus orci eu fringilla ultricies. Suspendisse efficitur accumsan massa ac pellentesque. Integer lacinia nulla quis pharetra pharetra.

Cras volutpat non neque posuere dictum. Mauris vel eros velit. Nam laoreet ex sit amet molestie cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tincidunt tincidunt turpis, ut pharetra nibh rhoncus a. Suspendisse mattis at magna sed blandit. Aenean dictum gravida ligula eleifend ullamcorper. Praesent blandit purus lectus, sed laoreet tellus pulvinar eget. Nunc pulvinar, urna quis rutrum elementum, mauris massa vulputate tellus, sit amet congue ante augue et ligula. Quisque at lacus tortor.

Donec sed pellentesque purus, eget pretium dui. Nullam venenatis tellus massa. Vestibulum condimentum luctus cursus. Vestibulum viverra magna eros, et vestibulum ipsum convallis vitae. Sed eget neque in dolor tincidunt pulvinar eget sed lorem. Duis auctor fringilla magna, at pharetra dolor tempus id. Maecenas fermentum in dui sed sodales. Pellentesque posuere quam ut eros egestas, quis feugiat nulla blandit. Donec vel arcu vel lectus egestas lacinia imperdiet id nisl. Ut congue in neque ut lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus consequat risus vulputate venenatis tempor.

Aliquam erat volutpat. Nulla id molestie risus. Sed ullamcorper auctor risus in pharetra. In consectetur hendrerit diam sit amet maximus. Etiam tristique luctus purus sed tempor. Quisque aliquet tempor orci a ultrices. Nulla rutrum malesuada justo, ut consectetur dolor congue eget. Fusce ac aliquam odio. Pellentesque id rutrum ligula.</p>
    </div> 
  </div>
  <div class="text-container">
    <div class="fade-in">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, turpis at malesuada blandit, erat dolor tempus nisl, et lacinia dui turpis eu quam. Vivamus convallis est vitae congue aliquet. Pellentesque porta eget massa id vulputate. Quisque id consequat dolor. Phasellus faucibus, nulla varius eleifend mollis, dui dolor blandit est, non accumsan enim leo non ipsum. Ut feugiat tortor purus, vitae rhoncus magna lacinia sit amet. Morbi malesuada nisl odio. Suspendisse a vulputate neque, eget aliquet odio. Cras mattis massa dui, ac auctor elit finibus sit amet. Ut id felis id augue cursus auctor ac ut dolor. Nulla laoreet nulla vitae justo commodo malesuada. Curabitur dictum ex risus, vitae bibendum neque consectetur vitae.</p>
    </div> 
  </div>
  <div class="container fade-in">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div class="text-container">
    <div class="fade-in">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, turpis at malesuada blandit, erat dolor tempus nisl, et lacinia dui turpis eu quam. Vivamus convallis est vitae congue aliquet. Pellentesque porta eget massa id vulputate. Quisque id consequat dolor. Phasellus faucibus, nulla varius eleifend mollis, dui dolor blandit est, non accumsan enim leo non ipsum. Ut feugiat tortor purus, vitae rhoncus magna lacinia sit amet. Morbi malesuada nisl odio. Suspendisse a vulputate neque, eget aliquet odio. Cras mattis massa dui, ac auctor elit finibus sit amet. Ut id felis id augue cursus auctor ac ut dolor. Nulla laoreet nulla vitae justo commodo malesuada. Curabitur dictum ex risus, vitae bibendum neque consectetur vitae.

Curabitur lobortis pharetra tempor. Integer sodales nec neque non laoreet. Curabitur sed porta ante, sed gravida massa. Nullam vitae lorem ut nulla blandit dictum sed et tortor. In tincidunt est vel semper gravida. In lacinia vulputate sollicitudin. Vestibulum suscipit ex et hendrerit euismod. Vestibulum sed fermentum eros, et fringilla arcu. Aliquam pretium eu nisi sit amet imperdiet. Pellentesque vitae elit laoreet purus pellentesque suscipit eget et purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum justo enim, faucibus id nunc in, rhoncus interdum libero. Donec semper sed velit at scelerisque. Praesent nec ex a ipsum vestibulum accumsan porttitor nec mauris. Cras sagittis vestibulum arcu. Etiam cursus egestas magna, nec fermentum ante iaculis at.

Quisque ultricies sapien nec ipsum aliquet, vel ultrices velit semper. Etiam et lorem pellentesque, pellentesque nunc ut, congue lacus. Aenean eget libero auctor, molestie lectus id, ornare mauris. Cras metus ligula, lobortis eu augue in, facilisis interdum ipsum. Etiam rhoncus dictum erat ut porttitor. Donec non dolor felis. Donec volutpat nisi nibh, in scelerisque velit tempor vitae. Nunc at augue lacus. Quisque ut rhoncus risus, non volutpat mi. Duis at elementum sapien.

Donec et aliquam ex, egestas pulvinar arcu. Pellentesque in risus eget leo accumsan tincidunt sit amet ut nunc. Donec vitae malesuada felis. Nulla ac arcu nibh. Pellentesque ut tincidunt est, sed interdum elit. Maecenas sit amet euismod orci. Duis nec sem a justo interdum venenatis. Cras bibendum semper justo, vitae pellentesque dui convallis nec. Phasellus tincidunt, sapien a euismod faucibus, diam neque eleifend justo, quis luctus risus odio vel metus. Fusce ut fringilla risus. Sed eu quam euismod, malesuada justo vel, pharetra est. Proin cursus ligula odio.

Pellentesque eu hendrerit elit. Pellentesque finibus sagittis mi. Duis non odio in ipsum bibendum rutrum id vel nunc. Nam vitae semper lacus, vitae dictum urna. Maecenas at ultricies leo. Curabitur aliquet pretium orci, gravida gravida lectus condimentum vel. Suspendisse sit amet aliquam diam, ac iaculis lacus. Vestibulum viverra ipsum et nibh vulputate iaculis. Phasellus eu purus lectus.

Nulla pharetra auctor augue, non auctor lacus blandit ultricies. Sed finibus tortor non porttitor euismod. Nullam sed est id orci placerat sodales ut sed lectus. Phasellus id neque dui. Nunc commodo pulvinar gravida. Integer condimentum nisi nibh, eget ultricies urna consequat id. Aenean consequat posuere libero, ac interdum ex tempus id. Aliquam vulputate, nisi et volutpat tincidunt, elit ex vehicula orci, eu malesuada augue magna quis lorem. Nullam et lorem faucibus, sollicitudin arcu varius, fringilla nisl. Mauris non sollicitudin tellus, eu vehicula leo.

Cras iaculis viverra elit non mollis. Sed molestie purus neque, non feugiat orci fringilla eu. Nam vel pretium massa. Morbi eget diam non diam posuere blandit. Integer non vulputate tortor. Vivamus egestas sit amet libero sit amet venenatis. Cras ac posuere risus. Aliquam vel arcu malesuada, tristique orci a, venenatis arcu. Vivamus porttitor sapien vel velit pulvinar convallis. Mauris eu venenatis mauris. Curabitur blandit semper lorem vitae vehicula. Cras faucibus orci eu fringilla ultricies. Suspendisse efficitur accumsan massa ac pellentesque. Integer lacinia nulla quis pharetra pharetra.

Cras volutpat non neque posuere dictum. Mauris vel eros velit. Nam laoreet ex sit amet molestie cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tincidunt tincidunt turpis, ut pharetra nibh rhoncus a. Suspendisse mattis at magna sed blandit. Aenean dictum gravida ligula eleifend ullamcorper. Praesent blandit purus lectus, sed laoreet tellus pulvinar eget. Nunc pulvinar, urna quis rutrum elementum, mauris massa vulputate tellus, sit amet congue ante augue et ligula. Quisque at lacus tortor.

Donec sed pellentesque purus, eget pretium dui. Nullam venenatis tellus massa. Vestibulum condimentum luctus cursus. Vestibulum viverra magna eros, et vestibulum ipsum convallis vitae. Sed eget neque in dolor tincidunt pulvinar eget sed lorem. Duis auctor fringilla magna, at pharetra dolor tempus id. Maecenas fermentum in dui sed sodales. Pellentesque posuere quam ut eros egestas, quis feugiat nulla blandit. Donec vel arcu vel lectus egestas lacinia imperdiet id nisl. Ut congue in neque ut lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus consequat risus vulputate venenatis tempor.

Aliquam erat volutpat. Nulla id molestie risus. Sed ullamcorper auctor risus in pharetra. In consectetur hendrerit diam sit amet maximus. Etiam tristique luctus purus sed tempor. Quisque aliquet tempor orci a ultrices. Nulla rutrum malesuada justo, ut consectetur dolor congue eget. Fusce ac aliquam odio. Pellentesque id rutrum ligula.</p>
    </div> 
  </div>
  <div class="container fade-in">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
  <div class="text-container">
    <div class="fade-in">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, turpis at malesuada blandit, erat dolor tempus nisl, et lacinia dui turpis eu quam. Vivamus convallis est vitae congue aliquet. Pellentesque porta eget massa id vulputate. Quisque id consequat dolor. Phasellus faucibus, nulla varius eleifend mollis, dui dolor blandit est, non accumsan enim leo non ipsum. Ut feugiat tortor purus, vitae rhoncus magna lacinia sit amet. Morbi malesuada nisl odio. Suspendisse a vulputate neque, eget aliquet odio. Cras mattis massa dui, ac auctor elit finibus sit amet. Ut id felis id augue cursus auctor ac ut dolor. Nulla laoreet nulla vitae justo commodo malesuada. Curabitur dictum ex risus, vitae bibendum neque consectetur vitae.

Curabitur lobortis pharetra tempor. Integer sodales nec neque non laoreet. Curabitur sed porta ante, sed gravida massa. Nullam vitae lorem ut nulla blandit dictum sed et tortor. In tincidunt est vel semper gravida. In lacinia vulputate sollicitudin. Vestibulum suscipit ex et hendrerit euismod. Vestibulum sed fermentum eros, et fringilla arcu. Aliquam pretium eu nisi sit amet imperdiet. Pellentesque vitae elit laoreet purus pellentesque suscipit eget et purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum justo enim, faucibus id nunc in, rhoncus interdum libero. Donec semper sed velit at scelerisque. Praesent nec ex a ipsum vestibulum accumsan porttitor nec mauris. Cras sagittis vestibulum arcu. Etiam cursus egestas magna, nec fermentum ante iaculis at.

Quisque ultricies sapien nec ipsum aliquet, vel ultrices velit semper. Etiam et lorem pellentesque, pellentesque nunc ut, congue lacus. Aenean eget libero auctor, molestie lectus id, ornare mauris. Cras metus ligula, lobortis eu augue in, facilisis interdum ipsum. Etiam rhoncus dictum erat ut porttitor. Donec non dolor felis. Donec volutpat nisi nibh, in scelerisque velit tempor vitae. Nunc at augue lacus. Quisque ut rhoncus risus, non volutpat mi. Duis at elementum sapien.

Donec et aliquam ex, egestas pulvinar arcu. Pellentesque in risus eget leo accumsan tincidunt sit amet ut nunc. Donec vitae malesuada felis. Nulla ac arcu nibh. Pellentesque ut tincidunt est, sed interdum elit. Maecenas sit amet euismod orci. Duis nec sem a justo interdum venenatis. Cras bibendum semper justo, vitae pellentesque dui convallis nec. Phasellus tincidunt, sapien a euismod faucibus, diam neque eleifend justo, quis luctus risus odio vel metus. Fusce ut fringilla risus. Sed eu quam euismod, malesuada justo vel, pharetra est. Proin cursus ligula odio.

Pellentesque eu hendrerit elit. Pellentesque finibus sagittis mi. Duis non odio in ipsum bibendum rutrum id vel nunc. Nam vitae semper lacus, vitae dictum urna. Maecenas at ultricies leo. Curabitur aliquet pretium orci, gravida gravida lectus condimentum vel. Suspendisse sit amet aliquam diam, ac iaculis lacus. Vestibulum viverra ipsum et nibh vulputate iaculis. Phasellus eu purus lectus.

Nulla pharetra auctor augue, non auctor lacus blandit ultricies. Sed finibus tortor non porttitor euismod. Nullam sed est id orci placerat sodales ut sed lectus. Phasellus id neque dui. Nunc commodo pulvinar gravida. Integer condimentum nisi nibh, eget ultricies urna consequat id. Aenean consequat posuere libero, ac interdum ex tempus id. Aliquam vulputate, nisi et volutpat tincidunt, elit ex vehicula orci, eu malesuada augue magna quis lorem. Nullam et lorem faucibus, sollicitudin arcu varius, fringilla nisl. Mauris non sollicitudin tellus, eu vehicula leo.

Cras iaculis viverra elit non mollis. Sed molestie purus neque, non feugiat orci fringilla eu. Nam vel pretium massa. Morbi eget diam non diam posuere blandit. Integer non vulputate tortor. Vivamus egestas sit amet libero sit amet venenatis. Cras ac posuere risus. Aliquam vel arcu malesuada, tristique orci a, venenatis arcu. Vivamus porttitor sapien vel velit pulvinar convallis. Mauris eu venenatis mauris. Curabitur blandit semper lorem vitae vehicula. Cras faucibus orci eu fringilla ultricies. Suspendisse efficitur accumsan massa ac pellentesque. Integer lacinia nulla quis pharetra pharetra.

Cras volutpat non neque posuere dictum. Mauris vel eros velit. Nam laoreet ex sit amet molestie cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tincidunt tincidunt turpis, ut pharetra nibh rhoncus a. Suspendisse mattis at magna sed blandit. Aenean dictum gravida ligula eleifend ullamcorper. Praesent blandit purus lectus, sed laoreet tellus pulvinar eget. Nunc pulvinar, urna quis rutrum elementum, mauris massa vulputate tellus, sit amet congue ante augue et ligula. Quisque at lacus tortor.

Donec sed pellentesque purus, eget pretium dui. Nullam venenatis tellus massa. Vestibulum condimentum luctus cursus. Vestibulum viverra magna eros, et vestibulum ipsum convallis vitae. Sed eget neque in dolor tincidunt pulvinar eget sed lorem. Duis auctor fringilla magna, at pharetra dolor tempus id. Maecenas fermentum in dui sed sodales. Pellentesque posuere quam ut eros egestas, quis feugiat nulla blandit. Donec vel arcu vel lectus egestas lacinia imperdiet id nisl. Ut congue in neque ut lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus consequat risus vulputate venenatis tempor.

Aliquam erat volutpat. Nulla id molestie risus. Sed ullamcorper auctor risus in pharetra. In consectetur hendrerit diam sit amet maximus. Etiam tristique luctus purus sed tempor. Quisque aliquet tempor orci a ultrices. Nulla rutrum malesuada justo, ut consectetur dolor congue eget. Fusce ac aliquam odio. Pellentesque id rutrum ligula.</p>
    </div> 
  </div>
</body>
</html>
              
            
!

CSS

              
                .text-container {
  padding: 40px;
  font-size: 17px;
  line-height: 140%;
  letter-spacing: .3px;
  max-width: 1000px;
  margin: auto;
}

.container {
  padding: 0 40px 40px;
  display: grid;
  grid-template-columns: repeat(3, 300px);
  grid-gap: 20px;
  justify-content: center;
}

.square {
  height: 300px;
  width: 300px;
  margin: 20px;
}

.fade-in {
  opacity: 0;
}

.square:nth-child(1) {
  background: tomato;
}

.square:nth-child(2) {
  background: goldenrod;
}

.square:nth-child(3) {
  background: steelblue;
}

.is-faded {
  animation: fadeIn 1200ms both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
              
            
!

JS

              
                function isInViewport(el) {
  const rect = el.getBoundingClientRect();

   // add an offset of 200 to change when the elements will fade in
  const offset = 200;

  return (
    rect.top >= 0 &&
    rect.top + offset <= (window.innerHeight || document.documentElement.clientHeight)
  );
}

function fadeIn() {
  document.querySelectorAll('.fade-in').forEach(fadeIn => {
    if (isInViewport(fadeIn)) {        
      fadeIn.classList.add('is-faded');
    }
  });
}

// run this on page load to fade in any elements already in view
fadeIn();

// run fadeIn() as user scrolls page to look for elements coming into view
document.addEventListener('scroll', function () {
  fadeIn();
}, {
    passive: true
});
              
            
!
999px

Console