Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

translatable.js 1.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import Vue from 'vue';
  2. export default Vue.extend({
  3. name: 'translatable',
  4. props: {
  5. height: Number
  6. },
  7. data: function data() {
  8. return {
  9. elOffsetTop: 0,
  10. parallax: 0,
  11. parallaxDist: 0,
  12. percentScrolled: 0,
  13. scrollTop: 0,
  14. windowHeight: 0,
  15. windowBottom: 0
  16. };
  17. },
  18. computed: {
  19. imgHeight: function imgHeight() {
  20. return this.objHeight();
  21. }
  22. },
  23. beforeDestroy: function beforeDestroy() {
  24. window.removeEventListener('scroll', this.translate, false);
  25. window.removeEventListener('resize', this.translate, false);
  26. },
  27. methods: {
  28. calcDimensions: function calcDimensions() {
  29. var offset = this.$el.getBoundingClientRect();
  30. this.scrollTop = window.pageYOffset;
  31. this.parallaxDist = this.imgHeight - this.height;
  32. this.elOffsetTop = offset.top + this.scrollTop;
  33. this.windowHeight = window.innerHeight;
  34. this.windowBottom = this.scrollTop + this.windowHeight;
  35. },
  36. listeners: function listeners() {
  37. window.addEventListener('scroll', this.translate, false);
  38. window.addEventListener('resize', this.translate, false);
  39. },
  40. /** @abstract **/
  41. objHeight: function objHeight() {
  42. throw new Error('Not implemented !');
  43. },
  44. translate: function translate() {
  45. this.calcDimensions();
  46. this.percentScrolled = (this.windowBottom - this.elOffsetTop) / (parseInt(this.height) + this.windowHeight);
  47. this.parallax = Math.round(this.parallaxDist * this.percentScrolled);
  48. }
  49. }
  50. });
  51. //# sourceMappingURL=translatable.js.map