CSS Scroll Jacking Demo Using `:hover`

CSS Scroll Jacking Demo Using `:hover`.markdown

CSS Scroll Jacking Demo Using :hover

A quick demo of how to use CSS to achieve a somewhat scroll-jacking experience.

Never do this.

A Pen by Jake Albaugh on CodePen.

License.

index.html

<section id=s1>
  <div>
    <article>
      <h1>Scroll Jacking with CSS</h1>
      <p>Right now you are reading content inside of a fixed-position child of a relatively-positioned transparent area.</p>
      <p>You are hovering over the transparent area (the white tint background) which is displaying this content. This fixed child content has a colored background image with a blend mode which appears to modify the original background image you saw before hover.</p>
      <p>If you keep scrolling down you will see a line. If you hover beneath that line you will be hovering over the next section and it will make this content disappear.</p>
    </article>
  </div>
</section>
<section id=s2>
  <div>
    <article>
      <h1>Changing Hover Areas</h1>
      <p>You are now reading the second section's fixed content with a green background. This is because you are hovering over the second section (the white tint background).</p>
      <p>If you didn't move your mouse and scrolled to get here, you may have noticed that the hover event doesn't fire until scrolling has completely stopped. This is default browser behavior.</p>
      <p>This means you can quickly scroll to the bottom of the page and it will skip the sections along the way.</p>      
    </article>
  </div>
</section>
<section id=s3>
  <div>
    <article>
      <h1>Why This is Awesome</h1>
      <p>As you can see, the result is pretty amazing for not using any Javascript. This goes to show you that CSS can do some pretty crazy things.</p>
    </article>
  </div>
</section>
<section id=s4>
  <div>
    <article>
      <h1>Why This Sucks</h1>
      <p>First off, you cant select this text because the "hover" section areas are sitting on top of it. This is because we need to hover event to make this work.</p>
      <p>Secondly, this pen is useless if you aren't hovering over it, so you cant use this on a tablet or phone. Relying on hover is a terrible idea.</p>
    </article>
  </div>
</section>

<div class=default>
  <h1>Hover if you know what's good for ya</h1>
</div>

<div class=bg></div>

script.js

jakealbaughSignature("light");

scripts

<script src="http://codepen.io/jakealbaugh/pen/WvNjZB.js"></script>

style.css

// section count
$sections: 4;
// width of svgs
$svg-w: 200px;
// kind of like a throttle, increase to add more scrolling
$section-height: 100vh;
// easing
$cubic-enter: cubic-bezier(1, 1.6, 0.3, 1);
$cubic-leave: cubic-bezier(0.32,-0.24, 0.24, 0.98);
// colors
$c-light: #D7D7CE;
$c-dark: #2A2B26;

// body height
body {
  position: relative; // needed to stretch body to bottom
}

section {
  // sizing our sections
  height: $section-height;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  
  // subtle white on hover
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: background 250ms $cubic-leave;
    z-index: 2;    
  }
  
  
  &:hover {
    // hide default message    
    ~ .default {
      opacity: 0;
      visibility: hidden;
    }
    
    // show subtle white bg on section
    &::after {
      transition-timing-function: $cubic-enter;
      background: rgba(#FFF,0.05);
    }    
  }
  
  // border reference between sections
  + section::before { 
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    border-top: 1px solid rgba(#FFF,0.2); 
  }

  // different backgorund color tints for each
  @for $i from 1 through $sections {
    &:nth-of-type(#{$i}) {
      div { background-color: hsl((($i - 1) / $sections * 360), 50%, 50%); }
    }
  }
  
  // section content
  // this is displayed fixed all the time, 
  // but only visible when hovering over static section
  div {
    position: fixed;
    opacity: 0;
    top: 0; left: 0; right: 0;
    height: 100vh;
    transition: opacity 250ms linear;
    background-blend-mode: multiply;
  }
  article {
    width: 95%;
    max-width: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 1rem 2rem;
    box-sizing: border-box;
    background: rgba(#000,0.9);
    box-shadow: 0px 1px 0px 2px rgba(#FFF,0.05);
    border-radius: 2px;
    transform: translateX(-50%) translateY(0%);
    transition: transform 500ms $cubic-leave;
  }
  h1 { 
    margin-top: 1rem; 
  }
  // show content on hover (when scrolling over it)
  // scroll to a switchpoint 
  // move your mouse to top and then bottom of window
  // it should change the content because you are hovering 
  // over a different section
  &:hover > div { 
    opacity: 1;
    article {
      transform: translateX(-50%) translateY(-50%);
    }
  }
}


section > div,
div.bg {
  // .bg is the default background behind everything
  // section > div is for each section because they all need to mix with bg color for blend mode
  background-image: url(http://wallpaperspal.com/wp-content/uploads/Black-And-White-Chicago-Night-Wallpaper.jpg);
  background-position: center;
  background-size: cover;
}

div.default {
  position: fixed;
  width: 100%;
  top: 50%;
  transition: opacity 250ms;
}

div.bg {
  position: fixed;
  pointer-events: none;
  top: 0; left: 0; right: 0;
  height: 100vh;
  background-blend-mode: multiply;
  background-color: $c-dark;
  z-index: -1;
}

// non essential style
body {
  background-color: $c-dark;
  color: $c-light;
}

h1 { 
  font-weight: 100; 
  width: 100%; text-align: center;
  margin-top: 0;    
}

p {
  line-height: 1.6;
  font-weight: 100;
}