1 1
import Vue from 'vue'
2

3 1
export default Vue.extend({
4
  name: 'translatable',
5

6
  props: {
7
    height: Number,
8
  },
9

10 1
  data: () => ({
11
    elOffsetTop: 0,
12
    parallax: 0,
13
    parallaxDist: 0,
14
    percentScrolled: 0,
15
    scrollTop: 0,
16
    windowHeight: 0,
17
    windowBottom: 0,
18
  }),
19

20
  computed: {
21 0
    imgHeight (): number {
22 0
      return this.objHeight()
23
    },
24
  },
25

26 0
  beforeDestroy () {
27 0
    window.removeEventListener('scroll', this.translate, false)
28 0
    window.removeEventListener('resize', this.translate, false)
29
  },
30

31
  methods: {
32 0
    calcDimensions () {
33 0
      const offset = this.$el.getBoundingClientRect()
34

35 0
      this.scrollTop = window.pageYOffset
36 0
      this.parallaxDist = this.imgHeight - this.height
37 0
      this.elOffsetTop = offset.top + this.scrollTop
38 0
      this.windowHeight = window.innerHeight
39 0
      this.windowBottom = this.scrollTop + this.windowHeight
40
    },
41 0
    listeners () {
42 0
      window.addEventListener('scroll', this.translate, false)
43 0
      window.addEventListener('resize', this.translate, false)
44
    },
45
    /** @abstract **/
46 0
    objHeight (): number {
47 0
      throw new Error('Not implemented !')
48
    },
49 0
    translate () {
50 0
      this.calcDimensions()
51

52 0
      this.percentScrolled = (
53
        (this.windowBottom - this.elOffsetTop) /
54
        (parseInt(this.height) + this.windowHeight)
55
      )
56

57 0
      this.parallax = Math.round(this.parallaxDist * this.percentScrolled)
58
    },
59
  },
60
})

Read our documentation on viewing source code .

Loading