https://www.stafe.fr/wp-content/themes/stafe/assets/js/script.js?ver=1.0

1jQuery(function ($) {
2    // Gestion du menu burger
3    $("#barsBurgerMenu").click(function() {
4        $(this).toggleClass('open');
5        $('.header-navigation').toggleClass('open');
6        $('body').toggleClass('open');
7    });
8
9    $(window).scroll(function() {
10        var scroll = $(window).scrollTop();
11        if (scroll >= 100) {
12            $(".header-burger").addClass("scrolled");
13        } else {
14            $(".header-burger").removeClass("scrolled");
15        }
16    });
17
18    // Enlever les classes open au resize
19    $(window).on('resize', function() {
20        $(".header-landing_container #barsBurgerMenu").removeClass('open');
21        $('.header-landing_container .header-navigation').removeClass('open');
22        $('.single-landing').removeClass('open');
23    });
24    // Animations
25    $(window).scroll( function(){
26        $(".fade-in").each(function(i) {
27            var position_element = $(this).offset().top;
28            var position_window = $(window).scrollTop() + $(window).height();
29            if ( position_element < position_window ) {
30                $(this).addClass("show")
31            }
32            else if ( position_element > position_window ) {
33                $(this).removeClass("show")
34            }
35        })
36        $(".fade-item").each(function(i) {
37            var position_element = $(this).offset().top;
38            var position_window = $(window).scrollTop() + $(window).height();
39            if ( position_element < position_window ) {
40                $(this).addClass("show")
41            }
42            else if ( position_element > position_window ) {
43                $(this).removeClass("show")
44            }
45        })
46    });
47
48    $(window).scroll( function(){
49        $(".fade-in-global").each(function(i) {
50            var position_element = $(this).offset().top;
51            var position_window = $(window).scrollTop() + $(window).height();
52            if ( position_element < position_window ) {
53                $(this).addClass("show")
54            }
55            else if ( position_element > position_window ) {
56                $(this).removeClass("show")
57            }
58        })
59    });
60
61    // Slick Carousel Logos
62    $('.carousel-logos').slick({
63        dots: false,

64        prevArrow: false,
65        nextArrow: false,
66        infinite: true,
67        autoplay: true,
68        autoplaySpeed: 0,
69        speed: 8000,
70        cssEase: 'linear',
71        slidesToShow: 6,
72        responsive: [
73            {
74                breakpoint: 992,
75                settings: {
76                    slidesToShow:4,
77                    speed: 8000,
78                }
79            },
80            {
81                breakpoint: 576,
82                settings: {
83                    slidesToShow:3,
84                }
85            },
86            {
87                breakpoint: 400,
88                settings: {
89                    slidesToShow:2,
90                }
91            }
92        ]
93    })
94
95    // Slick Carousel Project
96    $('.project_featured').slick({
97        dots: false,
98        prevArrow: false,
99        nextArrow: false,
100        infinite: true,
101        autoplay: true,
102        cssEase: 'linear',
103        slidesToShow: 1,
104        centerMode: true,
105        swipeToSlide: true,
106        centerPadding: "20%",
107        speed: 800,
108        autoplaySpeed:5000,
109        responsive: [
110            {
111                breakpoint: 576,
112                settings: {
113                    centerPadding: "10%",
114                }
115            }
116        ]
117    })
118
119    // Slick Carousel Results
120    $('.results').slick({
121        dots: false,

122        prevArrow: false,
123        nextArrow: false,
124        infinite: true,
125        autoplay: true,
126        cssEase: 'linear',
127        slidesToShow: 1,
128        centerMode: true,
129        swipeToSlide: true,
130        centerPadding: "20%",
131        speed: 800,
132        autoplaySpeed:5000,
133        responsive: [
134            {
135                breakpoint: 576,
136                settings: {
137                    centerPadding: "20%",
138                }
139            }
140        ]
141    })
142
143    // Slick Carousel Image
144    $('.carousel-img').slick({
145        dots: false,
146        prevArrow: false,
147        nextArrow: false,
148        infinite: true,
149        autoplay: true,
150        cssEase: 'linear',
151        slidesToShow: 4,
152        swipeToSlide: true,
153        speed: 800,
154        autoplaySpeed:5000,
155        responsive: [
156            {
157                breakpoint: 768,
158                settings: {
159                    slidesToShow: 3,
160                }
161            },
162            {
163                breakpoint: 576,
164                settings: {
165                    slidesToShow: 2,
166                }
167            }
168        ]
169    })
170
171    // Projects archive filter
172    $(document).on('click','.project-page_filters .list-expert_item', function (e) {
173        e.preventDefault();
174        $(this).addClass('active').siblings('.active').removeClass('active');
175        var cat = $(this).attr('data-filter');
176        $('.archive-project-grid .project_item').each(function(index) {
177            $(this).hide();
178        });
179        $('.archive-project-grid .project_item.' + cat).each(function(index) {
180            $(this).delay(600 * index).fadeIn(600);
181        });
182    });
183
184    // Expertise View Img
185    $(".section_expert-block .expert-block_container .expert_content .featured_item").hover(
186        function () {
187            $(".section_expert-block .expert-block_container .expert_content .featured_item").removeClass('active')
188            $(this).addClass('active')
189
190            update_view_expert_img()
191        }, function () {
192        }
193    );
194    function update_view_expert_img() {
195        var id_expert = $(".section_expert-block .expert-block_container .expert_content .featured_item.active").data('id');
196        $('.section_expert-block .expert-block_container .expert_img .featured_item').removeClass('active');
197        $('.section_expert-block .expert-block_container .expert_img .featured_item.item-' + id_expert).addClass('active');
198    }
199
200    // Liste Expertise View content
201    $(".section_list-expert-block .list-expert-block_container .list-expert_content .list-expert_item").hover(
202        function () {
203            $(".section_list-expert-block .list-expert-block_container .list-expert_content .list-expert_item").removeClass('active')
204            $(this).addClass('active')
205
206            update_view_expert_subcontent()
207        }, function () {
208        }
209    );
210    function update_view_expert_subcontent() {
211        var id_listexpert = $(".section_list-expert-block .list-expert-block_container .list-expert_content .list-expert_item.active").data('id');
212        $('.section_list-expert-block .list-expert-block_container .list-expert_subcontent .list-expert_item').removeClass('active');
213        $('.section_list-expert-block .list-expert-block_container .list-expert_subcontent .list-expert_item.item-' + id_listexpert).addClass('active');
214    }
215
216    // Steps View Img
217    $(".section_steps-block .steps-block_container .steps_content .featured_item").hover(
218        function () {
219            $(".section_steps-block .steps-block_container .steps_content .featured_item").removeClass('active')
220            $(this).addClass('active')
221            update_view_steps_img()
222        }, function () {
223        }
224    );
225    function update_view_steps_img() {
226        var id_expert = $(".section_steps-block .steps-block_container .steps_content .featured_item.active").data('id');
227        $('.section_steps-block .steps-block_container .steps_img .featured_item').removeClass('active');
228        $('.section_steps-block .steps-block_container .steps_img .featured_item.item-' + id_expert).addClass('active');
229    }
230
231    // Cursor
232    const cursor = document.querySelector('#cursor');

233    const cursorCircle = cursor.querySelector('.cursor_circle');
234    const mouse = { x: -100, y: -100 }; // mouse pointer's coordinates
235    const pos = { x: 0, y: 0 }; // cursor's coordinates
236    const speed = 0.1; // between 0 and 1
237
238    const updateCoordinates = e => {
239        mouse.x = e.clientX;
240        mouse.y = e.clientY;
241    }
242
243    window.addEventListener('mousemove', updateCoordinates);
244
245    function getAngle(diffX, diffY) {
246        return Math.atan2(diffY, diffX) * 180 / Math.PI;
247    }
248
249    function getSqueeze(diffX, diffY) {
250        const distance = Math.sqrt(
251            Math.pow(diffX, 2) + Math.pow(diffY, 2)
252        );
253        const maxSqueeze = 0.15;
254        const accelerator = 1500;
255        return Math.min(distance / accelerator, maxSqueeze);
256    }
257
258    const updateCursor = () => {
259        const diffX = Math.round(mouse.x - pos.x);
260        const diffY = Math.round(mouse.y - pos.y);
261
262        pos.x += diffX * speed;
263        pos.y += diffY * speed;
264
265        const angle = getAngle(diffX, diffY);
266        const squeeze = getSqueeze(diffX, diffY);
267
268        const scale = 'scale(' + (1 + squeeze) + ', ' + (1 - squeeze) +')';
269        const rotate = 'rotate(' + angle +'deg)';
270        const translate = 'translate3d(' + pos.x + 'px ,' + pos.y + 'px, 0)';
271
272        cursor.style.transform = translate;
273        cursorCircle.style.transform = rotate + scale;
274    };
275
276    function loop() {
277        updateCursor();
278        requestAnimationFrame(loop);
279    }
280
281    requestAnimationFrame(loop);
282
283    const cursorModifiers = document.querySelectorAll('[cursor-class]');
284
285    cursorModifiers.forEach(curosrModifier => {
286        curosrModifier.addEventListener('mouseenter', function() {
287            const className = this.getAttribute('cursor-class');
288            cursor.classList.add(className);
289        });
290
291        curosrModifier.addEventListener('mouseleave', function() {
292            const className = this.getAttribute('cursor-class');
293            cursor.classList.remove(className);
294        });
295    });
296    // Modal
297    $(document).on('click', '.modal .close', function () {
298        $('.modal').css('display', 'none');
299        $('body').removeClass('open');
300    });
301
302    $('.landing-cta_form').click(function () {
303        $('#landingModal').css('display', 'flex');
304        $('body').addClass('open');
305    });
306
307    $(document).on('click', 'a[href="#landingCtaForm"]', function (e) {
308        e.preventDefault();
309        $('#landingModal').css('display', 'flex');
310        $('body').addClass('open');
311    });
312
313    $(window).on('click', function (event) {
314        if (event.target.id == 'landingModal') {
315            $('#landingModal').css({display: "none"});
316            $('body').removeClass('open');
317        }
318    });
319});
320
321// Lightbox
322document.addEventListener('DOMContentLoaded', function() {
323    GLightbox({ selector: '.glightbox' });
324});
325
326
327// Scroll Projets
328const slider = document.querySelector('.archive-project-grid');
329if(slider) {
330
331    let isDown = false;
332    let startX;
333    let scrollLeft;
334    let scrolling = false;
335    let preventClickEvent = false;
336
337    slider.addEventListener('mousedown', (e) => {
338        isDown = true;
339        slider.classList.add('active');
340        startX = e.pageX - slider.offsetLeft;
341        scrollLeft = slider.scrollLeft;
342    });
343    slider.addEventListener('mouseleave', () => {
344        isDown = false;
345        slider.classList.remove('active');
346    });
347    document.addEventListener('mouseup', (e) => {
348        isDown = false;
349        if(scrolling) preventClickEvent = true;
350        scrolling = false;
351        slider.classList.remove('active');
352        e.preventDefault();
353    });
354    slider.addEventListener('mousemove', (e) => {
355        if(!isDown) return;
356        e.preventDefault();
357        scrolling = true;
358        const x = e.pageX - slider.offsetLeft;
359        const walk = (x - startX); //scroll-fast
360        slider.scrollLeft = scrollLeft - walk;
361    });
362    slider.addEventListener('click', (e) => {
363        if(preventClickEvent) {
364            preventClickEvent = false;
365            e.preventDefault();
366        }
367    });
368
369    slider.addEventListener('wheel', (event) => {
370        // Only vertical scrolling is triggered
371        if(event.deltaY !== 0 && event.deltaX === 0) {
372            event.preventDefault();
373            slider.scrollLeft += event.deltaY;
374        }
375    })
376}