Dignissim suscipit leo
Dignissim suscipit leo
Dignissim suscipit leo
Tempor mauris ligula sapien ornare cubilia pretium massa proto. Imperdiet arcu vestibulum ante egestas vel cursus dis sodales. Iaculis lacus euismod montes mattis ullamcorper rhoncus eleifend vis, ligula phasellus, faucibus pretium.
document.addEventListener("DOMContentLoaded", function () { const video = document.querySelector("video"); if (!video) return; /* ========================================= VIDEO SETUP ========================================= */ video.pause(); video.autoplay = false; video.removeAttribute("autoplay"); video.muted = true; video.loop = false; /* ========================================= STATE ========================================= */ let progress = 0; let targetTime = 0; let currentTime = 0; let animating = false; let videoComplete = false; let controllingVideo = false; let animationFrame = null; const SPEED = 0.0003; const SMOOTH = 0.1; const TOP_THRESHOLD = 10; /* ========================================= SCROLL LOCK ========================================= */ let scrollLocked = false; function lockPageScroll() { if (scrollLocked) return; scrollLocked = true; /* * Force the page to the absolute top. */ window.scrollTo(0, 0); /* * Prevent normal document scrolling. */ document.documentElement.style.overflow = "hidden"; document.body.style.overflow = "hidden"; /* * Prevent touch scrolling. */ document.documentElement.style.touchAction = "none"; document.body.style.touchAction = "none"; } function unlockPageScroll() { if (!scrollLocked) return; scrollLocked = false; /* * Restore normal scrolling. */ document.documentElement.style.overflow = ""; document.body.style.overflow = ""; document.documentElement.style.touchAction = ""; document.body.style.touchAction = ""; } /* * Extra protection against Carrd or the browser * moving the page while the video is controlled. */ function enforceScrollLock() { if (scrollLocked && window.scrollY !== 0) { window.scrollTo(0, 0); } } window.addEventListener( "scroll", enforceScrollLock, { passive: true } ); /* ========================================= TOP CHECK ========================================= */ function isAtTop() { return window.scrollY <= TOP_THRESHOLD; } /* ========================================= STOP ANIMATION ========================================= */ function stopAnimation() { animating = false; if (animationFrame) { cancelAnimationFrame(animationFrame); animationFrame = null; } } /* ========================================= FREEZE LAST FRAME ========================================= */ function freezeLastFrame() { if (!video.duration) return; stopAnimation(); progress = 1; targetTime = video.duration; currentTime = video.duration; video.pause(); /* * Slightly before absolute end prevents * browsers from jumping back to frame 1. */ video.currentTime = Math.max( 0, video.duration - 0.001 ); } /* ========================================= VIDEO ANIMATION ========================================= */ function animate() { if (!animating) return; currentTime += (targetTime - currentTime) * SMOOTH; if (video.readyState >= 2) { video.currentTime = currentTime; } if ( Math.abs( targetTime - currentTime ) < 0.01 ) { currentTime = targetTime; video.currentTime = targetTime; stopAnimation(); if (progress >= 1) { progress = 1; videoComplete = true; controllingVideo = false; /* * IMPORTANT: * The page is unlocked ONLY * after the video reaches the end. */ freezeLastFrame(); unlockPageScroll(); } return; } animationFrame = requestAnimationFrame(animate); } function startAnimation() { if (animating) return; animating = true; animationFrame = requestAnimationFrame(animate); } /* ========================================= SET VIDEO PROGRESS ========================================= */ function setProgress(value) { progress = Math.max( 0, Math.min(1, value) ); if (video.duration) { targetTime = progress * video.duration; } startAnimation(); } /* ========================================= START VIDEO CONTROL ========================================= */ function startVideoControl() { controllingVideo = true; videoComplete = false; /* * Lock the page BEFORE doing anything else. */ lockPageScroll(); /* * Make absolutely sure we're at the top. */ window.scrollTo(0, 0); } /* ========================================= WHEEL HANDLER ========================================= */ function wheelHandler(e) { /* ===================================== VIDEO FINISHED ===================================== Normal scrolling is allowed. If the user returns to the very top and scrolls upward, video control starts again. */ if (videoComplete) { if ( e.deltaY < 0 && isAtTop() ) { e.preventDefault(); e.stopPropagation(); startVideoControl(); videoComplete = false; setProgress( progress + e.deltaY * SPEED ); } return; } /* ===================================== VIDEO AT BEGINNING ===================================== */ if ( progress <= 0 && !controllingVideo ) { if ( e.deltaY > 0 && isAtTop() ) { e.preventDefault(); e.stopPropagation(); startVideoControl(); setProgress( progress + e.deltaY * SPEED ); } return; } /* ===================================== VIDEO CURRENTLY BEING SCRUBBED ===================================== */ if (controllingVideo) { /* * ALWAYS prevent the wheel from * scrolling the page. */ e.preventDefault(); e.stopPropagation(); /* * Keep page at absolute top. */ if (window.scrollY !== 0) { window.scrollTo(0, 0); } /* * Control video. */ setProgress( progress + e.deltaY * SPEED ); /* ================================= VIDEO REACHED BEGINNING ================================= */ if (progress <= 0) { progress = 0; targetTime = 0; currentTime = 0; stopAnimation(); video.currentTime = 0; controllingVideo = false; videoComplete = false; /* * Keep page locked at top. */ window.scrollTo(0, 0); unlockPageScroll(); return; } /* ================================= VIDEO REACHED END ================================= */ if (progress >= 1) { progress = 1; /* * Keep controllingVideo true * until the actual animation * reaches the final frame. */ targetTime = video.duration; startAnimation(); return; } } } /* ========================================= PREVENT AUTOPLAY ========================================= */ video.addEventListener( "play", function () { video.pause(); if (videoComplete) { freezeLastFrame(); } } ); /* ========================================= VIDEO ENDED ========================================= */ video.addEventListener( "ended", function () { videoComplete = true; controllingVideo = false; progress = 1; freezeLastFrame(); /* * Now allow the page to scroll. */ unlockPageScroll(); } ); /* ========================================= SETUP ========================================= */ video.addEventListener( "loadedmetadata", function () { video.pause(); video.currentTime = 0; progress = 0; targetTime = 0; currentTime = 0; /* * Capture wheel BEFORE Carrd. */ window.addEventListener( "wheel", wheelHandler, { passive: false, capture: true } ); } ); /* ========================================= KEYBOARD SCROLL PROTECTION ========================================= */ window.addEventListener( "keydown", function (e) { if (!controllingVideo) return; const scrollKeys = [ "ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " ", "Spacebar" ]; if ( scrollKeys.includes(e.key) ) { e.preventDefault(); e.stopPropagation(); } }, { passive: false, capture: true } ); /* ========================================= TOUCH PROTECTION ========================================= */ window.addEventListener( "touchmove", function (e) { if (!controllingVideo) return; e.preventDefault(); }, { passive: false, capture: true } ); });
Text
Text
document.addEventListener("DOMContentLoaded", function () { const originalTitle = document.getElementById("title"); if (!originalTitle) return; /* ================================================== SCROLLBAR EDGE BUFFER ================================================== */ const SCROLL_EDGE_BUFFER = 0.005; const scrollbarStyle = document.createElement("style"); scrollbarStyle.id = "siegecorp-scrollbar-buffer"; scrollbarStyle.textContent = ` html, body { scrollbar-width: none !important; -ms-overflow-style: none !important; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } `; document.head.appendChild( scrollbarStyle ); let scrollbarHidden = true; function updateScrollbar() { const maxScroll = document.documentElement.scrollHeight - window.innerHeight; if (maxScroll <= 0) { return; } const scrollPercent = window.scrollY / maxScroll; const shouldHide = scrollPercent <= SCROLL_EDGE_BUFFER || scrollPercent >= (1 - SCROLL_EDGE_BUFFER); if ( shouldHide === scrollbarHidden ) { return; } scrollbarHidden = shouldHide; if (shouldHide) { if ( !document.head.contains( scrollbarStyle ) ) { document.head.appendChild( scrollbarStyle ); } } else { if ( document.head.contains( scrollbarStyle ) ) { scrollbarStyle.remove(); } } } window.addEventListener( "scroll", updateScrollbar, { passive: true } ); window.addEventListener( "resize", updateScrollbar, { passive: true } ); updateScrollbar(); /* ================================================== SETTINGS ================================================== */ const finalText = "siegecorp"; const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*+-_=<>?/"; /* COLORS */ const scrambleColor = "#ff0000"; const decodedColor = "#00ff00"; /* SIEGECORP */ const introTime = 600; const frameSpeed = 25; const letterTime = 140; const spacingTime = 220; /* BLACK SCREEN */ const blackScreenTime = 350; /* DEPIXEL */ const depixelTime = 2000; const startingBlur = 12; const startingPixel = 35; /* ================================================== GET TITLE ================================================== */ const rect = originalTitle.getBoundingClientRect(); const style = window.getComputedStyle(originalTitle); /* ================================================== BLACK INTRO ================================================== */ const intro = document.createElement("div"); intro.style.cssText = ` position:fixed; inset:0; width:100vw; height:100vh; background:#000; z-index:2147483647; pointer-events:none; `; document.documentElement.appendChild( intro ); /* ================================================== SIEGECORP ================================================== */ const logo = originalTitle.cloneNode(true); logo.removeAttribute("id"); logo.style.cssText = ` position:fixed !important; left:${rect.left}px !important; top:${rect.top}px !important; width:${rect.width}px !important; height:${rect.height}px !important; margin:0 !important; padding:0 !important; font-family:${style.fontFamily} !important; font-size:${style.fontSize} !important; font-weight:${style.fontWeight} !important; font-style:${style.fontStyle} !important; line-height:${style.lineHeight} !important; text-align:${style.textAlign} !important; text-transform:none !important; color:${scrambleColor} !important; letter-spacing:${style.letterSpacing} !important; white-space:nowrap !important; z-index:2147483648 !important; pointer-events:none !important; `; intro.appendChild(logo); /* ================================================== CHARACTER RENDERING ================================================== */ let decoded = []; for ( let i = 0; i < finalText.length; i++ ) { decoded[i] = false; } function randomChar() { return chars[ Math.floor( Math.random() * chars.length ) ]; } function renderText(text) { logo.innerHTML = ""; for ( let i = 0; i < text.length; i++ ) { const span = document.createElement("span"); span.textContent = text[i]; span.style.color = decoded[i] ? decodedColor : scrambleColor; logo.appendChild(span); } } /* ================================================== INITIAL SCRAMBLE ================================================== */ let text = finalText .split("") .map(() => randomChar()); let index = 0; let elapsed = 0; renderText(text); const scramble = setInterval(() => { for ( let i = 0; i < text.length; i++ ) { text[i] = randomChar(); decoded[i] = false; } renderText(text); elapsed += frameSpeed; if ( elapsed >= introTime ) { clearInterval(scramble); decode(); } }, frameSpeed); /* ================================================== DECODE LEFT → RIGHT ================================================== */ function decode() { if ( index >= finalText.length ) { text = finalText.split(""); for ( let i = 0; i < decoded.length; i++ ) { decoded[i] = true; } renderText(text); spacing(); return; } let time = 0; const timer = setInterval(() => { for ( let i = 0; i < index; i++ ) { text[i] = finalText[i]; decoded[i] = true; } text[index] = randomChar(); decoded[index] = false; for ( let i = index + 1; i < finalText.length; i++ ) { text[i] = randomChar(); decoded[i] = false; } renderText(text); time += frameSpeed; if ( time >= letterTime ) { clearInterval(timer); text[index] = finalText[index]; decoded[index] = true; renderText(text); index++; decode(); } }, frameSpeed); } /* ================================================== LETTER SPACING ================================================== */ function spacing() { const start = performance.now(); function animate(time) { const progress = Math.min( (time - start) / spacingTime, 1 ); const eased = 1 - Math.pow( 1 - progress, 3 ); logo.style.letterSpacing = (0.25 * eased) + "em"; if ( progress < 1 ) { requestAnimationFrame( animate ); } else { logo.style.letterSpacing = "0.25em"; glitch(); } } requestAnimationFrame( animate ); } /* ================================================== SIEGECORP BLINK / GLITCH ================================================== */ function glitch() { let count = 0; const totalGlitches = 7; const timer = setInterval(() => { logo.style.opacity = Math.random() > 0.45 ? "1" : "0"; if ( Math.random() > 0.6 ) { const backup = logo.innerHTML; let glitchText = ""; for ( let i = 0; i < finalText.length; i++ ) { glitchText += Math.random() > 0.5 ? randomChar() : finalText[i]; } logo.innerHTML = `${glitchText}`; setTimeout(() => { logo.innerHTML = backup; }, 30); } count++; if ( count >= totalGlitches ) { clearInterval(timer); logo.style.opacity = "1"; decoded = finalText .split("") .map(() => true); renderText( finalText.split("") ); blackout(); } }, 60); } /* ================================================== BLACKOUT ================================================== */ function blackout() { intro.style.display = "block"; intro.style.opacity = "1"; logo.style.opacity = "0"; setTimeout(() => { startDepixel(); }, blackScreenTime); } /* ================================================== DEPIXEL / DEBLUR ================================================== */ function startDepixel() { intro.remove(); const blurLayer = document.createElement("div"); blurLayer.style.cssText = ` position:fixed; inset:0; width:100vw; height:100vh; z-index:2147483646; pointer-events:none; backdrop-filter:blur(${startingBlur}px); -webkit-backdrop-filter:blur(${startingBlur}px); background:rgba(0,0,0,0.01); `; document.documentElement.appendChild( blurLayer ); const blockLayer = document.createElement("div"); blockLayer.style.cssText = ` position:fixed; inset:0; width:100vw; height:100vh; z-index:2147483645; pointer-events:none; overflow:hidden; `; document.documentElement.appendChild( blockLayer ); /* ================================================== CREATE BLACK PIXELS ================================================== */ const cols = Math.ceil( window.innerWidth / startingPixel ); const rows = Math.ceil( window.innerHeight / startingPixel ); const blocks = []; for ( let y = 0; y < rows; y++ ) { for ( let x = 0; x < cols; x++ ) { const block = document.createElement("div"); block.style.cssText = ` position:absolute; left:${x * startingPixel}px; top:${y * startingPixel}px; width:${startingPixel + 1}px; height:${startingPixel + 1}px; background:#000; opacity:1; `; blockLayer.appendChild( block ); blocks.push(block); } } /* ================================================== SHUFFLE PIXELS ================================================== */ for ( let i = blocks.length - 1; i > 0; i-- ) { const j = Math.floor( Math.random() * (i + 1) ); const temp = blocks[i]; blocks[i] = blocks[j]; blocks[j] = temp; } /* ================================================== DEPIXEL ANIMATION ================================================== */ const start = performance.now(); function animate(time) { const progress = Math.min( (time - start) / depixelTime, 1 ); const eased = 1 - Math.pow( 1 - progress, 4 ); const blur = startingBlur * (1 - eased); blurLayer.style.backdropFilter = `blur(${blur}px)`; blurLayer.style.webkitBackdropFilter = `blur(${blur}px)`; const amount = Math.floor( blocks.length * eased ); for ( let i = 0; i < amount; i++ ) { blocks[i].style.opacity = "0"; } if ( progress < 1 ) { requestAnimationFrame( animate ); } else { blockLayer.remove(); blurLayer.remove(); } } requestAnimationFrame( animate ); } });
window.addEventListener("load", function () { const title = document.getElementById("headertext1"); if (!title) return; const TEXT = "blinq"; /* ========================================= SETTINGS ========================================= */ const TRIGGER = 1000; const COLUMN_DURATION = 900; const EXIT_DURATION = 500; const FADE_DURATION = 350; const SPACING = 45; /* Column position */ const COLUMN_SHIFT_X = -80; const COLUMN_MIN_LEFT = 20; /* Black bar */ const BAR_WIDTH = 110; const BAR_START_OFFSET = 180; const BAR_HORIZONTAL_OFFSET = -20; /* Return animation */ const EXIT_DISTANCE = 220; /* ========================================= STATE ========================================= */ let progress = 0; let animationFrame = null; let letters = null; let hasTriggered = false; let exiting = false; /* ========================================= FOREGROUND LAYER ========================================= */ const layer = document.createElement("div"); layer.style.cssText = ` position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; pointer-events: none !important; z-index: 2147483647 !important; overflow: visible !important; `; document.body.appendChild(layer); /* ========================================= BLACK BAR ========================================= */ const blackBar = document.createElement("div"); blackBar.style.cssText = ` position: fixed !important; top: 0 !important; bottom: 0 !important; width: ${BAR_WIDTH}px !important; background: #000000 !important; opacity: 0 !important; pointer-events: none !important; z-index: 0 !important; transform: translateX(-50%) !important; will-change: left, opacity !important; `; layer.appendChild(blackBar); /* ========================================= FIND TEXT NODE ========================================= */ function getTextNode() { const walker = document.createTreeWalker( title, NodeFilter.SHOW_TEXT ); let node; while (node = walker.nextNode()) { if (node.textContent.trim()) { return node; } } return null; } /* ========================================= CREATE LETTERS ========================================= */ function createLetters() { const node = getTextNode(); if (!node) return null; const positions = []; for ( let i = 0; i < TEXT.length; i++ ) { const range = document.createRange(); range.setStart(node, i); range.setEnd(node, i + 1); const rect = range.getBoundingClientRect(); positions.push({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2, left: rect.left, top: rect.top, width: rect.width, height: rect.height }); } /* ===================================== FIRST LETTER = COLUMN ANCHOR ===================================== */ const anchorX = positions[0].x; const anchorY = positions[0].y; const style = window.getComputedStyle(title); const result = []; for ( let i = 0; i < TEXT.length; i++ ) { const letter = document.createElement("span"); letter.textContent = TEXT[i]; letter.style.cssText = ` position: fixed !important; left: ${positions[i].left}px !important; top: ${positions[i].top}px !important; margin: 0 !important; padding: 0 !important; font-family: ${style.fontFamily} !important; font-size: ${style.fontSize} !important; font-weight: ${style.fontWeight} !important; font-style: ${style.fontStyle} !important; line-height: ${style.lineHeight} !important; color: ${style.color} !important; white-space: nowrap !important; pointer-events: none !important; visibility: visible !important; opacity: 1 !important; display: block !important; will-change: transform, opacity !important; z-index: 1 !important; `; layer.appendChild(letter); const desiredColumnX = anchorX + COLUMN_SHIFT_X; const safeColumnX = Math.max( COLUMN_MIN_LEFT + positions[i].width / 2, desiredColumnX ); result.push({ element: letter, startX: positions[i].x, startY: positions[i].y, columnX: safeColumnX, columnY: anchorY + i * SPACING, columnOffsetX: 0, columnOffsetY: 0 }); } return result; } /* ========================================= RENDER COLUMN ========================================= */ function renderColumn(value) { if (!letters) return; letters.forEach(function (item) { const x = ( item.columnX - item.startX ) * value; const y = ( item.columnY - item.startY ) * value; item.element.style.transform = `translate3d( ${x}px, ${y}px, 0 )`; if (value === 1) { item.columnOffsetX = x; item.columnOffsetY = y; } }); } /* ========================================= BAR POSITION ========================================= */ function getFinalBarX() { if (!letters || !letters.length) { return 0; } const first = letters[0]; return ( first.startX + first.columnOffsetX + BAR_HORIZONTAL_OFFSET ); } /* ========================================= SCROLL DOWN ========================================= */ function animateDown() { if (exiting) return; if (!letters) { letters = createLetters(); } if (!letters) return; blackBar.style.opacity = "0"; /* Start letters in original position */ renderColumn(0); /* Calculate final bar position */ renderColumn(1); const finalBarX = getFinalBarX(); /* Reset letters */ renderColumn(0); /* Start bar to the left */ const startBarX = finalBarX - BAR_START_OFFSET; blackBar.style.left = `${startBarX}px`; blackBar.style.opacity = "0"; title.style.visibility = "hidden"; const start = progress; const startTime = performance.now(); function frame(time) { const raw = Math.min( ( time - startTime ) / COLUMN_DURATION, 1 ); const eased = 1 - Math.pow( 1 - raw, 3 ); progress = start + ( 1 - start ) * eased; /* Move letters */ renderColumn(progress); /* Move bar */ const barX = startBarX + ( finalBarX - startBarX ) * eased; blackBar.style.left = `${barX}px`; blackBar.style.opacity = String(eased); if (raw < 1) { animationFrame = requestAnimationFrame(frame); } else { progress = 1; animationFrame = null; renderColumn(1); blackBar.style.left = `${finalBarX}px`; blackBar.style.opacity = "1"; } } animationFrame = requestAnimationFrame(frame); } /* ========================================= SCROLL BACK UP ========================================= */ function animateUp() { if ( !letters || exiting ) { return; } exiting = true; if (animationFrame) { cancelAnimationFrame( animationFrame ); animationFrame = null; } renderColumn(1); const startingBarX = getFinalBarX(); blackBar.style.left = `${startingBarX}px`; blackBar.style.opacity = "1"; const startTime = performance.now(); function frame(time) { const raw = Math.min( ( time - startTime ) / EXIT_DURATION, 1 ); const eased = 1 - Math.pow( 1 - raw, 3 ); const moveLeft = EXIT_DISTANCE * eased; /* Move letters left */ letters.forEach(function (item) { const x = item.columnOffsetX - moveLeft; const y = item.columnOffsetY; item.element.style.transform = `translate3d( ${x}px, ${y}px, 0 )`; item.element.style.opacity = String( 1 - eased ); }); /* Move bar with letters */ blackBar.style.left = `${startingBarX - moveLeft}px`; blackBar.style.opacity = String( 1 - eased ); if (raw < 1) { requestAnimationFrame(frame); } else { letters.forEach(function (item) { item.element.remove(); }); letters = null; progress = 0; blackBar.style.opacity = "0"; title.style.visibility = "visible"; title.style.opacity = "0"; requestAnimationFrame( function () { title.animate( [ { opacity: 0 }, { opacity: 1 } ], { duration: FADE_DURATION, easing: "ease-out", fill: "forwards" } ); } ); exiting = false; } } requestAnimationFrame(frame); } /* ========================================= SCROLL DETECTION ========================================= */ window.addEventListener( "scroll", function () { const scroll = window.scrollY || window.pageYOffset; if ( scroll >= TRIGGER && !hasTriggered ) { hasTriggered = true; animateDown(); } else if ( scroll < TRIGGER && hasTriggered ) { hasTriggered = false; animateUp(); } }, { passive: true } ); });
window.addEventListener("load", function () { const topbar = document.getElementById("topbar"); if (!topbar) return; const oldBox = document.getElementById("scroll-black-box"); if (oldBox) { oldBox.remove(); } const blackBox = document.createElement("div"); blackBox.id = "scroll-black-box"; blackBox.style.cssText = ` position: fixed; top: -20px; left: 0; width: 100vw; height: 100px; background: #000000; pointer-events: none; opacity: 0; z-index: 9999998; `; topbar.parentNode.insertBefore( blackBox, topbar ); topbar.style.zIndex = "9999999"; let isVisible = false; let animationFrame = null; function showBox() { if (isVisible) return; isVisible = true; if (animationFrame) { cancelAnimationFrame(animationFrame); } const startTime = performance.now(); const duration = 400; function animate(time) { const progress = Math.min( (time - startTime) / duration, 1 ); const eased = 1 - Math.pow(1 - progress, 3); /* -120px → -20px */ const top = -120 + (100 * eased); blackBox.style.top = top + "px"; blackBox.style.opacity = String(eased); if (progress < 1) { animationFrame = requestAnimationFrame(animate); } else { blackBox.style.top = "-20px"; blackBox.style.opacity = "1"; animationFrame = null; } } animationFrame = requestAnimationFrame(animate); } function hideBox() { if (!isVisible) return; isVisible = false; if (animationFrame) { cancelAnimationFrame(animationFrame); } const startTime = performance.now(); const duration = 300; function animate(time) { const progress = Math.min( (time - startTime) / duration, 1 ); const eased = progress * progress; blackBox.style.opacity = String(1 - eased); if (progress < 1) { animationFrame = requestAnimationFrame(animate); } else { blackBox.style.opacity = "0"; blackBox.style.top = "-120px"; animationFrame = null; } } animationFrame = requestAnimationFrame(animate); } function update() { const scrollTop = window.scrollY || window.pageYOffset; const maxScroll = document.documentElement.scrollHeight - window.innerHeight; if (maxScroll <= 0) return; if (scrollTop >= maxScroll * 0.4) { hideBox(); } else { showBox(); } } window.addEventListener( "scroll", update, { passive: true } ); update(); });
window.addEventListener("load", function () { const logo = document.getElementById("jclogo"); if (!logo) return; const TRIGGER = 1000; const DELAY = 400; const FADE = 350; let timer = null; let hidden = false; logo.style.setProperty("filter", "none", "important"); logo.style.setProperty("-webkit-filter", "none", "important"); /* Initial state */ logo.style.setProperty("opacity", "1", "important"); logo.style.setProperty("visibility", "visible", "important"); logo.style.setProperty("transition", "none", "important"); window.addEventListener("scroll", function () { const scroll = window.scrollY || window.pageYOffset; /* ========================= SCROLL DOWN ========================= */ if (scroll >= TRIGGER) { clearTimeout(timer); hidden = true; logo.style.setProperty("transition", "none", "important"); logo.style.setProperty("opacity", "0", "important"); logo.style.setProperty("visibility", "hidden", "important"); } /* ========================= SCROLL UP ========================= */ else if (hidden) { clearTimeout(timer); logo.style.setProperty("opacity", "0", "important"); logo.style.setProperty("visibility", "hidden", "important"); timer = setTimeout(function () { const currentScroll = window.scrollY || window.pageYOffset; if (currentScroll < TRIGGER) { logo.style.setProperty( "visibility", "visible", "important" ); logo.style.setProperty( "filter", "none", "important" ); logo.style.setProperty( "-webkit-filter", "none", "important" ); /* Fade in */ logo.style.setProperty( "transition", `opacity ${FADE}ms ease-out`, "important" ); requestAnimationFrame(function () { logo.style.setProperty( "opacity", "1", "important" ); /* INSTANT BLINK */ setTimeout(function () { logo.style.setProperty( "transition", "none", "important" ); logo.style.setProperty( "opacity", "0", "important" ); requestAnimationFrame(function () { logo.style.setProperty( "opacity", "1", "important" ); }); }, FADE + 100); }); hidden = false; } }, DELAY); } }, { passive: true }); });
