CodePen Embed

<div class="wrap rw-1">
     
  <section class="panel" data-animate-scroll='{"x": "0", "y": "50", "alpha": "0","duration": "1", "delay": "1"}'>
    <div id="div1" class="card-group">  
        <div class="card-date">JANUARY 27, 1999</div>
        <h4 class="card-head">Medtronic merges with Sofamor Danek Group, which includes rights to Infuse technology</h4>
        <p class="card-chatter">Infuse uses an experimental growth protein called rhBMP-2, which was being tested as a way to cause bones to fuse together after surgery. Trials on the chemical's safety and performance had just gotten underway when the merger was completed. </p>
        <div class="card-ui-wrap">
          <div class="card-number">1/15</div>
          <a href="#"><button class="button b-left"><i class="fa fa-long-arrow-up"></i></button></a>
          <a href="#div2"><button class="button b-right"><i class="fa fa-long-arrow-down"></i></button></a>
        </div>
      </div>
  </section>

  <section class="panel" data-animate-scroll='{"x": "0", "y": "50", "alpha": "0","duration": "1", "delay": "1"}'>
    <div id="div2" class="card-group">  
      <div class="card-date">JULY 2, 2002</div>
      <h4 class="card-head">The FDA approves Medtronic's Infuse to treat severe spinal disc diseases</h4>
      <p class="card-chatter">Infuse worked by fusing bones in the lower spine. The approval only covered spinal-fusion surgeries performed from the front of the body, a small subset of the total spine-fusion market. The FDA approval included strict rules for long-term tracking of patients.<br> <i>Cumulative device injuries in FDA database: 1 </i></p>
      <div class="card-ui-wrap">
        <div class="card-number">2/15</div>
        <a href="#div1"><button class="button b-left"><i class="fa fa-long-arrow-up"></i></button></a>
        <a href="#div3"><button class="button b-right"><i class="fa fa-long-arrow-down"></i></button></a>
      </div>
    </div>
  </section>
  
  <section class="panel" data-animate-scroll='{"x": "0", "y": "50", "alpha": "0","duration": "1", "delay": "1"}'>
    <div id="div3" class="card-group">  
      <div class="card-date">2006</div>
      <h4 class="card-head">Medtronic begins study of patients treated with Infuse between 2002 and 2006</h4>
      <p class="card-chatter">The study, which had formal controls, was to explore more uses for Infuse. Not all of the uses examined were off-label. Medtronic says someone at the FDA led them to believe a review of past patient charts could be used to gather data to support an application for a wider approval.<br> <i>Cumulative device injuries in FDA database: 159</i></p>
      <div class="card-ui-wrap">
        <div class="card-number">3/15</div>
        <a href="#div2"><button class="button b-left"><i class="fa fa-long-arrow-up"></i></button></a>
          <a href="#div4"><button class="button b-right"><i class="fa fa-long-arrow-down"></i></button></a>
        </div>
  </section>
  
</div>


<div class="wrap rw-2">
     
  <section id="group-b" class="panel" data-animate-scroll='{"x": "0", "y": "50", "alpha": "0","duration": "1"}'>
    <div id="div1" class="card-group">  
        <div class="card-date">JANUARY 27, 1999</div>
        <h4 class="card-head">Medtronic merges with Sofamor Danek Group, which includes rights to Infuse technology</h4>
        <p class="card-chatter">Infuse uses an experimental growth protein called rhBMP-2, which was being tested as a way to cause bones to fuse together after surgery. Trials on the chemical's safety and performance had just gotten underway when the merger was completed. </p>
        <div class="card-ui-wrap">
          <div class="card-number">1/15</div>
          <a href="#"><button class="button b-left"><i class="fa fa-long-arrow-up"></i></button></a>
          <a href="#div2"><button class="button b-right"><i class="fa fa-long-arrow-down"></i></button></a>
        </div>
      </div>
    <div class="bottom-tear"></div>
  </section>

  <section class="panel" data-animate-scroll='{"x": "0", "y": "50", "alpha": "0","duration": "1"}'>
    <div id="div2" class="card-group">  
      <div class="card-date">JULY 2, 2002</div>
      <h4 class="card-head">The FDA approves Medtronic's Infuse to treat severe spinal disc diseases</h4>
      <p class="card-chatter">Infuse worked by fusing bones in the lower spine. The approval only covered spinal-fusion surgeries performed from the front of the body, a small subset of the total spine-fusion market. The FDA approval included strict rules for long-term tracking of patients.<br> <i>Cumulative device injuries in FDA database: 1 </i></p>
      <div class="card-ui-wrap">
        <div class="card-number">2/15</div>
        <a href="#div1"><button class="button b-left"><i class="fa fa-long-arrow-up"></i></button></a>
        <a href="#div3"><button class="button b-right"><i class="fa fa-long-arrow-down"></i></button></a>
      </div>
    </div>
  </section>
  
  <section class="panel" data-animate-scroll='{"x": "0", "y": "50", "alpha": "0","duration": "1"}'>
    <div id="div3" class="card-group">  
      <div class="card-date">2006</div>
      <h4 class="card-head">Medtronic begins study of patients treated with Infuse between 2002 and 2006</h4>
      <p class="card-chatter">The study, which had formal controls, was to explore more uses for Infuse. Not all of the uses examined were off-label. Medtronic says someone at the FDA led them to believe a review of past patient charts could be used to gather data to support an application for a wider approval.<br> <i>Cumulative device injuries in FDA database: 159</i></p>
      <div class="card-ui-wrap">
        <div class="card-number">3/15</div>
        <a href="#div2"><button class="button b-left"><i class="fa fa-long-arrow-up"></i></button></a>
          <a href="#div4"><button class="button b-right"><i class="fa fa-long-arrow-down"></i></button></a>
        </div>
  </section>
  
