java.js - master - SviridenkoV/siteL

java.js
140 строк5 KB
Виктор
ДЖаваскрипт
17 дек 2024, 21:45
17 дек 2024, 21:456523e00
document.addEventListener('DOMContentLoaded', function() {
    // 1. Effect of appearing on scroll
    function revealOnScroll() {
        const elements = document.querySelectorAll('.appear-on-scroll');
        elements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;
            const elementVisible = 150; // Element is considered visible when 150px from bottom of viewport

            if (elementTop < windowHeight - elementVisible) {
                element.classList.add('visible');
            }
        });
    }

    window.addEventListener('scroll', revealOnScroll);
    revealOnScroll(); // Run on page load

    // 2. Enhanced Hover effects for buttons
    const buttons = document.querySelectorAll('.knopochka, .knopochka1, .knopochka2');
    buttons.forEach(button => {
        button.addEventListener('mouseover', function() {
            this.style.backgroundColor = '#a863fa'; // Change color on hover
            this.style.transform = 'scale(1.1)'; // Scale up on hover
            this.style.transition = 'transform 0.3s ease, background-color 0.3s ease'; // smooth transition

        });
        button.addEventListener('mouseout', function() {
            this.style.backgroundColor = '#7E3AF2';  // Reset color on mouseout
            this.style.transform = 'scale(1)'; // Reset scale on mouseout
            this.style.transition = 'transform 0.3s ease, background-color 0.3s ease'; // Smooth transition
        });
    });

    // 3. Hover effects for images
    const images = document.querySelectorAll('.dazzle img, .kartinki_interesov1 img, .kartinki_interesov2 img, .kartinki_interesov3 img');
    images.forEach(image => {
        image.addEventListener('mouseover', function() {
            this.style.transform = 'scale(1.1)';
            this.style.transition = 'transform 0.3s ease';
        })
        image.addEventListener('mouseout', function() {
            this.style.transform = 'scale(1)';
            this.style.transition = 'transform 0.3s ease';
        })
    });

    // 4. Smooth scrolling for navigation links
    const navLinks = document.querySelectorAll('.menushka1 a, .menushka2 a, .menushka3 a');

    navLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default jump
            const targetId = this.getAttribute('href'); // Get target ID from the href

           if (targetId === '#') {
              window.scrollTo({
                  top: 0,
                    behavior: 'smooth'
                 });
                return;
             }

            const targetElement = document.querySelector(targetId);

           if (targetElement) {
               console.log('Target element found:', targetElement);
               targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
           } else {
               console.log('Target element NOT found:', targetId); //Debugging line
           }

        });
    });


    // 5. Smooth scrolling to the form
    const scrollToFormButtons = document.querySelectorAll('.knopochka a, .knopochka1 a');
    const formSection = document.getElementById('form');


    scrollToFormButtons.forEach(button => {
        button.addEventListener('click', function(event) {
            event.preventDefault();
            formSection.scrollIntoView({
                behavior: 'smooth'
            });
        });
    });

    // 6. Modal Window for the "Отправить" button
    const modalTrigger = document.querySelector('.knopochka2 a');
    const modal = document.createElement('div');
    modal.classList.add('modal');

    const modalContent = document.createElement('div');
    modalContent.classList.add('modal-content');

    const modalText = document.createElement('p');
    modalText.textContent = 'Вы действительно хотите отправить форму?';

    const modalButtons = document.createElement('div');
    modalButtons.classList.add('modal-buttons');

    const cancelButton = document.createElement('button');
    cancelButton.textContent = 'Отмена';
    cancelButton.addEventListener('click', closeModal);
    const confirmButton = document.createElement('button');
    confirmButton.textContent = 'Ок';
    confirmButton.addEventListener('click', () => {
        // Redirect to the specified URL here if you have one for example:
        // window.location.href = 'https://www.example.com';
        closeModal();
    });

    modalContent.appendChild(modalText);
    modalButtons.appendChild(cancelButton);
    modalButtons.appendChild(confirmButton);
    modalContent.appendChild(modalButtons);
    modal.appendChild(modalContent);
    document.body.appendChild(modal);

    function openModal() {
        modal.style.display = 'flex';
    }

    function closeModal() {
        modal.style.display = 'none';
    }


    modalTrigger.addEventListener('click', function(event) {
        event.preventDefault();
        openModal();
    });


});