feat(creative-effect): add shadowPerProgress parameter

nolimits4web · Aug 19, 2021 · 980c4c7 · 980c4c7
1 parent 0c30f5c
commit 980c4c7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/modules/effect-creative/effect-creative.js b/src/modules/effect-creative/effect-creative.js
@@ -8,6 +8,7 @@ export default function EffectCreative({ swiper, extendParams, on }) {
     creativeEffect: {
       transformEl: null,
       limitProgress: 1,
+      shadowPerProgress: false,
       progressMultiplier: 1,
       perspective: true,
       prev: {
@@ -94,7 +95,10 @@ export default function EffectCreative({ swiper, extendParams, on }) {
           $shadowEl = createShadow(params, $slideEl);
         }
         if ($shadowEl.length) {
-          $shadowEl[0].style.opacity = Math.min(Math.max(Math.abs(progress), 0), 1);
+          const shadowOpacity = params.shadowPerProgress
+            ? progress * (1 / params.limitProgress)
+            : progress;
+          $shadowEl[0].style.opacity = Math.min(Math.max(Math.abs(shadowOpacity), 0), 1);
         }
       }
 

diff --git a/src/types/modules/effect-creative.d.ts b/src/types/modules/effect-creative.d.ts
@@ -72,6 +72,12 @@ export interface CreativeEffectOptions {
    * @default 1
    */
   limitProgress?: number;
+  /**
+   * Splits shadow "opacity" per slide based on `limitProgress` (only if transformation shadows enabled). E.g. setting `limitProgress: 2` and enabling `shadowPerProgress`, will set shadow opacity to `0.5` and `1` on two slides next to active. With this parameter disabled, all slides beside active will have shadow with `1` opacity
+   *
+   * @default false
+   */
+  shadowPerProgress?: boolean;
   /**
    * Allows to multiply slides transformations and opacity.
    *