</div>

.wrap {
  padding: 20px;
  width: 308px;
  background-color: #eeeeee;
  display: inline-block;
  float: left;
  margin-right: 20px;
  overflow: hidden;
}

.container {
  height: 100vh;
}

.card-group {
  width: 265px;
  position: relative;  
  padding: 20px;
  border-radius: 6px;
  background-color: white;
  /*-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);*/
  margin-bottom: 50px;
}

.card-date {
  font-size: .75em;
  font-family: "Benton Sans",Helvetica,Arial,sans-serif;
  margin-top: 4px;
}

.card-head h4 {
  font-family: "Benton Sans Condensed Medium";
  letter-spacing: -.1px;
  line-height: 1.2;
  color: #444;
  font-weight: bold;
}

.card-chatter {
  font-family: "Benton Sans", Helvetica, Arial, sans-serif;
  letter-spacing: -0.1px;
  font-size: 13px;
  line-height: 1.4;
  color: #444;
  margin-top: 0px;
  margin-bottom: 50px;
}

.card-ui-wrap {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.card-number {
  display: inline-block;
  position: absolute;
  left: -35px;
  top: 0px;
  padding-top: 12px;
  padding-bottom: 10px;
  font-family: "Benton Sans", Helvetica, Arial, sans-serif;
  letter-spacing: -0.1px;
  font-size: 13px;
  line-height: 1.4;
  color: #A9A9A9;  
}

.button {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  font-size:20px;
  color: #000; 
  line-height: 50px;
  text-align: center;
  background: #fff;
  border: 0px solid;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  margin-left: 5px;
  cursor: pointer;
}

button:focus {
  outline: 0;
}

button::-moz-focus-inner {
  border: 0;
}

.fa-long-arrow-up:before {
  content: "\f176";
  position: absolute;
  top: 12px;
  margin-left: -3px;
  color: #3FA9F5;  
}

.fa-long-arrow-down:before {
  content: ""\f175"";
  position: absolute;
  top: 13px;
  margin-left: -3px;
  color: #3FA9F5;
}

.fa {
  font-size: 15px;
}

#group-b .card-group {
  border-radius: 0px;
  background-color: #333333;
  color: #fff;
}

#group-b .button {
  background-color: #FFDE00;
}

#group-b .card-head h4{
  color: #FFDE00;
  margin-bottom: 10px;
  font-family: "Benton Sans Condensed Medium";
}

#group-b .card-chatter {
  color: #fff;
}

#group-b .fa-long-arrow-up:before {
  color: #333333;  
}

#group-b .fa-long-arrow-down:before {
  color: #333333;
}

.bottom-tear {
  width: 305px;
  height: 30px;
  background-image: url('https://static.startribune.com/mike-test/bottom-tear.png');
  margin-top: -50px;
  margin-bottom: 50px;
}

//$(document).animateScroll();


//var doc = document.documentElement;
//doc.setAttribute('data-useragent', navigator.userAgent);


$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){
   
      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });
  });
});

This Pen is owned by Michael Grant on CodePen.

See more by @mikegrantme on CodePen

External CSS

External JavaScript