anur1.github.io/scroll.html at main · anur1/anur1.github.io · 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>Wiki DT</title>
        <link rel="stylesheet" href="/assets/css/styles.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="assets/js/script.js"></script>
        <link href="https://fonts.googleapis.com/css2?family=Finlandica&display=swap" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

    <title>Document</title>

<style>
    @keyframes slideInFromLeft {
        from {
            left: -100%;
            /* Start off-screen */
        }

        to {
            left: 0;
            /* Fully visible on the screen */
        }
    }

    @keyframes slideOutToLeft {
        from {
            left: 0;
            /* Fully visible on the screen */
        }

        to {
            left: -100%;
            /* Move back off-screen */
        }
    }

    #animated-image {
        animation-duration: 1s;
        /* Duration of the animation */
        animation-fill-mode: forwards;
        /* Keep the final state after animation */
    }

    #slide-table {
    position: fixed;
    top: 50%;
    left: -100%; /* Start off-screen */
    transform: translateY(-50%);
}
</style>

</head>
<body>
<br><br>
<button id="trigger-animation" class="btn btn-primary mb-3">Show Image</button>

    <ul id="leftmenu-container" class="navbar-nav ms-auto custom-left-fixed-submenu w-80 ms-0"
        style="max-width: 100px;  position: fixed; top: 50%; transform: translateY(-50%);">
        <li>deneme</li>
        <li>deneme</li>
                <li>deneme</li>
                <li>deneme</li>
    </ul>

<script>
    document.getElementById('trigger-animation').addEventListener('click', () => {
        const image = document.getElementById('leftmenu-container');

        // Show the image and slide it in
        image.style.display = 'block';
        image.style.animation = 'slideInFromLeft 1s forwards';

        // Wait for 5 seconds, then slide it out
        setTimeout(() => {
            image.style.animation = 'slideOutToLeft 1s forwards';

            // Hide the image after the slide-out animation completes
            setTimeout(() => {
                image.style.display = 'none';
            }, 1000); // Match the duration of the slide-out animation
        }, 5000); // 5 seconds delay
    });
</script>


</body>
</html>