parallax.mjs 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. import { e as elementChildren } from '../shared/utils.mjs';
  2. function Parallax(_ref) {
  3. let {
  4. swiper,
  5. extendParams,
  6. on
  7. } = _ref;
  8. extendParams({
  9. parallax: {
  10. enabled: false
  11. }
  12. });
  13. const elementsSelector = '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]';
  14. const setTransform = (el, progress) => {
  15. const {
  16. rtl
  17. } = swiper;
  18. const rtlFactor = rtl ? -1 : 1;
  19. const p = el.getAttribute('data-swiper-parallax') || '0';
  20. let x = el.getAttribute('data-swiper-parallax-x');
  21. let y = el.getAttribute('data-swiper-parallax-y');
  22. const scale = el.getAttribute('data-swiper-parallax-scale');
  23. const opacity = el.getAttribute('data-swiper-parallax-opacity');
  24. const rotate = el.getAttribute('data-swiper-parallax-rotate');
  25. if (x || y) {
  26. x = x || '0';
  27. y = y || '0';
  28. } else if (swiper.isHorizontal()) {
  29. x = p;
  30. y = '0';
  31. } else {
  32. y = p;
  33. x = '0';
  34. }
  35. if (x.indexOf('%') >= 0) {
  36. x = `${parseInt(x, 10) * progress * rtlFactor}%`;
  37. } else {
  38. x = `${x * progress * rtlFactor}px`;
  39. }
  40. if (y.indexOf('%') >= 0) {
  41. y = `${parseInt(y, 10) * progress}%`;
  42. } else {
  43. y = `${y * progress}px`;
  44. }
  45. if (typeof opacity !== 'undefined' && opacity !== null) {
  46. const currentOpacity = opacity - (opacity - 1) * (1 - Math.abs(progress));
  47. el.style.opacity = currentOpacity;
  48. }
  49. let transform = `translate3d(${x}, ${y}, 0px)`;
  50. if (typeof scale !== 'undefined' && scale !== null) {
  51. const currentScale = scale - (scale - 1) * (1 - Math.abs(progress));
  52. transform += ` scale(${currentScale})`;
  53. }
  54. if (rotate && typeof rotate !== 'undefined' && rotate !== null) {
  55. const currentRotate = rotate * progress * -1;
  56. transform += ` rotate(${currentRotate}deg)`;
  57. }
  58. el.style.transform = transform;
  59. };
  60. const setTranslate = () => {
  61. const {
  62. el,
  63. slides,
  64. progress,
  65. snapGrid,
  66. isElement
  67. } = swiper;
  68. const elements = elementChildren(el, elementsSelector);
  69. if (swiper.isElement) {
  70. elements.push(...elementChildren(swiper.hostEl, elementsSelector));
  71. }
  72. elements.forEach(subEl => {
  73. setTransform(subEl, progress);
  74. });
  75. slides.forEach((slideEl, slideIndex) => {
  76. let slideProgress = slideEl.progress;
  77. if (swiper.params.slidesPerGroup > 1 && swiper.params.slidesPerView !== 'auto') {
  78. slideProgress += Math.ceil(slideIndex / 2) - progress * (snapGrid.length - 1);
  79. }
  80. slideProgress = Math.min(Math.max(slideProgress, -1), 1);
  81. slideEl.querySelectorAll(`${elementsSelector}, [data-swiper-parallax-rotate]`).forEach(subEl => {
  82. setTransform(subEl, slideProgress);
  83. });
  84. });
  85. };
  86. const setTransition = function (duration) {
  87. if (duration === void 0) {
  88. duration = swiper.params.speed;
  89. }
  90. const {
  91. el,
  92. hostEl
  93. } = swiper;
  94. const elements = [...el.querySelectorAll(elementsSelector)];
  95. if (swiper.isElement) {
  96. elements.push(...hostEl.querySelectorAll(elementsSelector));
  97. }
  98. elements.forEach(parallaxEl => {
  99. let parallaxDuration = parseInt(parallaxEl.getAttribute('data-swiper-parallax-duration'), 10) || duration;
  100. if (duration === 0) parallaxDuration = 0;
  101. parallaxEl.style.transitionDuration = `${parallaxDuration}ms`;
  102. });
  103. };
  104. on('beforeInit', () => {
  105. if (!swiper.params.parallax.enabled) return;
  106. swiper.params.watchSlidesProgress = true;
  107. swiper.originalParams.watchSlidesProgress = true;
  108. });
  109. on('init', () => {
  110. if (!swiper.params.parallax.enabled) return;
  111. setTranslate();
  112. });
  113. on('setTranslate', () => {
  114. if (!swiper.params.parallax.enabled) return;
  115. setTranslate();
  116. });
  117. on('setTransition', (_swiper, duration) => {
  118. if (!swiper.params.parallax.enabled) return;
  119. setTransition(duration);
  120. });
  121. }
  122. export { Parallax as default };