LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



  
  
CSS
.draggable-header-view {
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  width: 320px;
  height: 560px;
  overflow: hidden;
  margin: 30px auto;
  position: relative;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.draggable-header-view h1 {
  font-weight: 300;
  font-size: 1.8em;
  margin-top: 0;
}
.draggable-header-view .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.draggable-header-view .header,
.draggable-header-view .content {
  position: relative;
  z-index: 1;
  padding: 30px;
  box-sizing: border-box;
}
.draggable-header-view .header {
  color: #fff;
  height: 160px;
}
.draggable-header-view .header a {
  color: #fff;
}
.draggable-header-view .content {
  color: #333;
  line-height: 1.5em;
}
.draggable-header-view .content a {
  color: #3F51B5;
}
JS
document.body.addEventListener('touchmove', e => e.preventDefault())

Vue.component('draggable-header-view', {

  template: '#header-view-template',

  data () {
    return {
      dragging: false,
      // quadratic bezier control point
      c: { x: 160, y: 160 },
      // record drag start point
      start: { x: 0, y: 0 }
    }
  },

  computed: {
    headerPath () {
      return `M0,0 L320,0 320,160 Q${ this.c.x },${ this.c.y } 0,160`
    },
    contentPosition () {
      const dy = this.c.y - 160
      const dampen = dy > 0 ? 2 : 4
      return {
        transform: `translate3d(0,${ dy / dampen }px,0)`
      }
    }
  },

  methods: {
    startDrag (e) {
      e = e.changedTouches ? e.changedTouches[0] : e
      this.dragging = true
      this.start.x = e.pageX
      this.start.y = e.pageY
    },
    onDrag (e) {
      e = e.changedTouches ? e.changedTouches[0] : e
      if (this.dragging) {
        this.c.x = 160 + (e.pageX - this.start.x)
        // dampen vertical drag by a factor
        const dy = e.pageY - this.start.y
        const dampen = dy > 0 ? 1.5 : 4
        this.c.y = 160 + dy / dampen
      }
    },
    stopDrag () {
      if (this.dragging) {
        this.dragging = false
        dynamics.animate(this.c, {
          x: 160,
          y: 160
        }, {
          type: dynamics.spring,
          duration: 700,
          friction: 280
        })
      }
    }
  }
})

new Vue({ el: 'body' })
Host Instantly Drag and Drop Website Builder

 

Description

Draggable elastic SVG curve using Vue.js + dynamics.js
Term
Mon, 11/27/2017 - 21:38

Related Codes

Pen ID
Pen ID
Pen ID