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