effect-creative.mjs 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. import { c as createShadow } from '../shared/create-shadow.mjs';
  2. import { e as effectInit } from '../shared/effect-init.mjs';
  3. import { e as effectTarget } from '../shared/effect-target.mjs';
  4. import { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';
  5. import { g as getSlideTransformEl, o as getRotateFix } from '../shared/utils.mjs';
  6. function EffectCreative(_ref) {
  7. let {
  8. swiper,
  9. extendParams,
  10. on
  11. } = _ref;
  12. extendParams({
  13. creativeEffect: {
  14. limitProgress: 1,
  15. shadowPerProgress: false,
  16. progressMultiplier: 1,
  17. perspective: true,
  18. prev: {
  19. translate: [0, 0, 0],
  20. rotate: [0, 0, 0],
  21. opacity: 1,
  22. scale: 1
  23. },
  24. next: {
  25. translate: [0, 0, 0],
  26. rotate: [0, 0, 0],
  27. opacity: 1,
  28. scale: 1
  29. }
  30. }
  31. });
  32. const getTranslateValue = value => {
  33. if (typeof value === 'string') return value;
  34. return `${value}px`;
  35. };
  36. const setTranslate = () => {
  37. const {
  38. slides,
  39. wrapperEl,
  40. slidesSizesGrid
  41. } = swiper;
  42. const params = swiper.params.creativeEffect;
  43. const {
  44. progressMultiplier: multiplier
  45. } = params;
  46. const isCenteredSlides = swiper.params.centeredSlides;
  47. const rotateFix = getRotateFix(swiper);
  48. if (isCenteredSlides) {
  49. const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0;
  50. wrapperEl.style.transform = `translateX(calc(50% - ${margin}px))`;
  51. }
  52. for (let i = 0; i < slides.length; i += 1) {
  53. const slideEl = slides[i];
  54. const slideProgress = slideEl.progress;
  55. const progress = Math.min(Math.max(slideEl.progress, -params.limitProgress), params.limitProgress);
  56. let originalProgress = progress;
  57. if (!isCenteredSlides) {
  58. originalProgress = Math.min(Math.max(slideEl.originalProgress, -params.limitProgress), params.limitProgress);
  59. }
  60. const offset = slideEl.swiperSlideOffset;
  61. const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0];
  62. const r = [0, 0, 0];
  63. let custom = false;
  64. if (!swiper.isHorizontal()) {
  65. t[1] = t[0];
  66. t[0] = 0;
  67. }
  68. let data = {
  69. translate: [0, 0, 0],
  70. rotate: [0, 0, 0],
  71. scale: 1,
  72. opacity: 1
  73. };
  74. if (progress < 0) {
  75. data = params.next;
  76. custom = true;
  77. } else if (progress > 0) {
  78. data = params.prev;
  79. custom = true;
  80. }
  81. // set translate
  82. t.forEach((value, index) => {
  83. t[index] = `calc(${value}px + (${getTranslateValue(data.translate[index])} * ${Math.abs(progress * multiplier)}))`;
  84. });
  85. // set rotates
  86. r.forEach((value, index) => {
  87. let val = data.rotate[index] * Math.abs(progress * multiplier);
  88. r[index] = val;
  89. });
  90. slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
  91. const translateString = t.join(', ');
  92. const rotateString = `rotateX(${rotateFix(r[0])}deg) rotateY(${rotateFix(r[1])}deg) rotateZ(${rotateFix(r[2])}deg)`;
  93. const scaleString = originalProgress < 0 ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})` : `scale(${1 - (1 - data.scale) * originalProgress * multiplier})`;
  94. const opacityString = originalProgress < 0 ? 1 + (1 - data.opacity) * originalProgress * multiplier : 1 - (1 - data.opacity) * originalProgress * multiplier;
  95. const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`;
  96. // Set shadows
  97. if (custom && data.shadow || !custom) {
  98. let shadowEl = slideEl.querySelector('.swiper-slide-shadow');
  99. if (!shadowEl && data.shadow) {
  100. shadowEl = createShadow('creative', slideEl);
  101. }
  102. if (shadowEl) {
  103. const shadowOpacity = params.shadowPerProgress ? progress * (1 / params.limitProgress) : progress;
  104. shadowEl.style.opacity = Math.min(Math.max(Math.abs(shadowOpacity), 0), 1);
  105. }
  106. }
  107. const targetEl = effectTarget(params, slideEl);
  108. targetEl.style.transform = transform;
  109. targetEl.style.opacity = opacityString;
  110. if (data.origin) {
  111. targetEl.style.transformOrigin = data.origin;
  112. }
  113. }
  114. };
  115. const setTransition = duration => {
  116. const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
  117. transformElements.forEach(el => {
  118. el.style.transitionDuration = `${duration}ms`;
  119. el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => {
  120. shadowEl.style.transitionDuration = `${duration}ms`;
  121. });
  122. });
  123. effectVirtualTransitionEnd({
  124. swiper,
  125. duration,
  126. transformElements,
  127. allSlides: true
  128. });
  129. };
  130. effectInit({
  131. effect: 'creative',
  132. swiper,
  133. on,
  134. setTranslate,
  135. setTransition,
  136. perspective: () => swiper.params.creativeEffect.perspective,
  137. overwriteParams: () => ({
  138. watchSlidesProgress: true,
  139. virtualTranslate: !swiper.params.cssMode
  140. })
  141. });
  142. }
  143. export { EffectCreative as default };