728x90
다음은 블라인드 효과를 적용하고, 마우스/키보드 이벤트를 비활성화하고, 스크롤을 방지하고, 정상적인 동작을 복원하는 단일 함수를 포함하는 JavaScript 코드의 결합되고 단순화된 버전입니다.
간혹 사이트를 패쇄하기는 그렇고 잠시 막아야 할때 유용한것 같습니다.
기본코드
<!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():
- 블라인드 효과를 제거하고, 마우스와 키보드 입력을 복구하며, 스크롤을 다시 활성화합니다.
다른게 단순하게
<!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