How to use the @pluginjs/styled.getOffset function in @pluginjs/styled

To help you get started, we’ve selected a few @pluginjs/styled examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pluginjs / pluginjs / modules / parallax / src / main.js View on Github external
this.speed = 0.5
    }

    this.updateVars()

    const style = {
      'object-fit': 'cover'
    }

    if (this.direction === 'vertical') {
      style.height = this.imgHeight
      style.width = this.imgWidth
      style.left = 0

      const distanceFromTop =
        getOffset(this.container).top - this.getScrollTop()
      const imageDiff = this.imgHeight - this.containerHeight
      const percent =
        1 -
        (distanceFromTop + this.containerHeight) /
          (this.windowHeight + this.containerHeight)
      const scrollDistance =
        this.windowHeight * (1 - this.speed) * 2 - imageDiff
      const fromY = this.windowHeight * (1 - this.speed)

      this.distance = (percent * scrollDistance - fromY).toFixed(2)

      this.transform = `translate3d(0, ${this.distance}px, 0)`
    } else {
      style.width = `${this.containerWidth *
        (1 + Math.abs(this.speed) * 1.5)}px`
      style.height = this.containerHeight
github pluginjs / pluginjs / modules / magnify / src / main.js View on Github external
onEnter() {
    addClass(this.classes.MOVING, this.$wrap)

    bindEvent(
      this.eventName('mousemove touchmove'),
      this.onMove.bind(this),
      this.$zoom
    )

    bindEvent(
      this.eventName('mouseleave touchend touchcancel'),
      this.onLeave.bind(this),
      this.$zoom
    )

    this.offset = getOffset(this.$zoom)
    this.initTargetDimension()

    this.enter('moving')
    this.trigger(EVENTS.ENTER)
  }