effect-creative.js 4.7 KB

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