Cattywompus - A Subtle Parallax Banner Plugin

A subtle parallax plugin that leverages native JavaScript and CSS3 transforms to transition banner headings on scroll. Inspired by Medium.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Cattywompus - A Subtle Parallax Banner Plugin</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <header class="cattywompus">
  <div class="heading">
    <span class="meta">May 16th, 2014</span>
    <h1>A Rather Cattywompus Banner</h1>
  </div>
  <img class="background" src="https://dl.dropboxusercontent.com/u/150679257/moon.jpg">
</header>

<article>
  <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
  <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p>
  <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p>
  <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
  <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
  <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
  <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p>
  <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p>
  <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
  <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
</article>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
* {
  margin: 0;
  padding: 0;
}

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

body {
  font: 200 19px/1.5 'Avenir', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
}

.cattywompus {
  position: relative;
  width: 100%;
  padding: 180px 40px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.cattywompus:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.5);
}
.cattywompus .meta, .cattywompus h1 {
  display: block;
  max-width: 640px;
  margin: 0 auto;
}
.cattywompus .heading {
  position: relative;
  z-index: 1;
}
.cattywompus .heading .meta {
  color: white;
  font-size: .684em;
  text-transform: uppercase;
}
.cattywompus .heading h1 {
  color: white;
  font-size: 2em;
  font-weight: 200;
}
.cattywompus .background {
  display: none;
}

article {
  max-width: 640px;
  margin: 0 auto;
}
article p {
  margin: 1.5em 0;
}
/* Downloaded from https://www.codeseek.co/ */
/**
 * Cattywompus 0.3.1
 * By Kyle Foster (@hkfoster)
 * @license MIT
 */
var cattywompus = ( function() {

  // Find all select elements
  var header = document.querySelector( '.cattywompus' ),
      
  init = function() {

    // Assignment
    var refImage   = header.querySelector( '.background' ),
        heading    = header.querySelector( '.heading' ),
        transform  = prefix( [
          'transform', 
          'msTransform', 
          'WebkitTransform' 
        ] );

    // Set background src to original
    header.style.backgroundImage = 'url( ' + refImage.src + ' )';

    // Remove reference image
    header.removeChild( refImage );

    // Scroll handler function
    function scrollHandler() {

      // Calculate real & parallax scroll position
      var newPosition = Math.round( window.pageYOffset * 0.5 );

      // Where the magic happens
      if ( has3d ) {
        heading.style[ transform ] = 'translate3d( 0, ' + newPosition + 'px, 0 )';
        heading.style.opacity = 1 - ( newPosition / 175 );
      } else {
        heading.style[ transform ] = 'translateY( ' + newPosition + 'px )';
        heading.style.opacity = 1 - ( newPosition / 175 );
      }
    }

    // 3D transform detection function
    function has3d() {
      var el = document.createElement( 'p' ), 
          detect3d,
          transforms = {
            'webkitTransform': '-webkit-transform',
            'msTransform': '-ms-transform',
            'transform': 'transform'
          };

      document.body.insertBefore( el, null );

      for ( var t in transforms ) {
        if ( el.style[ t ] !== undefined ) {
          el.style[ t ] = 'translate3d( 1px, 1px, 1px )';
          detect3d = window.getComputedStyle( el ).getPropertyValue( transforms[ t ] );
        }
      }

      document.body.removeChild( el );

      return ( detect3d !== undefined && detect3d.length > 0 && detect3d !== 'none' );
    }

    // Prefixer function
    function prefix( properties ) {
      for ( var i = 0; i < properties.length; i++ ) { 
        if ( properties[ i ] in document.documentElement.style ) {
          return properties[ i ];
        }
      }
    }

    // Instantiation
    document.addEventListener( 'scroll', scrollHandler, false );

  };

  if ( header ) { init(); }

})();

This awesome code ( Cattywompus - A Subtle Parallax Banner Plugin ) is write by Kyle Foster, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Kyle Foster