parallax.js 3.5 KB

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