css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <article class="page">
  <article class="main">
    <div class="scroll-container">
      <div class="scroll-intro" id="intro">
        <div class="inner">
          <h1>CSS Scroll Snap Points Example</h1>
          <div class="supports" id="supports"></div>
          <h2>Full width container + different height elements</h2>
          <p>Here we have defined a scroll container that is the full height and width of the viewport. Each Snap Point element has it's own different height and the mandatory snap will hook onto the top of each container</p>
           <h3>Find out more</h3>
          <p>Demo by Simon Codrington. <a href="http://www.sitepoint.com/intuitive-scrolling-interfaces-with-css-scroll-snap-points">See article</a>.</p>
        </div>
      </div>
      <div class="scroll-nav cf">
        <ul class="nav cf">
          <li><a href="#intro">Intro</a></li><li><a href="#section1">Section 1</a></li><li><a href="#section2">Section 2</a></li><li><a href="#section3">Section 3</a></li><li><a href="#section4">Section 4</a></li><li><a href="#section5">Section 5</a></li><li><a href="#section6">Section 6</a></li>
        </ul>
      </div>
      <div class="scroll-section medium" id="section1">
        <div class="inner">
          <h1>Quacumque enim ingredimur, in aliqua historia vestigium ponimus.</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Verum hoc idem saepe faciamus.</b> <b>Sed ea mala virtuti magnitudine obruebantur.</b> Dulce amarum, leve asperum, prope longe, stare movere, quadratum rotundum. Duo Reges: constructio
            interrete. Quae quo sunt excelsiores, eo dant clariora indicia naturae. </p>
          <p>Qui est in parvis malis. Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? <i>Tu quidem reddes;</i> Huius, Lyco, oratione locuples, rebus ipsis ielunior. <i>Ita multa dicunt, quae vix intellegam.</i> Sine ea igitur iucunde
            negat posse se vivere? </p>
          <ul>
            <li>Haec et tu ita posuisti, et verba vestra sunt.</li>
            <li>Quod dicit Epicurus etiam de voluptate, quae minime sint voluptates, eas obscurari saepe et obrui.</li>
            <li>Quam si explicavisset, non tam haesitaret.</li>
            <li>Quae quidem vel cum periculo est quaerenda vobis;</li>
            <li>Si verbum sequimur, primum longius verbum praepositum quam bonum.</li>
            <li>Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere?</li>
          </ul>
          <h3>Periculo est quaerenda</h3>
          <p>Nos paucis ad haec additis finem faciamus aliquando; <b>Et quod est munus, quod opus sapientiae?</b> Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Oratio me istius philosophi non offendit; Nihilo magis. </p>
        </div>
        <div class="bg bg-1"></div>
      </div>
      <div class="scroll-section small" id="section2">
        <div class="inner">
          <h1>Ut non sine causa ex iis memoriae ducta sit disciplina.</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eam stabilem appellas. Quare attende, quaeso. <i>Erit enim mecum, si tecum erit.</i> Sed haec in pueris; <i>Duo Reges: constructio interrete.</i> Si quae forte-possumus. </p>
          <p>Et ille ridens: Video, inquit, quid agas; Quonam, inquit, modo? Quid de Pythagora? Addidisti ad extremum etiam indoctum fuisse. <i>Nihilo beatiorem esse Metellum quam Regulum.</i> </p>
          <h3>: Video, inquit, quid agas; </h3>
          <p>An eiusdem modi? Itaque ab his ordiamur. Honesta oratio, Socratica, Platonis etiam. Certe, nisi voluptatem tanti aestimaretis. </p>
        </div>
        <div class="bg bg-2"></div>
      </div>
      <div class="scroll-section large" id="section3">
        <div class="inner">
          <h1>Putabam equidem satis, inquit, me dixisse.</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Nihil opus est exemplis hoc facere longius. Nondum autem explanatum satis, erat, quid maxime natura vellet. <b>Nunc agendum est subtilius.</b>            </p>
          <ul>
            <li>Torquatus, is qui consul cum Cn.</li>
            <li>Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit?</li>
            <li>Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret?</li>
          </ul>
          <p>Mihi enim erit isdem istis fortasse iam utendum. Nam aliquando posse recte fieri dicunt nulla expectata nec quaesita voluptate. Hoc ne statuam quidem dicturam pater aiebat, si loqui posset. <i>Si id dicis, vicimus.</i> Quamquam te quidem video
            minime esse deterritum. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Sine ea igitur iucunde negat posse se vivere? Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. Cum id fugiunt, re eadem defendunt, quae Peripatetici,
            verba. <a href='http://loripsum.net/' target='_blank'>Illud non continuo, ut aeque incontentae.</a> </p>
          <h2>Neutrum vero, inquit ille.</h2>
          <p>Duo Reges: constructio interrete. At cum de plurimis eadem dicit, tum certe de maximis. Ad eas enim res ab Epicuro praecepta dantur. Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. </p>
        </div>
        <div class="bg bg-3"></div>
      </div>
      <div class="scroll-section medium" id="section4">
        <div class="inner">
          <h1>Servari enim iustitia nisi a forti viro, nisi a sapiente non potest.</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; Quasi ego id curem, quid ille aiat aut
            neget. Nihil enim hoc differt. Duo Reges: constructio interrete. Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Nam bonum ex quo appellatum sit, nescio, praepositum ex eo credo, quod praeponatur aliis. Quorum
            sine causa fieri nihil putandum est. Hic ego: Pomponius quidem, inquam, noster iocari videtur, et fortasse suo iure. Multoque hoc melius nos veriusque quam Stoici. </p>
          <h2>Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri.</h2>
          <p>Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Esse enim quam vellet iniquus iustus poterat inpune. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Ipse Epicurus fortasse redderet, ut Sextus
            Peducaeus, Sex. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quare attende, quaeso. <i>Hic ambiguo ludimur.</i> Dic in quovis conventu te omnia facere, ne doleas. Sin aliud quid voles, postea. Quae cum magnifice primo
            dici viderentur, considerata minus probabantur. </p>
          <p>Quod autem principium officii quaerunt, melius quam Pyrrho; At certe gravius. <b>Bonum incolumis acies: misera caecitas.</b> Quid enim de amicitia statueris utilitatis causa expetenda vides. Sed quae tandem ista ratio est? Quid censes in Latino
            fore? Rhetorice igitur, inquam, nos mavis quam dialectice disputare? Minime vero, inquit ille, consentit. <i>Respondeat totidem verbis.</i> Haec et tu ita posuisti, et verba vestra sunt. Nam Pyrrho, Aristo, Erillus iam diu abiecti. </p>
        </div>
        <div class="bg bg-4"></div>
      </div>
      <div class="scroll-section small" id="section5">
        <div class="inner">
          <h1>Iam doloris medicamenta illa Epicurea tamquam de narthecio proment: Si gravis, brevis;</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non laboro, inquit, de nomine. Polycratem Samium felicem appellabant. Duo Reges: constructio interrete. <b>Ita nemo beato beatior.</b> Ut id aliis narrare gestiant? Inde igitur, inquit,
            ordiendum est. Quod quidem iam fit etiam in Academia. Ostendit pedes et pectus. </p>
          <p>Quo igitur, inquit, modo? Falli igitur possumus. Tibi hoc incredibile, quod beatissimum. Quare attende, quaeso. Aliter enim nosmet ipsos nosse non possumus. </p>
          <h2>Neque solum ea communia, verum etiam paria esse dixerunt.</h2>
          <p>Nemo igitur esse beatus potest. Quid adiuvas? Itaque ab his ordiamur. Quonam, inquit, modo? Id Sextilius factum negabat. Praeclare hoc quidem. </p>
        </div>
        <div class="bg bg-5"></div>
      </div>
      <div class="scroll-section large" id="section6">
        <div class="inner">
          <h1>Ut proverbia non nulla veriora sint quam vestra dogmata.</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. <i>Explanetur igitur.</i> Nunc omni virtuti vitium contrario nomine opponitur. Consequens enim est et post oritur,
            ut dixi. Duo Reges: constructio interrete. Non est igitur voluptas bonum. </p>
          <ul>
            <li>Nec vero hoc oratione solum, sed multo magis vita et factis et moribus comprobavit.</li>
            <li>Unum est sine dolore esse, alterum cum voluptate.</li>
            <li>Aliud est enim poëtarum more verba fundere, aliud ea, quae dicas, ratione et arte distinguere.</li>
            <li>Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus;</li>
            <li>Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas.</li>
          </ul>
          <h3>Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis.</h3>
          <p>Age sane, inquam. Istam voluptatem, inquit, Epicurus ignorat? Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Quae contraria sunt his, malane? <a href='http://loripsum.net/' target='_blank'>Haec igitur Epicuri non probo, inquam.</a>            Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Sed nimis multa. </p>
          <h2>Illud dico, ea, quae dicat, praeclare inter se cohaerere.</h2>
          <p>Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Quod iam a me expectare noli. <b>Quonam, inquit, modo?</b> Nihil illinc huc pervenit. <b>Eademne, quae restincta siti?</b> Estne, quaeso, inquam, sitienti in bibendo
            voluptas? Cupiditates non Epicuri divisione finiebat, sed sua satietate. Idem iste, inquam, de voluptate quid sentit? </p>
        </div>
        <div class="bg bg-6"></div>
      </div>
    </div>
  </article>
