feat(creative-effect): add shadowPerProgress parameter

Author: nolimits4web

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);
         }
       }
 

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.
    *