tg-reminder-web/script.js at main · gbitcode/tg-reminder-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
$(document).ready(function() {
    // Mobile menu toggle
    $('#nav-toggle').on('click', function() {
        $('#nav-menu').toggleClass('active');
        $(this).toggleClass('active');
    });

    // Close mobile menu on link click
    $('.nav-link').on('click', function() {
        $('#nav-menu').removeClass('active');
        $('#nav-toggle').removeClass('active');
    });

    // Smooth scrolling for anchor links
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        var target = $(this.hash);
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 70
            }, 600);
        }
    });

    // Navbar scroll effect
    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 50) {
            $('#navbar').addClass('scrolled');
        } else {
            $('#navbar').removeClass('scrolled');
        }
    });

    // Active nav link on scroll
    var sections = $('section[id]');

    $(window).on('scroll', function() {
        var scrollPos = $(this).scrollTop() + 100;

        sections.each(function() {
            var top = $(this).offset().top;
            var bottom = top + $(this).outerHeight();
            var id = $(this).attr('id');

            if (scrollPos >= top && scrollPos < bottom) {
                $('.nav-link').removeClass('active');
                $('.nav-link[href="#' + id + '"]').addClass('active');
            }
        });
    });

    // Animate elements on scroll
    var animateElements = $('.feature-card, .step, .example-card, .command-item');

    function checkScroll() {
        var windowBottom = $(window).scrollTop() + $(window).height();

        animateElements.each(function() {
            var elementTop = $(this).offset().top;

            if (windowBottom > elementTop + 50) {
                $(this).addClass('visible');
            }
        });
    }

    // Add CSS for scroll animations
    $('<style>')
        .text('.feature-card, .step, .example-card, .command-item { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .feature-card.visible, .step.visible, .example-card.visible, .command-item.visible { opacity: 1; transform: translateY(0); }')
        .appendTo('head');

    $(window).on('scroll', checkScroll);
    checkScroll(); // Check on load
});