CodePen Embed - Nike Cards

<!-- https://codepen.io/mmadeira/pen/jrBxpE?editors=1010 -->

<html>
  <head>
    <meta charset="utf-8">
    <title>Nike Parallax Cards</title>
      </head>
  <body>
    
<div class="wrapper">
  <div class="card">
    <div class="card__content">
      <div class="card__header">
        <img src="https://s32.postimg.org/7b31lbyit/nike.png" alt="Nike">
        <span class="card__cost">$120</span>
      </div>
      <div class="title">Air Structure 1</div>
      <div class="description">From the Flymesh upper to the triple-density foam midsole, the Nike Air Zoom Structure 19 Men's Running Shoe offers plenty of support and the response you need for a smooth, stable ride that feels ultra fast.</div>
      <div class="card__watermark" data-watermark="Air"></div>
    </div>
    <div class="card__footer">
      <img src="https://s32.postimg.org/jqzrf2rut/nike19.png" alt="Nike 19" class="card__image">
      <div class="add">Add to cart</div>
      <div class="category">Men's Running Shoe</div>
    </div>
  </div>
  
  <div class="card card-2">
    <div class="card__content card__content--2">
      <div class="card__header">
        <img src="https://s32.postimg.org/7b31lbyit/nike.png" alt="Nike">
        <span class="card__cost">$140</span>
      </div>
      <div class="title">Air Huarache Utility</div>
      <div class="description">The Nike Air Huarache Utility Men's Shoe toughens up a famous running shoe with a nylon upper, fused mudguard and vibrant detail.</div>
      <div class="card__watermark" data-watermark="Safari"></div>
    </div>
    <div class="card__footer">
      <img src="https://s32.postimg.org/4fpyeguit/nike_safari.png" alt="Nike 19" class="card__image">
      <div class="add">Add to cart</div>
      <div class="category">Men's Shoe</div>
    </div>
  </div>
  
    <div class="card card-2">
    <div class="card__content card__content--3">
      <div class="card__header">
        <img src="https://s32.postimg.org/7b31lbyit/nike.png" alt="Nike">
        <span class="card__cost">$130</span>
      </div>
      <div class="title">Air Solstice QS</div>
      <div class="description">The Nike Air Solstice draws inspiration from the swoosh's classic running shoes of the 1980's updating the style with premium materials and impressive production quality.</div>
      <div class="card__watermark" data-watermark="Safari"></div>
    </div>
    <div class="card__footer">
      <img src="https://s32.postimg.org/eoifkaikl/nike_air_solstice.png" alt="Nike 19" class="card__image">
      <div class="add">Add to cart</div>
      <div class="category">Men's Shoe</div>
    </div>
  </div>
</div>
  </body>
</html>

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto", "Helvetica", sans-serif;
  color: white;
  background: #8850FF;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.card {
  position: absolute;
  top: 25px;
  width: 350px;
  transform: translateX(-50%);
  transition: left 0.5s ease-out;
  left: 50%;
  box-shadow: 0 30 50 rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  background: white;

  &__content {
    padding: 30px;
    position: relative;
      background: linear-gradient(#F72648, #FCCB3C);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    &--2 {
        background: linear-gradient(#26C9F7, #DFFC3C);
    }
    &--3 {
      background: linear-gradient(#3CA3FC, #FFD300);
    }
  }
  &__header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
  }
  &__footer {
    position: relative;
    padding: 20px;
  }
  &__image {
    position: absolute;
    top: -320px;
    left: -50px;
    width: 125%;
  }
}
.card__watermark {
  overflow: hidden;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
}

.card-2 {
  left: 150%;
}

.card__watermark::after {
  content: attr(data-watermark);
  position: relative;
  left: -20px;
  color: rgba(0, 0, 0, .3);
  font-size: 240px;
  font-weight: 700;
  text-transform: uppercase;
}
.title {
  text-transform: uppercase;
  padding-bottom: 10px;
  letter-spacing: 1.5px;
  font-size: 15px;
  font-weight: 700;
}
.description {
  font-size: 13px;
  height: 100px;
  font-weight: 300;
  padding-bottom: 300px;
}

.add {
  text-transform: uppercase;
  border: #8850FF 2px solid;
  border-radius: 15px;
  margin: 0 auto 15px;
  padding: 15px;
  width: 50%;
  text-align: center;
  color: #8850FF;
  font-weight: 300;
  cursor: pointer;
  background: white;
  z-index: 500;
  transition: .5s;
  transition-property: color border-radius;
  &:hover {    
    border-radius: 20px;
    color: red;
  }
}

.category {
  color: gray;
  text-align: center;
  font-size: 11px;
  font-weight: 300;
  text-transform: uppercase;
}

View Compiled

