https://www.presscommtech.com/wp-content/themes/presscommtech/home/js/home-script.js

1
2
3/**** animazione logo */
4document.querySelectorAll('.menu-item').forEach(item => {
5    item.addEventListener('click', function() {
6        const target = this.getAttribute('data-target');
7        animateImage(target);
8    });
9});
10
11
12
13function animateImage(target) {
14    const tl = gsap.timeline();
15
16    switch(target) {
17        case 'pos1':
18            tl
19            .to('#logo-completo', { opacity: 1}, 0)
20            .to('.logo-pieno', { opacity: 0}, 0)
21            .to('#logo-outline-1', { z: -1, filter: 'blur(0px)'}, 0)
22            .to('#logo-outline-2', {  z: -1, filter: 'blur(0px)'}, 0)
23            .to('#logo-outline-3', {  z: -1, filter: 'blur(0px)'}, 0)
24            .to('#logo-anim-box', { duration: 1.5, ease: "power3.out", x: '0%', y: '-50%', scale: 1, rotationX: 0, rotationY: 0, rotationZ: 0}, 0)
25            break;
26        case 'pos2':
27            tl            
28            .to('#logo-completo', { opacity: 0}, 0)
29            .to('.logo-pieno', { opacity: 0}, 0)
30            .to('#logo-anim-press', { opacity: 1}, 0)
31            .to('#logo-outline-1', { opacity: 0.8, z: -20, filter: 'blur(0px)'}, 0)
32            .to('#logo-outline-2', { opacity: 0.6, z: -40, filter: 'blur(0.3px)'}, 0)
33            .to('#logo-outline-3', { opacity: 0.4, z: -60, filter: 'blur(0.6px)'}, 0)
34            .to('#logo-anim-box', { duration: 1.5, ease: "power3.out", x: '15%', y: '-40%', scale: 1.1, rotationX: -40, rotationY: 5, rotationZ: -5}, 0);
35            break;
36        case 'pos3':
37            tl
38            .to('#logo-completo', { opacity: 0}, 0)
39            .to('.logo-pieno', { opacity: 0}, 0)
40            .to('#logo-anim-tech', { opacity: 1}, 0)
41            .to('#logo-outline-1', { opacity: 0.8, z: -30, filter: 'blur(0px)'}, 0)
42            .to('#logo-outline-2', { opacity: 0.6, z: -60, filter: 'blur(0.3px)'}, 0)
43            .to('#logo-outline-3', { opacity: 0.4, z: -90, filter: 'blur(0.6px)'}, 0)
44            .to('#logo-anim-box', {  duration: 1.5, ease: "power3.out", x: '10%', y: '-60%', scale: 1.1, rotationX: 40, rotationY: -10, rotationZ: -15}, 0);
45            break;
46        case 'pos4':
47            tl
48            .to('#logo-completo', { opacity: 0}, 0)
49            .to('.logo-pieno', { opacity: 0}, 0)
50            .to('#logo-anim-comm', { opacity: 1}, 0)
51            .to('#logo-outline-1', { opacity: 0.8, z: -70, filter: 'blur(0px)'}, 0)
52            .to('#logo-outline-2', { opacity: 0.6, z: -150, filter: 'blur(0.3px)'}, 0)
53            .to('#logo-outline-3', { opacity: 0.4, z: -200, filter: 'blur(0.6px)'}, 0)
54            .to('#logo-anim-box', { duration: 1.5, ease: "power3.out", x: '0%', y: '-50%', scale: 1.2, rotationX: 0, rotationY: -40, rotationZ: -5}, 0);
55            break;
56        case 'pos5':
57            tl
58            .to('#logo-completo', { opacity: 0}, 0)
59            .to('.logo-pieno', { opacity: 0}, 0)
60            .to('#logo-anim-tech', { opacity: 1}, 0)
61            .to('#logo-outline-1', { opacity: 0.8, z: -50, filter: 'blur(0px)'}, 0)
62            .to('#logo-outline-2', { opacity: 0.6, z: -120, filter: 'blur(0.3px)'}, 0)
63            .to('#logo-outline-3', { opacity: 0.4, z: -190, filter: 'blur(0.6px)'}, 0)
64            .to('#logo-anim-box', {  duration: 1.5, ease: "power3.out", x: '30%', y: '-60%', scale: 1.2, rotationX: 10, rotationY: 30, rotationZ: 20}, 0)
65            break;
66    }
67}
68
69
70
71
72
73/*** animazione slide */
74document.addEventListener("DOMContentLoaded", function() {
75    const menuItems = document.querySelectorAll("#home-menu .menu-item");
76
77    menuItems.forEach(item => {
78        item.addEventListener("click", function() {
79            menuItems.forEach(menuItem => {
80                menuItem.classList.remove('active');
81            });
82            item.classList.add('active');
83
84            const target = this.getAttribute('data-target');
85
86            const slides = document.querySelectorAll(".home-slide");

87            slides.forEach(slide => {
88                gsap.to(slide, { duration: 1, opacity: 0, display: 'none' });
89                slide.classList.remove('active');
90            });
91
92            const slidesConts = document.querySelectorAll(".home-slide-cont");
93            slidesConts.forEach(slideCont => {
94                slideCont.classList.remove('active');
95            });
96
97            const activeSlide = document.querySelector("#slide-" + target);
98            gsap.to(activeSlide, { duration: 1, opacity: 1, display: 'block',});
99            activeSlide.classList.add('active');
100
101            const activeSlideCont = document.querySelector("#home-slide-container-" + target);
102            gsap.to(activeSlideCont, { duration: 1, opacity: 1, display: 'flex', });
103            activeSlideCont.classList.add('active');
104
105        });
106    });
107});