<article>
  <figure>
    <img src='https://unsplash.it/450/800?image=508' alt />
  </figure>
  <section>
      <div>
        <h1>Scrolling half by half</h1>
        <p>Made in pure #CSS and almost all is "old properties" method. And a bit imagination.<br/>
        Yes, the flexbox is old now.</p>
      </div>
  </section>
  
  <figure>
    <img src='https://unsplash.it/450/800?image=817' alt />
  </figure>
  <section>
    <div>
      <h2>I'm Kseso,<br/>
      &ldquo;a #obCSServer&rdquo;</h2>
      <p>Ramajero Argonauta, Enredique Amanuense de #CSS.</p>
    </div>
  </section>
  
  <figure>
    <img src='https://unsplash.it/450/800?image=948' alt />
  </figure>
  <section>
    <div>
      <h2><a href='https://escss.blogspot.com'>&xi;sCSS Blog</a></h2>
      <p>#impoCSSible inside EsCSS. A Spanish #CSS blog where the borders & limits of #CSS disappear.</p>
    </div>
  </section>
  
  <figure>
    <img src='https://unsplash.it/450/800?image=737' alt />
  </figure>
  <section>
    <div>
      <h2>#impoCSSible is nothing</h2>
      <p>You don´t need Javascript or #CSS processors either for almost 100% of what you want to do.</p>
    </div>
  </section>
  
  <figure>
    <img src='https://unsplash.it/450/800?image=870' alt />
  </figure>
  <section>
    <div>
      <h2>Idea from E.Bouças´s <a href='https://codepen.io/eduardoboucas/full/qdaOWv/'>pen</a></h2>
      <p>Without jQuery or Javascript, nor fixed position (bye IOs problems)</p>
    </div>
  </section>
  
  <figure>
    <img src='https://unsplash.it/450/800?image=743' alt />
  </figure>
  <section>
    <div>
      <h2>Images from unsplash.it</h2>
      <p>Because it´s the best for demos. Thanks, guys!</p>
    </div>
  </section>
  
  <figure>
    <img src='https://unsplash.it/450/800?image=452' alt />
  </figure>
  <section>
    <div>
      <h2>show the PEN.<br/>
        <a href='https://escss.blogspot.com/2017/08/scroll-half-by-half-pure-css.html'>link the POST</a></h2>
      <p>Por una web con mucho estilo, para argonautas con buen gusto.</p>
    </div>
  </section>
  
</article>

*,*:before,*:after {box-sizing:inherit;margin:0; padding:0; border:0 none; position: relative;}
html {
  background: #000;
  box-sizing:border-box;
  font-family: 'Vollkorn', sans-serif;
  font-size: 1rem;
  color: #000;
}

@media screen and (min-width: 700px) {
  body > article {
    display: flex;
    flex-wrap: wrap;
  }
  figure {
    background: #eee;
    width: calc( 50% + 1px);
    height: 100vh;
    margin: 0 auto 10vh 0;
    position: sticky;
    top: 0;
    overflow: hidden;
    box-shadow: 4px -4px 8px rgba(0,0,0,.4);
      }
  figure::after {
    content: '';
    position: absolute;
    top: 5vmin;
    right: 5vmin;
    bottom: 5vmin;
    left: 45%;
    border: 2px dashed #fff;
    outline: 1px solid #fff;
    outline-offset: -5vmin;
    backdrop-filter: grayscale(1);
    pointer-events: none;
      }
  figure:nth-of-type(2n)::after {
    right: 45%;
    left: 5vmin;
  }
  section {
    background: #e5e5e5;
    width: calc(50% + 1px);
    height: 100vh;
    margin: 0 0 10vh auto;
    position: sticky;
    top: 0;
    // overflow: hidden;
    padding: 5vmin;
    box-shadow: -4px -4px 8px rgba(0,0,0,.4);
      }
  figure:nth-of-type(1),
  section:nth-of-type(1) {
    margin: 0 0 10vh 0;
    width: 50%;
      }
  figure:nth-of-type(2n) {
    margin: 0 0 10vh auto;
    box-shadow: -4px -4px 8px rgba(0,0,0,.4);
      }
  section:nth-of-type(2n) {
    margin: 0 auto 10vh 0;
    box-shadow: 4px -4px 8px rgba(0,0,0,.4);
    }
  figure:last-of-type,
  section:last-of-type {
    margin-bottom: 0;
  }
  section::before {
    background: inherit;
    z-index: 1;
    content: '';
    position: absolute;
    top: 50%;
    left:0;
    width: 7vmin;
    height: 7vmin;
    transform: translate(calc(-50% + 1px), -50%) rotate(-45deg);
    clip-path: polygon(-15% -15%, 110% 0%, 0% 110%);
    box-shadow: -4px -2px 8px rgba(0,0,0,.4);
    border-radius: 1.5vmin 0 0 0;
  }
  section:nth-of-type(2n)::before {
    left:auto;
    right: 0;
    transform: translate(calc(50% - 1px), -50%) rotate(-45deg) scale(-1);
  }
  section::after {
    content: '';
    position: absolute;
    top: 5vmin;
    right: 45%;
    bottom: 5vmin;
    left: 5vmin;
    border: 2px dashed #fff;
    outline: 1px solid #fff;
    outline-offset: -5vmin;
    backdrop-filter: invert(1);
    pointer-events: none;
  }
  section:nth-of-type(2n):after {
    right: 5vmin;
    left: 45%;
  }
  figure img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
  }
  section > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 1rem;
  }
  h1,
  h2 {
    margin: 15% 0 auto;
    font-size: calc(5vmin + 3vmax);
    text-align: center;
    font-weight: 700;
    line-height: 1;
    word-spacing: .5rem;
  }
  p {
    text-align: right;
    width: 100%;
    font-family: "Cormorant", serif;
    font-weight: 400;
    font-style: italic;
    font-size: calc(1.5vmin + 1.75vmax);
    margin-bottom: 5%;
  }
  a {
    color: transparent;
    -webkit-text-stroke: 2px #212121;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: 2px;
  }
  a:hover, a:focus {  
    -webkit-text-stroke: 1px #999;
  }
}