runnova.github.io/script.js at main · runnova/runnova.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
92
93
94
95
96
document.addEventListener("DOMContentLoaded", function () {
  const box = document.querySelector('.box');

  function handleScroll() {
    const boxPosition = box.getBoundingClientRect().top;
    const screenPosition = window.innerHeight / 1.3;

    if (boxPosition < screenPosition) {
      box.classList.add('triggered');
    } else {
      box.classList.remove('triggered');
    }
  }

  window.addEventListener('scroll', handleScroll);
});

const scrollable1 = document.getElementsByClassName('scrollerbox')[0];

let isDown1 = false;
let startX1, startY1, scrollLeft1, scrollTop1;

scrollable1.addEventListener('mousedown', (e) => {
  isDown1 = true;
  scrollable1.classList.add('active');
  startX1 = e.pageX - scrollable1.offsetLeft;
  startY1 = e.pageY - scrollable1.offsetTop;
  scrollLeft1 = scrollable1.scrollLeft;
  scrollTop1 = scrollable1.scrollTop;
});

scrollable1.addEventListener('mouseleave', () => {
  isDown1 = false;
  scrollable1.classList.remove('active');
});

scrollable1.addEventListener('mouseup', () => {
  isDown1 = false;
  scrollable1.classList.remove('active');
});

scrollable1.addEventListener('mousemove', (e) => {
  if (!isDown1) return;
  e.preventDefault();
  const x = e.pageX - scrollable1.offsetLeft;
  const y = e.pageY - scrollable1.offsetTop;
  const walkX1 = (x - startX1) * 2;
  const walkY1 = (y - startY1) * 2;
  scrollable1.scrollLeft = scrollLeft1 - walkX1;
  scrollable1.scrollTop = scrollTop1 - walkY1;
});

window.addEventListener('scroll', () => {
  const body44 = document.querySelectorAll(".bgimg")[0];
  const launchbtn = document.querySelector("#altlaunchbtn");
  if (window.scrollY > 150) {
    body44.classList.add('scrolled');
    launchbtn.classList.add('doit');
  } else {
    body44.classList.remove('scrolled');
    launchbtn.classList.remove('doit');
    if (body44.src !== "https://images.unsplash.com/photo-1712111474888-29e9431241b6?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") {
      body44.style.opacity = '0';

      setTimeout(() => {
        body44.src = "https://images.unsplash.com/photo-1712111474888-29e9431241b6?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        body44.style.opacity = '1';
      }, 500);
    }
  }
});

if (window.innerWidth < 500) {
  const btn = document.getElementById('runbtntsk');
  btn.textContent = 'Using it on mobiles';
  btn.onclick = function() {
    window.open('https://novaos.gitbook.io/main/get-started/access-novaos#installing-novaos-as-an-app-in-chrome');
  };
}

gsap.registerPlugin(ScrollTrigger);

let box = document.querySelector('.scrollerbox');
let inner = box.querySelector('.inner');
gsap.to(inner, {
  x: () => -(inner.scrollWidth - box.clientWidth),
  ease: "power1.inOut",
  scrollTrigger: {
    trigger: box,
    start: "center center",
    end: () => "+=" + (inner.scrollWidth - box.clientWidth),
    pin: true,
    pinSpacing: true,
    scrub: 1
  }
});