comMUTEnicate/test.html at main · Markys21/comMUTEnicate · 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

</head>

<style>
body {
  margin: 0;
  padding: 0;
}

.scroll-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 173.2px; /* Adjust the border-width to change the triangle size */
  border-color: transparent transparent transparent #09f1b8; /* Initial color, can be changed to any color */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: moveTriangle 2s linear infinite;
}

@keyframes moveTriangle {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg);
    border-color: transparent transparent transparent #00a2ff;
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
    border-color: transparent transparent transparent #ff00d2;
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg);
    border-color: transparent transparent transparent #fed90f;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
    border-color: transparent transparent transparent #09f1b8;
  }
}

     @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");:root{--header-height: 3rem;--nav-width: 68px;--first-color: #4723D9;--first-color-light: #AFA5D9;--white-color: #F7F6FB;--body-font: 'Nunito', sans-serif;--normal-font-size: 1rem;--z-fixed: 100}*,::before,::after{box-sizing: border-box}body{position: relative;margin: var(--header-height) 0 0 0;padding: 0 1rem;font-family: var(--body-font);font-size: var(--normal-font-size);transition: .5s}a{text-decoration: none}.header{width: 100%;height: var(--header-height);position: fixed;top: 0;left: 0;display: flex;align-items: center;justify-content: space-between;padding: 0 1rem;background-color: var(--white-color);z-index: var(--z-fixed);transition: .5s}.header_toggle{color: var(--first-color);font-size: 1.5rem;cursor: pointer}.header_img{width: 35px;height: 35px;display: flex;justify-content: center;border-radius: 50%;overflow: hidden}.header_img img{width: 40px}.l-navbar{position: fixed;top: 0;left: -30%;width: var(--nav-width);height: 100vh;background-color: var(--first-color);padding: .5rem 1rem 0 0;transition: .5s;z-index: var(--z-fixed)}.nav{height: 100%;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden}.nav_logo, .nav_link{display: grid;grid-template-columns: max-content max-content;align-items: center;column-gap: 1rem;padding: .5rem 0 .5rem 1.5rem}.nav_logo{margin-bottom: 2rem}.nav_logo-icon{font-size: 1.25rem;color: var(--white-color)}.nav_logo-name{color: var(--white-color);font-weight: 700}.nav_link{position: relative;color: var(--first-color-light);margin-bottom: 1.5rem;transition: .3s}.nav_link:hover{color: var(--white-color)}.nav_icon{font-size: 1.25rem}.show{left: 0}.body-pd{padding-left: calc(var(--nav-width) + 1rem)}.active{color: var(--white-color)}.active::before{content: '';position: absolute;left: 0;width: 2px;height: 32px;background-color: var(--white-color)}.height-100{height:100vh}@media screen and (min-width: 768px){body{margin: calc(var(--header-height) + 1rem) 0 0 0;padding-left: calc(var(--nav-width) + 2rem)}.header{height: calc(var(--header-height) + 1rem);padding: 0 2rem 0 calc(var(--nav-width) + 2rem)}.header_img{width: 40px;height: 40px}.header_img img{width: 45px}.l-navbar{left: 0;padding: 1rem 1rem 0 0}.show{width: calc(var(--nav-width) + 156px)}.body-pd{padding-left: calc(var(--nav-width) + 188px)}}
</style>
<body >
  <div class="scroll-triangle"></div>

  <!-- Placeholder content to create scrolling effect -->
  <div style="height: 2000px;"></div>


        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>


          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
          <script>
         const triangle = document.querySelector(".scroll-triangle");

function updateTrianglePosition() {
  const scrollTop = window.scrollY;
  const windowHeight = window.innerHeight;
  const triangleSize = 100; // You can adjust the triangle size here
  const halfTriangleSize = triangleSize / 2;

  // Calculate the position of the triangle based on the scroll position
  if (scrollTop < windowHeight / 2) {
    // Move top
    const topPosition = 50 - scrollTop / 2;
    triangle.style.top = `${topPosition}%`;
    triangle.style.left = "50%";
    triangle.style.transform = "translate(-50%, -50%) rotate(0deg)";
  } else if (scrollTop >= windowHeight / 2 && scrollTop < windowHeight * 1.5) {
    // Move right
    const rightPosition = (scrollTop - windowHeight / 2) + halfTriangleSize;
    triangle.style.top = "25%";
    triangle.style.left = `calc(100% - ${rightPosition}px)`;
    triangle.style.transform = "translate(0, -50%) rotate(90deg)";
  } else if (scrollTop >= windowHeight * 1.5 && scrollTop < windowHeight * 2.5) {
    // Move bottom
    const bottomPosition = (scrollTop - windowHeight * 1.5) + halfTriangleSize;
    triangle.style.top = `calc(75% - ${bottomPosition}px)`;
    triangle.style.left = "50%";
    triangle.style.transform = "translate(-50%, 0) rotate(180deg)";
  } else {
    // Move right
    const rightPosition = (scrollTop - windowHeight * 2.5) + halfTriangleSize;
    triangle.style.top = "25%";
    triangle.style.left = `calc(100% - ${rightPosition}px)`;
    triangle.style.transform = "translate(0, -50%) rotate(90deg)";
  }
}

// Listen to scroll events and update the triangle position
window.addEventListener("scroll", updateTrianglePosition);
window.addEventListener("resize", updateTrianglePosition);

          </script>
</body>
</html>