https://crynyl.com/js/index.js

1
2const header = document.querySelector('header');
3const headerMin = document.querySelector('header.min');
4const pageContainer = document.querySelector('.whole-page');
5const curtainContainer = document.querySelector('.curtain-container');
6const marquee = document.querySelector('section.enable-animation');
7const firstSection = document.querySelector('section.fidelity');
8window.addEventListener('scroll', checkScrollPos);
9window.addEventListener('resize', checkResize);
10
11const lookbook = document.querySelector('.lookbook');
12const lookbookRail = document.querySelector('.lookbook .info');
13
14function getTopNoPadding(el) {
15    return (el.getBoundingClientRect().top + Number(el.style.paddingTop.replace('px', '')));
16}
17
18function checkResize() {
19    document.querySelector('.behindsplash').style.width = firstSection.clientWidth + 'px';
20    translateBehindSplash();
21
22    let scaleFactor = Math.min(Math.max(700/ window.innerWidth, 1), 2);
23    let scaleFactor2 = Math.min(Math.max(700/ window.innerHeight, 1), 2);
24    brainOuter.style.transform = new DOMMatrix().scaleSelf(Math.max(scaleFactor, scaleFactor2));
25
26}
27
28function translateBehindSplash() {
29    const firstSectionY = firstSection.getBoundingClientRect().top;
30    if (firstSection.getBoundingClientRect().top <= window.innerHeight) {
31        document.querySelector('.splash').classList.add('withbg');
32    } else {
33        document.querySelector('.splash').classList.remove('withbg');
34        headerMin.style.display = 'none';
35    }
36}
37
38function checkScrollPos() {
39    translateBehindSplash();
40
41    if (firstSection.getBoundingClientRect().top <= 0 && headerMin.style.display == 'none'
42        && !headerMin.classList.contains('animate')) {
43        headerMin.style.display = 'flex';
44        headerMin.classList.add('animate');
45
46    } else if (firstSection.getBoundingClientRect().top > 0
47        && headerMin.style.display == 'flex'
48        && !headerMin.classList.contains('animateout')
49    ) {
50        headerMin.classList.add('animateout');
51    }
52
53    if(document.querySelector('footer').getBoundingClientRect().bottom <= window.innerHeight + 5){
54        brainTag.classList.remove('hidden');
55        brainTag.classList.add('allhidden');
56    }else{
57        brainTag.classList.remove('allhidden');
58    }
59
60
61    if(window.scrollY > 0){
62        brainTag.classList.add('hidden');
63        //brainTag.style.transform = new DOMMatrix().translateSelf(0, 90);
64    }else if(document.body.style.position != 'fixed'){
65        brainTag.classList.remove('hidden');
66        //brainTag.style.transform = new DOMMatrix().translateSelf(0, 0);
67    }
68}
69
70headerMin.addEventListener('animationend', (e) => {
71    if (e.animationName == "slideOut") {
72        headerMin.style.display = 'none';
73    }
74
75    headerMin.classList.remove('animateout', 'animate');
76
77});
78
79function isElementInViewport(el) {
80
81    var rect = el.getBoundingClientRect();
82
83    if (rect.bottom <= 0) {
84        return false;
85    }
86    return true;
87}
88
89
90
91const playBtn = document.querySelector('.playbutton');
92const modal = document.querySelector('.modal');
93const videoLandscape = document.querySelector('.modal video.landscape');
94const videoPortrait = document.querySelector('.modal video.portrait');
95const closeBtn = document.querySelector('.closebutton');
96playBtn.addEventListener('click', (e)=>{
97    //modal.style.display = 'flex';
98    showDialog();
99    let video;
100    if(window.innerWidth/window.innerHeight < 1){
101        video = videoPortrait;
102        videoLandscape.style.display = 'none';
103    }else{
104        video = videoLandscape;
105        videoPortrait.style.display = 'none';
106    }
107    video.style.display = 'block';
108    video.currentTime = 0;
109    video.play();
110})
111
112closeBtn.addEventListener('click', (e) => {
113    closeDialog();
114    videoLandscape.pause();
115    videoPortrait.pause();
116})
117
118modal.addEventListener('click', e => {
119    closeDialog();
120    videoLandscape.pause();
121    videoPortrait.pause();
122})
123
124videoLandscape.addEventListener('click', e=>{
125    e.stopImmediatePropagation();
126})
127videoPortrait.addEventListener('click', e=>{
128    e.stopImmediatePropagation();
129})
130
131
132const showDialog = () => {
133    modal.style.display = 'flex';
134    const scrollY = document.documentElement.style.getPropertyValue('--scroll-y');
135    const body = document.body;
136    body.style.position = 'fixed';
137    body.style.top = `-${scrollY}`;
138  };
139  const closeDialog = () => {
140    const body = document.body;
141    const scrollY = body.style.top;
142    body.style.position = '';
143    body.style.top = '';
144    window.scrollTo(0, parseInt(scrollY || '0') * -1);
145    modal.style.display = 'none';
146  }
147  window.addEventListener('scroll', () => {
148    document.documentElement.style.setProperty('--scroll-y', `${window.scrollY}px`);
149  });
150
151let brainInTransition = false;

152
153const brainTag = document.querySelector('.braincontainer');
154const brainOuter = document.querySelector('.brainouter');
155brainTag.addEventListener('mouseenter', (e) => {
156    if(e.currentTarget.classList.contains('hidden')){
157        brainInTransition = true;
158    }else{
159        brainInTransition = false;
160    }
161    e.currentTarget.classList.remove('hidden');
162    
163})
164
165brainTag.addEventListener('mouseleave', (e) => {
166    if(window.scrollY > 0){
167        e.currentTarget.classList.add('hidden');
168    }
169})
170
171brainTag.addEventListener('click', (e)=>{
172    e.preventDefault();
173    e.stopImmediatePropagation();
174    if(e.currentTarget.classList.contains('hidden')){
175        e.currentTarget.classList.remove('hidden');
176    }else if(!brainInTransition){
177        window.location.href = 'https://brain.wtf';
178    }   
179   
180})
181
182brainTag.addEventListener('transitionend', (e) => {
183    brainInTransition = false;
184})
185brainTag.addEventListener('transitionstart', (e) => {
186    brainInTransition = true;
187})
188
189
190checkScrollPos();
191checkResize();