https://riverside1.com.ua/wp-content/themes/riverside/assets/scripts/home.js?ver=1.22

1// Select all your images
2
3var spriteImages = document.querySelectorAll('.main-screen-layout .slide-item__image');
4var spriteImagesSrc = [];
5var texts = [];
6var imgDIR = ``;
7if (window.location.href.match(/\/dist\//)) imgDIR = `/dist/`;
8
9for (var i = 0; i < spriteImages.length; i++) {
10
11    var img = spriteImages[i];
12
13    // Set the texts you want to display to each slide 
14    // in a sibling element of your image and edit accordingly
15    if (img.nextElementSibling) {
16        texts.push(img.nextElementSibling.innerHTML);
17    } else {
18        texts.push('');
19    }
20
21    spriteImagesSrc.push(img.getAttribute('src').replace('./', imgDIR));
22}
23
24let moveSlider = new CanvasSlideshow({
25    sprites: spriteImagesSrc,
26    // displacementImage: './assets/images/main-screen-filter.jpg',
27    displacementImage: '/wp-content/themes/riverside/assets/images/main-screen-filter.jpg',
28
29    autoPlay: false,
30    selector: '.main-screen',
31    autoPlaySpeed: [0.3, 0.3],
32    displaceScale: [800, 500],
33    fullScreen: true,
34    navSelector: '.main-screen',
35    navElement: document.querySelectorAll('.main-screen .scene-nav'),
36    displaceAutoFit: true,
37    // stageWidth: document.documentElement.clientWidth,
38    image: document.querySelectorAll('.main-screen-layout .slide-item__image'),
39    // stageHeight: document.documentElement.clientHeight,
40    displacementCenter: true,
41    interactive: window.screen.width > 769 ? true : false,
42    interactionEvent: 'click', // 'click', 'hover', 'both' 
43});
44moveSlider.init();
45let msSwitcher = new CanvasSlidewhowSwitcher({
46    canvas: document.querySelector('.main-screen canvas'),
47    timeToSwitch: 800,
48    slideshowObject: moveSlider,
49    curSlideDisplay: document.querySelector('.main-screen .current'),
50
51});
52msSwitcher.handle();
53/**Всплывающая подсказка на первом экране */
54const mousePopup = document.createElement('div');
55mousePopup.classList.add('mouse-popup');
56mousePopup.innerHTML = 'Click & hold';
57document.querySelector('.main-screen').append(mousePopup);
58document.querySelector('.main-screen canvas').addEventListener('mousemove', function(evt) {
59    // console.log(evt);
60
61    // mousePopup.style.top = evt.clientY + 'px';
62    // mousePopup.style.left = evt.clientX + 30 + 'px';
63    mousePopup.style.transform = `translate(${evt.clientX+30}px, ${evt.clientY}px)`;
64    // mousePopup.style.transform = evt.clientX + 30 + 'px';
65});
66document.querySelector('.main-screen canvas').addEventListener('mouseenter', function(evt) {
67    document.querySelector('.main-screen').append(mousePopup);
68    mousePopup.classList.add('visible');
69});
70document.querySelector('.main-screen canvas').addEventListener('mouseleave', function(evt) {
71    mousePopup.remove();
72    mousePopup.classList.remove('visible');
73});
74/**Всплывающая подсказка на первом экране END */
75
76
77
78
79/**GENPLAN */
80let svg = document.querySelector('.genplan-svg svg'),
81    genplanSvgLinkList = document.querySelectorAll('.svg-link-js');
82
83
84
85genplanSvgLinkList.forEach(link => {
86    link.addEventListener('mouseover', function(evt) {
87        // link.dataset.svgID;
88        // //console.log(typeof link.dataset.svgid);
89        if (link.dataset.svgid.length == 0 || document.querySelector(`#${link.dataset.svgid}`) === null) return;
90        document.querySelector(`#${link.dataset.svgid}`).style.stroke = `#ffffff`;
91        document.querySelector(`#${link.dataset.svgid}`).style.fill = `rgba(0, 133, 255, 0.8)`;
92        if (document.querySelector(`#${link.dataset.svgid}`).tagName === 'g') {
93            document.querySelector(`#${link.dataset.svgid}`).querySelectorAll('path,polygon').forEach(el => {
94                el.style.stroke = `#ffffff`;
95                el.style.fill = `rgba(0, 133, 255, 0.8)`;
96            })
97        }
98    });
99    link.addEventListener('mouseout', function(evt) {
100        if (link.dataset.svgid.length == 0 || document.querySelector(`#${link.dataset.svgid}`) === null) return;
101        document.querySelector(`#${link.dataset.svgid}`).style.stroke = `none`;
102        document.querySelector(`#${link.dataset.svgid}`).style.fill = `none`;
103        if (document.querySelector(`#${link.dataset.svgid}`).tagName === 'g') {
104            document.querySelector(`#${link.dataset.svgid}`).querySelectorAll('path,polygon').forEach(el => {
105                el.style.stroke = `none`;
106                el.style.fill = `none`;
107            })
108        }
109    });

110})
111
112/**GENPLAN END */
113
114window.addEventListener('load', function(evt) {
115
116
117    /**Distortion Hover */
118    Array.from(document.querySelectorAll('.about .distortion-hover__item-img')).forEach((el) => {
119        const imgs = Array.from(el.querySelectorAll('img'));
120        let a = new hoverEffect({
121            parent: el,
122            intensity: el.dataset.intensity || undefined,
123            speedIn: el.dataset.speedin || undefined,
124            speedOut: el.dataset.speedout || undefined,
125            easing: el.dataset.easing || undefined,
126            hover: el.dataset.hover || undefined,
127            image1: imgs[0].getAttribute('src'),
128            image2: imgs[1].getAttribute('src'),
129            displacementImage: el.dataset.displacement,
130            otherHoverEl: document.querySelector('.about .left'),
131            showElements: document.querySelectorAll('.about .left .text, .about .left .link'),
132            imagesRatio: imgs[0].naturalHeight / imgs[0].naturalWidth,
133        });
134
135    });
136
137    Array.from(document.querySelectorAll('.contact-developer .distortion-hover__item-img')).forEach((el) => {
138        const imgs = Array.from(el.querySelectorAll('img'));
139        let a = new hoverEffect({
140            showElements: document.querySelectorAll('.contact-developer .left .text, .contact-developer .left .link'),
141            parent: el,
142            intensity: el.dataset.intensity || undefined,
143            speedIn: el.dataset.speedin || undefined,
144            speedOut: el.dataset.speedout || undefined,
145            easing: el.dataset.easing || undefined,
146            hover: el.dataset.hover || undefined,
147            image1: imgs[0].getAttribute('src'),
148            image2: imgs[1].getAttribute('src'),
149            displacementImage: el.dataset.displacement,
150            imagesRatio: imgs[0].naturalHeight / imgs[0].naturalWidth,
151            otherHoverEl: document.querySelector('.contact-developer .left'),
152        });
153    });
154    /**Distortion Hover END*/
155});
156
157
158/**TABS */
159let tabNavList = document.querySelectorAll('.forms .tab-head-item');
160let tabContainer = document.querySelector('.forms.tabs');
161tabNavList.forEach(el => {
162        el.addEventListener('click', function(evt) {
163            let dataLink = el.dataset.link;
164            tabContainer.querySelector('.tab-head-item.active').classList.remove('active');
165            el.classList.add('active');
166
167            tabContainer.querySelector(`.tab-body  .active`).classList.remove('active');
168            tabContainer.querySelector(`${dataLink}`).classList.add('active');
169        });
170    })
171    /**TABS END */
172
173
174
175if (window.screen.width > 480) {
176
177    document.querySelector('header').style.backgroundColor = `transparent`;
178}
179if (window.screen.width > 481) {
180    let mainScreen = document.querySelector('.main-screen-layout');
181    window.addEventListener('scroll', () => {
182        //console.log(mainScreen.getBoundingClientRect());
183        if (mainScreen.getBoundingClientRect().y < 0) {
184            document.querySelector('header').style.backgroundColor = `var(--blue)`;
185            document.querySelector('header').classList.add('fixed');
186        } else {
187
188
189            document.querySelector('header').style.backgroundColor = `transparent`;
190
191            document.querySelector('header').classList.remove('fixed');
192        }
193
194    });
195    document.querySelector('.safari-wrap').prepend(document.querySelector('header'));
196}
197// document.querySelector('.scroll-element svg').onclick = () => {
198//     document.querySelector('.genplan').scrollIntoView({ behavior: 'smooth' });
199// };
200
201$('.scroll-element svg').click(function(e) {
202    e.preventDefault();
203    $id = $(this).attr('href');
204    $('body,html').animate({
205        scrollTop: $('.video-block').offset().top - 20
206    }, 750);
207});
208
209(function($) {
210    $.fn.animateNumbers = function(stop, commas, duration, ease) {
211        return this.each(function() {
212            var $this = $(this);
213            var start = parseInt($this.text().replace(/,/g, ""));
214            commas = (commas === undefined) ? true : commas;
215            $({ value: start }).animate({ value: stop }, {
216                duration: duration == undefined ? 1000 : duration,
217                easing: ease == undefined ? "swing" : ease,
218                step: function() {
219                    $this.text(Math.floor(this.value));
220                    if (commas) { $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")); }
221                },
222                complete: function() {
223                    if (parseInt($this.text()) !== stop) {
224                        $this.text(stop);
225                        if (commas) { $this.text($this.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")); }
226                    }
227                }
228            });
229        });
230    };
231})(jQuery);
232
233
234
235let videoInSecondBlock = document.querySelector('.video-block video'),
236    videoBlock = document.querySelector('.video-block'),
237    videoButton = document.querySelector('.video-block-wave-js');
238videoButton.style.pointerEvents = 'none';
239videoInSecondBlock.addEventListener('click', function(evt) {
240    if (videoInSecondBlock.paused) {
241        videoInSecondBlock.play();
242        videoButton.style.opacity = 0;
243        // changePseudoProperties(videoBlock, 'opacity:0', 'after');
244    } else {
245        videoInSecondBlock.pause();
246        videoButton.style.opacity = 1;
247        // changePseudoProperties(videoBlock, 'opacity:1', 'after');
248
249    }
250});
251
252gsap.set('.video-block-wave path', { scale: 1 });
253window.playvideoflag = true;
254// gsap.set('.video-block-wave path:not(.play-path)', {
255//     transformOrigin: function(some, target) {
256//         let viewBox = {
257//             x: +target.closest('svg').getAttribute('viewBox').split(' ')[2],
258//             y: +target.closest('svg').getAttribute('viewBox').split(' ')[3],
259//         };
260//         let selfBox = target.getBBox();
261//         // console.log(target.getBBox());
262//         // console.log(selfBox);
263//         return `${selfBox.x}px ${selfBox.y}px`;
264//     },
265// })
266videoInSecondBlock.addEventListener('mousemove', function(evt) {
267    if (window.playvideoflag) {
268        let random = randomInteger(0.9, 1);
269        gsap.to('.video-block-wave path:not(.play-path)', {
270            transformOrigin: "350 170",
271            stagger: 0.1,
272            scale: random,
273
274            transformOrigin: function(some, target) {
275                let viewBox = {
276                    x: +target.closest('svg').getAttribute('viewBox').split(' ')[2],
277                    y: +target.closest('svg').getAttribute('viewBox').split(' ')[3],
278                };
279                let selfBox = target.getBBox();
280                // console.log(target.getBBox());
281                // console.log(selfBox);
282                return `${selfBox.x}px ${selfBox.y}px`;
283            },
284        });
285        gsap.to('.play-path', {
286            x: function(some, target) {
287                var pathBBox = document.querySelector('.smallest-path').getBBox(),
288                    pathBRect = document.querySelector('.smallest-path').getBoundingClientRect(),
289
290                    selfRect = target.getBoundingClientRect();
291                svgBRect = target.closest('svg').getBoundingClientRect();
292                console.log(pathBBox);
293                console.log(document.querySelector('.smallest-path').getBoundingClientRect());
294                return svgBRect.x - pathBRect.x + (svgBRect.width / 2) - (selfRect.width / 2) + 'px';
295            },
296            y: function(some, target) {
297                var pathBBox = document.querySelector('.smallest-path').getBBox(),
298                    pathBRect = document.querySelector('.smallest-path').getBoundingClientRect(),
299
300                    selfRect = target.getBoundingClientRect();
301                svgBRect = target.closest('svg').getBoundingClientRect();
302                return svgBRect.y - pathBRect.y + (svgBRect.height / 2) /*- (selfRect.height / 2)*/ + 'px';
303            }
304        })
305        window.playvideoflag = false;
306        setTimeout(() => {
307            window.playvideoflag = true;
308        }, 300);
309    }
310});
311
312function randomInteger(min, max) {
313    return Math.random() * (max - min) + min;
314}
315
316function changePseudoProperties(container, cssText, pseudoType) {

317    let containerSelector = '';
318    if (pseudoType === undefined) {
319        console.warn(`Pseudo element is not defined, ${changePseudoProperties.name} is stopping`);
320        return;
321    }
322    if (typeof container === 'string') {
323        containerSelector = container;
324        container = document.querySelector(container);
325    } else {
326        containerSelector = `.${container.classList[0]}`;
327    }
328    let style = document.createElement('style');
329    style.innerHTML = `
330    ${containerSelector}:${pseudoType}{
331        ${cssText}
332    } `;
333    container.append(style);
334};