LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Pull Down Content Part

Payment receipt

$ 666

Something whatever

View details

15 min

Payment receipt

$ 666

Something whatever

View details

15 min

Payment receipt

$ 666

Something whatever

View details

15 min

Payment receipt

$ 666

Something whatever

View details

15 min

Payment receipt

$ 666

Something whatever

View details

15 min

CSS
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  background: #ffce4c;
}

.demo {
  position: relative;
  width: 500px;
  height: 800px;
  margin: 70px auto;
  border-radius: 10px;
  background-color: #5b399e;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.demo__header {
  position: relative;
  height: 90px;
  text-align: center;
  font-size: 30px;
  line-height: 95px;
  color: #fff;
}
.demo__cont {
  overflow: hidden;
  position: relative;
  padding-top: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.demo__line {
  z-index: 2;
  position: absolute;
  left: 1px;
  top: 0;
  width: 498px;
  height: 3px;
  background: #ffbd00;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.demo.s--printing .demo__line {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: scaleX(1) !important;
          transform: scaleX(1) !important;
}
.demo.s--printing-step-3 .demo__line {
  -webkit-transition: -webkit-transform 0.275s;
  transition: -webkit-transform 0.275s;
  transition: transform 0.275s;
  transition: transform 0.275s, -webkit-transform 0.275s;
  -webkit-transform: scaleX(0) !important;
          transform: scaleX(0) !important;
}
.demo.s--reset .demo__line {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: scaleX(0) !important;
          transform: scaleX(0) !important;
}
.demo__items {
  overflow: hidden;
  z-index: 3;
  position: relative;
  height: 705px;
  cursor: -webkit-grab;
  cursor: grab;
}
.demo.s--printing .demo__items {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate3d(0, 150px, 0) !important;
          transform: translate3d(0, 150px, 0) !important;
}
.demo.s--printing-step-3 .demo__items {
  -webkit-transition: padding 0.33s 0.22s cubic-bezier(0.56, 0.33, 0.32, 1.45);
  transition: padding 0.33s 0.22s cubic-bezier(0.56, 0.33, 0.32, 1.45);
  padding-top: 75px;
}
.demo.s--reset .demo__items {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}

.printer {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 290px;
  margin-left: -145px;
  margin-top: -90px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.demo.s--printing .printer {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate3d(0, 90px, 0) !important;
          transform: translate3d(0, 90px, 0) !important;
}
.demo.s--printing-step-3 .printer {
  -webkit-transition: -webkit-transform 0.275s;
  transition: -webkit-transform 0.275s;
  transition: transform 0.275s;
  transition: transform 0.275s, -webkit-transform 0.275s;
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}
.demo.s--reset .printer {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translate3d(0, 0, 0) !important;
          transform: translate3d(0, 0, 0) !important;
}
.printer__main-part {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.printer__top {
  z-index: 1;
  height: 15px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  background: #5f45ac;
}
.printer__btm {
  height: 50px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background: #4e2f96;
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.25);
}
.printer__circle {
  position: absolute;
  right: 32px;
  bottom: 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #edab26;
}
.printer__yellow {
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 25px;
  width: 170px;
  height: 100px;
  margin-left: -85px;
}
.printer__yellow-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 38px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-color: #feba2a;
}
.printer__yellow-part {
  position: absolute;
  top: 100%;
  width: 78px;
  height: 8px;
  background-color: inherit;
}
.printer__yellow-part:after {
  content: "";
  position: absolute;
  top: 100%;
  width: 40px;
  height: 16px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: inherit;
}
.printer__yellow-part:nth-child(1) {
  left: 0;
  border-bottom-right-radius: 4px;
}
.printer__yellow-part:nth-child(1):after {
  left: 0;
}
.printer__yellow-part:nth-child(2) {
  right: 0;
  border-bottom-left-radius: 4px;
}
.printer__yellow-part:nth-child(2):after {
  right: 0;
}
.printer__head {
  position: absolute;
  left: 10px;
  top: 0;
  width: 20px;
  height: 10px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #e73388;
}
.demo.s--printing .printer__head {
  -webkit-animation: printerHeadAnimation 0.45s 0.4s 3;
          animation: printerHeadAnimation 0.45s 0.4s 3;
}
.printer__item-cont {
  position: relative;
  height: 100%;
}

.item {
  position: relative;
  width: 450px;
  height: 210px;
  margin: 0 auto 20px;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25);
  background: #fff;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.item--in-printer {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -225px;
  margin-top: -140px;
  -webkit-transform: rotateX(-180deg) scale(0.33333);
          transform: rotateX(-180deg) scale(0.33333);
}
.demo.s--printing .item--in-printer {
  -webkit-transition: margin-top 1.8s 0.4s ease-out;
  transition: margin-top 1.8s 0.4s ease-out;
  margin-top: -55px;
}
.demo.s--printing-step-3 .item--in-printer {
  display: none;
}
.item--boilerplate {
  display: none;
}
.item.s--cloned {
  position: absolute;
  margin-left: -150px;
  margin-top: -70px;
  -webkit-transform: rotateX(-180deg) scale(0.33333);
          transform: rotateX(-180deg) scale(0.33333);
}
.demo.s--printing-step-3 .item.s--cloned {
  -webkit-transition: -webkit-transform 0.55s cubic-bezier(0.67, 0.28, 0.39, 1.22);
  transition: -webkit-transform 0.55s cubic-bezier(0.67, 0.28, 0.39, 1.22);
  transition: transform 0.55s cubic-bezier(0.67, 0.28, 0.39, 1.22);
  transition: transform 0.55s cubic-bezier(0.67, 0.28, 0.39, 1.22), -webkit-transform 0.55s cubic-bezier(0.67, 0.28, 0.39, 1.22);
  -webkit-transform: rotateX(0) scale(1) translateY(30px);
          transform: rotateX(0) scale(1) translateY(30px);
}
.item__side {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.item__front {
  z-index: 2;
}
.item__top {
  position: relative;
  height: 150px;
  padding: 25px 30px 10px;
}
.item__heading {
  margin-bottom: 20px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  color: #bebebe;
}
.item__amount {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: bold;
}
.item__info {
  max-width: 340px;
  font-size: 16px;
  line-height: 1.5;
}
.item__img {
  position: absolute;
  right: 30px;
  top: 60px;
  width: 70px;
  height: 70px;
}
.item__btm {
  position: relative;
  height: 60px;
  border-top: 2px solid #dedede;
  line-height: 58px;
}
.item__btm p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: 2px;
}
.item__details {
  padding-left: 30px;
  font-size: 18px;
  font-weight: bold;
  color: #9589b1;
}
.item__when {
  padding-right: 20px;
  text-align: right;
  font-size: 14px;
  color: #cccccc;
}
.item__back {
  -webkit-transform: rotateX(180deg) scaleY(-1);
          transform: rotateX(180deg) scaleY(-1);
}
.item__back .item__heading {
  height: 18px;
  width: 90px;
  background: #f1f1f1;
}
.item__back .item__amount {
  width: 60px;
  height: 30px;
  background: #cfcfcf;
}
.item__back .item__info {
  width: 160px;
  height: 20px;
  background: #cfcfcf;
}
.item__back .item__img {
  background-color: orange;
  border-radius: 50%;
}
.item__back .item__details {
  position: absolute;
  left: 30px;
  top: 20px;
  width: 80px;
  height: 20px;
  background: #b1a8c5;
}
.item__back .item__when {
  position: absolute;
  right: 20px;
  top: 22px;
  width: 50px;
  height: 16px;
  background: #e5e5e5;
}

