On this page
728x90
다음은 블라인드 효과를 적용하고, 마우스/키보드 이벤트를 비활성화하고, 스크롤을 방지하고, 정상적인 동작을 복원하는 단일 함수를 포함하는 JavaScript 코드의 결합되고 단순화된 버전입니다.
간혹 사이트를 패쇄하기는 그렇고 잠시 막아야 할때 유용한것 같습니다.
기본코드
html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>웹사이트 블라인드 효과</title> <style> /* 일반적인 body 스타일 */ body { margin: 0; font-family: Arial, sans-serif; } /* 블라인드 효과(오버레이) 스타일 */ #blind-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 반투명 검은색 */ backdrop-filter: blur(20px); /* 배경 흐림 효과 */ z-index: 9999; /* 다른 요소 위에 위치 */ pointer-events: none; /* 오버레이와의 상호작용 방지 */ } /* 메인 콘텐츠 스타일 */ .content { margin: 20px; text-align: center; height:2000px } </style> </head> <body> <!-- 블라인드 효과 오버레이 --> <div id="blind-overlay"></div> <!-- 메인 콘텐츠 --> <div class="content"> <h1>웹사이트 블라인드 효과</h1> <p>현재 화면이 블라인드 효과로 가려져 있습니다.</p> </div> <script> // 이벤트 리스너를 저장할 객체 let originalScrollPosition; const listeners = {}; // 방해 효과 적용 함수 function applyDisruptiveEffects() { // 블라인드 효과 추가 (HTML에 이미 존재) const overlay = document.getElementById("blind-overlay"); overlay.style.pointerEvents = "none"; // 선택 사항: 상호작용 방지 // 마우스 이벤트 비활성화 listeners.mouseMove = (event) => event.preventDefault(); listeners.click = (event) => event.preventDefault(); document.addEventListener("mousemove", listeners.mouseMove, true); document.addEventListener("click", listeners.click, true); // 키보드 입력 비활성화 listeners.keyDown = (event) => event.preventDefault(); listeners.keyUp = (event) => event.preventDefault(); document.addEventListener("keydown", listeners.keyDown, true); document.addEventListener("keyup", listeners.keyUp, true); // 스크롤 방지 originalScrollPosition = window.scrollY; document.body.style.overflow = "hidden"; // 스크롤 잠금 } // 정상 동작 복구 함수 <- 그냥 참고용 function restoreNormalBehavior() { // 블라인드 효과 제거 const overlay = document.getElementById("blind-overlay"); if (overlay) overlay.remove(); // 마우스 이벤트 복구 document.removeEventListener("mousemove", listeners.mouseMove, true); document.removeEventListener("click", listeners.click, true); // 키보드 입력 복구 document.removeEventListener("keydown", listeners.keyDown, true); document.removeEventListener("keyup", listeners.keyUp, true); // 스크롤 복구 document.body.style.overflow = ""; // 스크롤 잠금 해제 } // 페이지 로드 시 방해 효과 적용 applyDisruptiveEffects(); </script> </body> </html>
1. HTML 구조
- #blind-overlay: 블라인드 효과를 위한 div 요소로, 화면을 어둡게 덮고 흐림 효과를 적용합니다.
- .content: 메인 콘텐츠로, 블라인드 효과 아래에 표시됩니다.
- .restore-button: 사용자에게 정상 동작으로 복구할 수 있는 버튼을 제공합니다.
2. CSS 스타일
- backdrop-filter: blur(20px): 블라인드 효과에 배경 흐림 효과를 적용합니다.
- pointer-events: none: 오버레이와의 상호작용을 방지합니다(선택 사항).
3. JavaScript 기능
- applyDisruptiveEffects():
- 블라인드 효과를 추가하고, 마우스와 키보드 입력, 스크롤을 비활성화합니다.
- restoreNormalBehavior():
- 블라인드 효과를 제거하고, 마우스와 키보드 입력을 복구하며, 스크롤을 다시 활성화합니다.
다른게 단순하게
html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website Blind Effect</title> <style> /* Body Styling */ body { margin: 0; font-family: Arial, sans-serif; overflow: hidden; /* Prevent scrolling while the blind is active */ } /* Full-screen Blind Effect */ .blind-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, .5); z-index:99999; backdrop-filter:blur(20px); } /* .blind-overlay { display: none; } */ /* Content underneath */ .content { margin: 20px; text-align: center; } </style> </head> <body> <!-- Blind Effect Overlay --> <div id="blind" class="blind-overlay"> Loading, please wait... </div> <!-- Main Content --> <div class="content"> <h1>Welcome to My Website</h1> <p>Here is some interesting content you can enjoy once the blind effect is removed.</p> </div> </body> </html>
간단한 CSS를 이용하여 만들수도 있습니다.
참고사항
- backdrop-filter는 대부분의 최신 브라우저(예: Chrome, Edge, Safari)에서 지원됩니다.
- 일부 이전 버전의 Internet Explorer 또는 Edge에서는 작동하지 않을 수 있습니다. 호환성 세부 사항을 보려면 항상 사용할 수 있는지 - 배경화면 필터를 확인하세요.
728x90