Parallax Vue

parallax.vue

<template lang="jade">
.wrapper
  section.parallax-background(:style="parallaxStyle", :id="parallaxId")
    .parallax-content(v-if="pcontent != 0")
      slot
    .scroll-down(v-if="pscrolldown != 0")
</template>

<script>
require('jeet')
require('rupture')
require('axis')
import $ from 'jquery'
require('jquery-ui')

export default {
  props: {
    'bgImg': {
    },
    'speed': {
    },
    'pcontent': {
    },
    'parallaxId': {
    },
    'bgSize': {
      type: String,
      default: 'cover'
    }
  },
  data () {
    return {
      _trueHeight: null,
      xPosBase: null,
      yPosBase: null,
      imgRatio: null,
      imgHeight: null,
      imgWidth: null,
      divHeight: null,
      timer: null,
      resizeOk: true,
      scrollOk: true,
      _bgImg: null,
      baseSpeed: 100.0,
      windowScrollDistance: 0,
      parallaxData: null
    }
  },
  computed: {
    parallaxStyle: function () {
      if (!this.parallaxData) {
        return {
          'background-image': 'url(\'' + this.bgImg + '\')',
          'background-size': this.bgSize
        }
      }
      let windowScroll = this.windowScrollDistance
      let divOffset = this.parallaxData.data.divOffsetTop
      let scrollAmount = windowScroll - divOffset
      let [speed, baseSpeed] = this.realSpeed
      let moveImageAmount = scrollAmount * speed / baseSpeed - windowScroll
      let coordinates = this.parallaxData.data.xPosBase + ' ' + parseFloat(moveImageAmount + divOffset) + 'px'
      let res = {
        'background-image': 'url(' + this.bgImg + ')',
        'background-size': this.bgSize,
        'background-position': coordinates
      }
      return res
    },
    realSpeed: function () {
      return [this.speed * (1.0 + this.$root.devicePixelRatio), 100.0 * (this.$root.devicePixelRatio)]
    }
  },
  components: {
  },
  ready () {

    var vm = this
    if (!this.speed) {
      this.speed = 30
    }
    if (!this.pcontent) {
      this.pcontent = 1
    }
    if (!this.pscrolldown) {
      this.pscrolldown = 1
    }

    // this returns a promise with the image and divdata
    let parallaxData = this.getAndUpdateImageInformation(this.parallaxId)
    parallaxData.then((res) => {
      this.parallaxData = res
    })

    $(window).on('resize', () => {
      if (this.resizeOk === true) {
        let parallaxData = this.getAndUpdateImageInformation(this.parallaxId)
        parallaxData.then((res) => {
          this.parallaxData = res
        })
      }
    })

    $(document).on('scroll', () => {
      vm.windowScrollUpdate()
    })
  },
  destroyed: () => {
    $(document).unbind('scroll')
    $(window).unbind('resize')
  },
  methods: {
    windowScrollUpdate: function () {
      this.windowScrollDistance = $(window).scrollTop()
    },
    getAndUpdateImageInformation: function (divId) {
      let parallaxId = $('#' + divId)
      let vm = this
      var result = new Promise(function (resolve, reject) {
        let cb = function () {
          var imageInfo = vm.getImageInformation() // Promise with the image info

          imageInfo.then(function (result) {
            var bgImgHeight = result.height
            var bgImgWidth = result.width

            var divRatio = parallaxId.width() / parallaxId.height()
            var divHeight = parallaxId.height()

            var imgRatio = bgImgWidth / bgImgHeight

            var xPosBase = '0%'
            var yPosBase = '100%'
            var divWidth = parallaxId.width()
            var trueHeight = parallaxId.width() / imgRatio
            if (divRatio <= imgRatio) {
              trueHeight = parallaxId.height()
            }

            // Now we save the data to the parallax id

            var res = {
              'xPosBase': xPosBase,
              'yPosBase': yPosBase,
              'imgRatio': imgRatio,
              'imgHeight': bgImgHeight,
              'imgWidth': bgImgWidth,
              'divHeight': divHeight,
              'divWidth': divWidth,
              'trueHeight': trueHeight,
              'divOffsetTop': parallaxId.offset().top,

            }
            resolve({
              'data': res,
              'obj': parallaxId
            })
          })
        }
        cb()
      })
      return result
    },
    getImageInformation: function () {
      var result = new Promise((resolve, reject) => {
        let path = this.bgImg
        var img = new Image()
        img.onload = () => {
          resolve({
            width: img.width,
            height: img.height
          })
        }
        img.src = path
      })
      return result
    }
  },
  events: {
  }
}
</script>

<style lang="stylus" scoped>
@import 'axis'
@import 'rupture'
@import 'jeet'

normalize-css()
base()


////////////////////////////////////////////////////////////////////////////////
/////// Parallax Effect
////////////////////////////////////////////////////////////////////////////////

.wrapper
section
  width 100%
  height 100%
  position relative
  padding 0
  margin 0
  background-repeat no-repeat
  background-position bottom left
  z-index inherit
  background-attachment fixed

.parallax-content
  box-sizing border-box
  position absolute
  top 10vh
  left 6vw
  width 88vw
  height 87vh
  line-height 1.5rem
  margin auto
  text-align center
  display block


////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////////
////// Media Queries
////////////////////////////////////////////////////////////////////////////////

// Smartphones portrait & landscape
@media screen and (max-device-width: 480px) and (min-device-width: 320px)
  {}

// Smartphones Landscape
@media screen and (min-width: 321px)
  {}
// Portrait
@media screen and (max-width: 320px)
  {}

// Ipads
@media screen and (max-device-width: 1024px) and (min-device-width: 768px)
  {}
@media screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation : landscape)
  {}
@media screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation : portrait)
  {}

// Desktops and Laptops
@media screen and (min-width: 1224px)
  {}

</style>