</article>
            
          
!
            
              /*UNIVERSAL STYLES*/

html {
  font-size: 62.5%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 150%;
  margin: 1.5rem 0rem;
}

h1 {
  font-size: 3.8rem;
  margin: 0;
}

h2 {
  font-size: 2.8rem;
  margin: 0 0rem;
}

h3 {
  font-size: 2.1rem;
  margin: 0 0rem;
}

h4 {
  font-size: 1.8rem;
}

h5 {
  font-size: 1.3rem;
}

h6 {
  font-size: 1.0rem;
}

p {
  margin: 0rem 0rem 2.4rem 0rem;
  line-height: 170%;
}

ul {
  padding: 0px 25px;
  line-height: 150%;
}

ul li {
  margin-bottom: 5px;
}
/*clearfixes*/

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
div {
  margin: 1.5rem 0rem;
}

div {
  margin: 0rem;
}

.page {
  margin: 0px;
  padding: 0px;
}

.main {
  margin: 0px;
  padding: 0px;
  max-width: none;
}

.inner {
  max-width: 1000px;
  margin: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.failure {
  color: red;
}

.success {
  color: green;
}
/*SCROLL SNAP STYLES*/

.scroll-container {
  height: 100vh;
  width: 96vw;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
  scroll-behavior: smooth;
  scroll-snap-destination: 0% 0%;
}

.scroll-container .scroll-intro {
  scroll-snap-coordinate: 0% 0%;
  overflow: hidden;
  padding: 25px 0px;
}

.scroll-container .scroll-section {
  position: relative;
  background: #F0F0F0;
  overflow: hidden;
  width: 100%;
  padding-top: 25px;
  padding-bottom: 25px;
  height: auto;
  -webkit-scroll-snap-coordinate: 0% 0%;
  -ms-scroll-snap-coordinate: 0% 0%;
  scroll-snap-coordinate: 0% 0%;
  border-bottom: solid 1px #ccc;
}

.scroll-container .scroll-section .inner {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.7);
  padding: 25px 15px;
}
/* last child must be 100% Y as it has issues scrolling to last element in FF*/