(function() {
  
  var BODY_BACKGROUNDS = [
    '#8850FF',
    '#FFBA00',
    '#4054FF'
  ];
  
  var bodyEl = document.querySelector('body');
  
  function Slider () {
    this.cards = document.querySelectorAll('.card');
    this.currentIndex = 0;
    this.isDragging = false;
    
    this.startX = 0;
    this.currentX = 0;
    this.setEvents();
  }
  
  Slider.prototype.setEvents = function () {
    document.addEventListener('mousedown', this.onStart.bind(this));
    document.addEventListener('mousemove', this.onMove.bind(this));
    document.addEventListener('mouseup', this.onEnd.bind(this));
  };
  
  Slider.prototype.onStart = function (evt) {
    this.isDragging = true;
    this.currentX = evt.pageX;
    this.startX = this.currentX;
    
    var card = this.cards[this.currentIndex];
    
    this.windowWidth = window.innerWidth;
    this.cardWidth = card.offsetWidth;
    this.ratio = this.windowWidth / (this.cardWidth / 4 );
  };
  
  Slider.prototype.onMove = function (evt) {
    if (!this.isDragging) return;

    this.currentX = evt.pageX || evt.touches[0].pageX;
    var diff = this.startX - this.currentX;
    diff *= -1;

    // don't let drag way from the center more than quarter of window
    if (Math.abs(diff) > this.windowWidth / 4) {
      if (diff > 0) {
        diff = this.windowWidth / 4;
      } else {
        diff = - this.windowWidth / 4;
      }
    }

    this.moveCard(diff);
  };
  
  Slider.prototype.moveCard = function (diff) {
    var card = this.cards[this.currentIndex];
    card.style.transform = 'translateX(calc(' + diff + 'px - 50%))';
    
    this.moveCardEls(diff);
  };
  
  Slider.prototype.onEnd = function (evt) {
    this.isDragging = false;
    var diff = this.startX - this.currentX;
    var direction = (diff > 0) ? 'left' : 'right';
    this.startX = 0;

    if (Math.abs(diff) > this.windowWidth / 4) {
      if (direction === 'left') {
        this.slideLeft();
      } else if (direction === 'right') {
        this.slideRight();
      } else {
        this.cancelMoveCard();
      }
    } else {
      this.cancelMoveCard();

    }
  };
  
    // slide to left direction
  Slider.prototype.slideLeft = function () {
    // if last don't do nothing
    if (this.currentIndex === this.cards.length - 1) {
      this.cancelMoveCard();
      return;
    }
    
    var self = this;
    var card = this.cards[this.currentIndex];
    var cardWidth = this.windowWidth / 2;
    card.style.left = '-50%';
    
    this.resetCardEls();
    
    this.currentIndex += 1;
    card = this.cards[this.currentIndex];

    card.style.left = '50%';
    
    bodyEl.style.backgroundColor = BODY_BACKGROUNDS[this.currentIndex];
  };
    
  Slider.prototype.slideRight = function () {
    // if last don't do nothing
     if (this.currentIndex === 0) {
      this.cancelMoveCard();
      return;
    }
    
    var self = this;
    var card = this.cards[this.currentIndex];
    var cardWidth = this.windowWidth / 2;
    
    card.style.left = '150%';
    
    this.resetCardEls();
    
    this.currentIndex -= 1;
    card = this.cards[this.currentIndex];
    card.style.left = '50%';
    
    bodyEl.style.backgroundColor = BODY_BACKGROUNDS[this.currentIndex];
  }; 
  
  
  Slider.prototype.cancelMoveCard = function () {
    var self = this;
    var card = this.cards[this.currentIndex];

    card.style.transition = 'transform 0.5s ease-out';
    card.style.transform = '';

    this.resetCardEls();
  };
  
  Slider.prototype.moveCardEls = function (diff) {
    var card = this.cards[this.currentIndex];
    
    var cardImage = card.querySelector('.card__image');
    var cardHeader = card.querySelector('.card__header');
    var cardTitle = card.querySelector('.title');
    var cardSubtitle = card.querySelector('.description');
    
    cardImage.style.transform = 'translateX(' + (diff / (this.ratio * 0.35)) + 'px)';
    
    cardHeader.style.transform = 'translateX(' + (diff / (this.ratio * 0.95)) + 'px)';
    cardTitle.style.transform = 'translateX(' + (diff / (this.ratio * 0.90)) + 'px)';
    cardSubtitle.style.transform = 'translateX(' + (diff / (this.ratio * 0.85)) + 'px)';
    
    card.style.transition = '';
  };
  
  Slider.prototype.resetCardEls = function () {
    var self = this;
    var card = this.cards[this.currentIndex];
    
    var cardImage = card.querySelector('.card__image');
    var cardHeader = card.querySelector('.card__header');
    var cardTitle = card.querySelector('.title');
    var cardSubtitle = card.querySelector('.description');
    
    cardImage.style.transform = '';
    cardHeader.style.transform = '';
    cardTitle.style.transform = '';
    cardSubtitle.style.transform = '';    
    
    setTimeout(function () {
      card.style.transform = '';
    }, 500);
    
  };
  
  // create slider
  var slider = new Slider();  
})();

This Pen is owned by dwb on CodePen.

See more by @dwbelliston on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.