thisislawatts /
coverimage
| @@ 89-114 (lines=26) @@ | ||
| 86 | * Parallax FX |
|
| 87 | * |
|
| 88 | */ |
|
| 89 | draw() { |
|
| 90 | const _this = this; |
|
| 91 | const friction = 0.5; |
|
| 92 | const imageOffsetX = document.body.scrollTop * friction; |
|
| 93 | const imageOffsetY = document.body.scrollTop * friction; |
|
| 94 | const maximumMovementY = ( _this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y; |
|
| 95 | const maximumMovementX = ( _this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x; |
|
| 96 | ||
| 97 | if ( maximumMovementX > 0 ) { |
|
| 98 | if (imageOffsetX < maximumMovementX ) { |
|
| 99 | // console.log('New position:', maximumMovementX - imageOffsetX); |
|
| 100 | _this.$img.css({ |
|
| 101 | 'transform': `translateX(${maximumMovementX - imageOffsetX}px)` |
|
| 102 | }); |
|
| 103 | } |
|
| 104 | ||
| 105 | } else { |
|
| 106 | if ( imageOffsetY < maximumMovementY ) { |
|
| 107 | _this.$img.css('transform', `translateY(${maximumMovementY - imageOffsetY}px)`); |
|
| 108 | } |
|
| 109 | } |
|
| 110 | ||
| 111 | window.requestAnimationFrame(() => { |
|
| 112 | _this.draw(); |
|
| 113 | }); |
|
| 114 | } |
|
| 115 | ||
| 116 | getElementForSizing() { |
|
| 117 | const _this = this; |
|
| @@ 97-121 (lines=25) @@ | ||
| 94 | ||
| 95 | _createClass(CoverImage, [{ |
|
| 96 | key: 'draw', |
|
| 97 | value: function draw() { |
|
| 98 | var _this = this; |
|
| 99 | var friction = 0.5; |
|
| 100 | var imageOffsetX = document.body.scrollTop * friction; |
|
| 101 | var imageOffsetY = document.body.scrollTop * friction; |
|
| 102 | var maximumMovementY = (_this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y; |
|
| 103 | var maximumMovementX = (_this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x; |
|
| 104 | ||
| 105 | if (maximumMovementX > 0) { |
|
| 106 | if (imageOffsetX < maximumMovementX) { |
|
| 107 | // console.log('New position:', maximumMovementX - imageOffsetX); |
|
| 108 | _this.$img.css({ |
|
| 109 | 'transform': 'translateX(' + (maximumMovementX - imageOffsetX) + 'px)' |
|
| 110 | }); |
|
| 111 | } |
|
| 112 | } else { |
|
| 113 | if (imageOffsetY < maximumMovementY) { |
|
| 114 | _this.$img.css('transform', 'translateY(' + (maximumMovementY - imageOffsetY) + 'px)'); |
|
| 115 | } |
|
| 116 | } |
|
| 117 | ||
| 118 | window.requestAnimationFrame(function () { |
|
| 119 | _this.draw(); |
|
| 120 | }); |
|
| 121 | } |
|
| 122 | }, { |
|
| 123 | key: 'getElementForSizing', |
|
| 124 | value: function getElementForSizing() { |
|