@-webkit-keyframes printerHeadAnimation {
  50% {
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
}

@keyframes printerHeadAnimation {
  50% {
    -webkit-transform: translateX(60px);
            transform: translateX(60px);
  }
}
JS
$(document).ready(function() {

  var $demo = $('.demo');
  var $items = $('.demo__items');
  var $line = $('.demo__line');
  var $printer = $('.printer');
  var $printerItemCont = $('.printer__item-cont');

  var maxDragY = 150;
  var minDragY = 60;
  var printerInitY = -90;
  var dragResistance = 0.6;
  var deltaY = 0;
  var printing = false;

  var printStep1AT = 0.3;
  var printStep2Delay = printStep1AT + 0.1;
  var printStep2AT = 1.8;
  var printStep3Delay = printStep2Delay + printStep2AT;
  var printStep3AT = 0.55;
  var printFullAT = printStep3Delay + printStep3AT;

  var itemsInfo = [
    {
      heading: 'My Twitter',
      amount: '@NikolayTalanov',
      amountLink: 'https://twitter.com/NikolayTalanov',
      info: 'Follow me on Twitter!',
      img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/twitter big icon.png',
      details: 'How is your day?',
      when: 'Just now',
      imgBackColor: '#1DA1F2'
    },
    {
      heading: 'Dribbble Shot',
      amount: 'Shot by Saptarshi Prakash',
      amountLink: 'https://dribbble.com/shots/3031884-Pull-to-Refresh-Printer',
      info: 'Thanks to this guy for cool gif!',
      img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/dribble big icon.png',
      details: 'Hi!',
      when: 'It\'s been a while',
      imgBackColor: '#ea4c89'
    },
    {
      heading: 'Other demos',
      amount: 'My codepen',
      amountLink: 'https://codepen.io/suez/',
      info: 'Check out my other demos',
      img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/codepen big icon.png',
      details: 'Hola',
      when: '666 min',
      imgBackColor: '#000'
    }
  ];
  
  var itemCounter = 0;
  var $itemBoilerplate = $('.item--boilerplate');

  function generateNewItem() {
    var $item = $itemBoilerplate.clone();
    var $itemFront = $('.item__front', $item);
    var data = itemsInfo[itemCounter];
    itemCounter++;
    if (itemCounter > 2) itemCounter = 0;
    
    $item.removeClass('item--boilerplate');
    
    Object.keys(data).forEach(function(prop) {
      var $el = $('.item__' + prop, $itemFront);
      var val = data[prop];
      
      if (prop === 'imgBackColor') return;
      if (prop === 'img') {
        $el.attr('src', val);
      } else if (prop === 'amountLink') {
        $el.attr('href', val);
      } else {
        $el.text(val);
      }
    });
    
    $('.item__back .item__img', $item).css('background', data.imgBackColor);
    
    return $item;
  };

  function insertNewItem() {
    var $newItem = generateNewItem();

    $printerItemCont.empty();
    $printerItemCont.append($newItem);
  };
  
  insertNewItem();

  function cloneAndPlacePrintedItem() {
    var $printedItem = $('.item--in-printer');
    var $clone = $printedItem.clone();
    var itemOffsets = $printedItem.offset();
    var demoOffsets = $demo.offset();
    var left = itemOffsets.left - demoOffsets.left;
    var top = itemOffsets.top - demoOffsets.top;

    $clone.removeClass('item--in-printer').addClass('s--cloned');
    $clone.css({left: left, top: top});

    $demo.append($clone);

    setTimeout(function() {
      var $finalClone = $clone.clone();
      $finalClone.attr('style', '');
      $finalClone.removeClass('s--cloned');

      $items.prepend($finalClone);
      insertNewItem();
      
      setTimeout(function() {
        $clone.remove();
      }, 50);
    }, printStep3AT * 1000);
  };

  function runPrintAnimation() {
    $demo.addClass('s--printing');

    setTimeout(function() {
      cloneAndPlacePrintedItem();
      $demo.css('top');
      $demo.addClass('s--printing-step-3');
    }, printStep3Delay * 1000);
  };

  $(document).on('mousedown touchstart', '.demo__items', function(e) {
    if (printing) return;
    console.log('click touch');
    var startY = e.pageY || e.originalEvent.touches[0].pageY;

    $items.addClass('s--no-select');

    $(document).on('mousemove touchmove', function(e) {
      e.preventDefault();
      var y = e.pageY || e.originalEvent.touches[0].pageY;
      deltaY = (y - startY) * dragResistance;

      if (deltaY < 0) deltaY = 0;
      if (deltaY > maxDragY) deltaY = maxDragY;

      var progress = deltaY / maxDragY;
      var printerY = printerInitY * progress * -1;

      $items.css('transform', 'translate3d(0,'+ deltaY +'px,0)');
      $line.css('transform', 'scaleX('+ Math.sqrt(progress) +')');
      $printer.css('transform', 'translate3d(0,'+ printerY +'px,0)');
    });

    $(document).on('mouseup touchend', function() {
      $(document).off('mousemove touchmove mouseup touchend');
      $items.removeClass('s--no-select');
      if (!deltaY) return;

      printing = true;
      var _printAT = printFullAT;

      if (deltaY >= minDragY) {
        runPrintAnimation();
      } else {
        $demo.addClass('s--reset');
        _printAT = printStep1AT;
      }

      setTimeout(function() {
        $demo.removeClass('s--printing s--printing-step-3 s--reset');
        $items.attr('style', '');
        $line.attr('style', '');
        $printer.attr('style', '');

        printing = false;
        deltaY = 0;
      }, _printAT * 1000);
    });
  });

});
Host Instantly Drag and Drop Website Builder

 

Description

Original gif - https://dribbble.com/shots/3031884-Pull-to-Refresh-Printer
Term
Mon, 11/27/2017 - 21:38

Related Codes

Pen ID
Pen ID
Pen ID