.scroll-container .scroll-section:last-child {
  -webkit-scroll-snap-coordinate: 0% 100%;
  -ms-scroll-snap-coordinate: 0% 100%;
  scroll-snap-coordinate: 0% 100%;
}

.scroll-container .scroll-section.small {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: #F0F0F0;
}

.scroll-container .scroll-section.medium {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #E0E0E0;
}

.scroll-container .scroll-section.large {
  padding-top: 125px;
  padding-bottom: 125px;
  background-color: #F8F8F8;
}
/*background images*/

.scroll-container .scroll-section .bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  z-index: 1;
}

.scroll-container .scroll-section .bg-1 {
  background-image: url('https://goo.gl/nSe8rW');
}

.scroll-container .scroll-section .bg-2 {
  background-image: url('https://goo.gl/3DcbJx');
}

.scroll-container .scroll-section .bg-3 {
  background-image: url('https://goo.gl/o969nQ');
}

.scroll-container .scroll-section .bg-4 {
  background-image: url('https://goo.gl/xs9KJq');
}

.scroll-container .scroll-section .bg-5 {
  background-image: url('https://goo.gl/B24utx');
}

.scroll-container .scroll-section .bg-6 {
  background-image: url('https://goo.gl/5rsE4h');
}

.scroll-container .scroll-section:last-child {
  margin-bottom: 0px;
}

.scroll-container .scroll-nav {
  position: absolute;
  top: 25%;
  left: 0px;
  background: #eee;
  z-index: 5;
}

.scroll-container .scroll-nav ul {
  margin: 0px;
  padding: 0px;
}

.scroll-container .scroll-nav li {
  display: block;
  margin: 0px;
}

.scroll-container .scroll-nav li a {
  display: block;
  background: #efefef;
  border: solid 1px #ccc;
  border-top: 0px;
  padding: 15px 30px;
  height: auto;
  color: #333;
  text-decoration: none;
}

.scroll-container .scroll-nav li:first-child a {
  border-top: solid 1px #ccc;
}

.scroll-container .scroll-nav li a:active,
.scroll-container .scroll-nav li a:hover {
  background: #CCC;
}
/*media queries*/

@media screen and (max-width: 678px) {
  /*hide the menu at the bottom of the screen in a scrolling list*/
  
  .scroll-container .scroll-nav {
    position: absolute;
    bottom: 0px;
    left: 0px;
    top: auto;
    width: 100%;
    height: 60px;
    overflow-y: scroll;
    border-top: solid 1px #666;
  }
  .scroll-container .scroll-nav li a {
    padding: 25px 15px;
    font-size: 110%;
    height: 60px;
  }
}
            
          
!
            
              $(function($) {

  //detect if we support scroll snap or not (not the best but should work)
  var scrollSnap = false;
  if ('webkitScrollSnapType' in document.documentElement.style) {
    scrollSnap = true;
  } else if ('msScrollSnapType' in document.documentElement.style) {
    scrollSnap = true;
  } else if ('scrollSnapType' in document.documentElement.style) {
    scrollSnap = true;
  }

  if (scrollSnap === true) {
    $('#supports').append('<h3 class="success">It looks like your browser does support scroll snap! (Its support may vary)</h3>');
  } else {
    $('#supports').append('<h3 class="failure">It looks like your browser might not support scroll snap properties</h3>');
  }
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console