HTML, CSS 및 JavaScript를 사용하여 부동 입자 네온 조명 효과 만들기

이 튜토리얼에서는 순수 HTML, CSS 및 JavaScript를 사용하여 떠다니는 입자로 매혹적인 네온 조명 효과를 만들어 보겠습니다. 각 구성 요소를 분석하고 이러한 놀라운 시각 효과를 만들기 위해 어떻게 함께 작동하는지 설명하겠습니다.

1. 핵심 구조의 이해

기본 HTML 구조를 분석하는 것부터 시작하겠습니다.

    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <div>



<p>Here's what each element does:</p>

<ul>
<li>
light-effect: Main container for our neon effect</li>
<li>
light-inner: Creates the core glow effect</li>
<li>
light-outer: Adds an additional layer of luminosity and rotation</li>
</ul>

<h2>
  
  
  2. CSS Variables and Root Setup
</h2>

<p>First, let's understand our CSS variables:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
    --blur-size: min(40vw, 40vh);
}

이 변수는 다음과 같은 이유로 중요합니다.

• 민감한 크기 조정을 위해 min() 사용
• 뷰포트 너비(vw)와 높이(vh)를 결합합니다
• 다양한 화면 크기에 비례하는 효과 생성

3. 바디 스타일링 심층 분석

body {
    margin: 0;
    overflow: hidden;
    background: black;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

각 속성을 분석해 보겠습니다.

• margin: 0: 기본 간격을 제거합니다
• 오버플로: 숨김: 스크롤 막대를 방지하고 입자를 포함합니다
• 배경: 검정색: 네온 효과를 위한 대비를 만듭니다
• 높이/너비: 100vh/vw: 전체 뷰포트 범위 보장
• 디스플레이: flex: 중앙 위치 지정 활성화
• justify-content/align-items: center: 완벽한 센터링

4. 주 조명 효과 컨테이너

.light-effect {
    width: var(--blur-size);
    height: var(--blur-size);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(calc(var(--blur-size) * 0.25));
    animation: pulseNeon 8s ease-in-out infinite;
}

주요 측면 설명:

1. 크기 조정: 반응형 크기에 CSS 변수를 사용합니다
2. 포지셔닝:
   • 위치: 고정: 스크롤 중 안정성 보장
   • 위쪽/왼쪽: 50%: 뷰포트 중앙의 위치
   • 변환: 변환(-50%, -50%): 완벽한 센터링
3. 흐림 효과:
   • 크기에 따른 동적 블러
   • 부드럽고 사실적인 빛 연출
4. 애니메이션:
   • 부드러운 효과를 위한 8초 지속
   • 자연스러운 움직임을 위한 이즈인아웃 타이밍

5. 내부 조명 레이어 세부정보

.light-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.2) 0%,
        rgba(72, 61, 139, 0.15) 30%,
        rgba(0, 0, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
}

경도 분석:

1. 중앙(0%):
   • 불투명도 20%의 보라색 톤
   • 핵심 밝기 생성
2. 중간층(30%):
   • 불투명도 15%에서 더 어두운 보라색
   • 깊이를 더하다
3. 외부 레이어(50%):
   • 불투명도 10%의 파란색 톤
   • 전환 생성
4. 엣지(70%):
   • 투명하게 희미해짐
   • 부드러운 가장자리 블렌딩

6. 외부 조명 레이어 세부정보

.light-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 40%,
        rgba(0, 0, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 80%);
    animation: rotateGradient 10s linear infinite;
    mix-blend-mode: screen;
}

특수효과 분석:

1. 그라데이션 구조:
   • 강렬함을 위한 화이트 센터
   • 보라색 중간 색상
   • 깊이를 더해주는 블루 아우터
2. 애니메이션:
   • 10초 회전
   • 부드러운 움직임을 위한 선형 타이밍
3. 블렌딩:
   • 빛나는 효과를 위한 화면 모드
   • 광채와 색상 혼합 향상

7. 애니메이션 키프레임 설명

    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <div>



<p>Here's what each element does:</p>

<ul>
<li>
light-effect: Main container for our neon effect</li>
<li>
light-inner: Creates the core glow effect</li>
<li>
light-outer: Adds an additional layer of luminosity and rotation</li>
</ul>

<h2>
  
  
  2. CSS Variables and Root Setup
</h2>

<p>First, let's understand our CSS variables:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
    --blur-size: min(40vw, 40vh);
}

애니메이션 세부정보:

1. 펄스네온:
   • 번역으로 중앙 위치 유지
   • 1에서 1.1 사이의 확장
   • 호흡 효과 생성
2. 회전 그라데이션:
   • 완전한 360도 회전
   • 지속적인 움직임
   • 역동성을 더하다

8. 파티클 시스템 심층 분석

body {
    margin: 0;
    overflow: hidden;
    background: black;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

입자 특성:

1. 기본 입자:
   • 고정 위치
   • 반투명 흰색
   • 원형 모양
   • 포인터 이벤트 없음
2. 크기 변형:
   • min()을 사용한 반응형 크기 조정
   • 다른 애니메이션 속도
   • 모든 기기에서 비율 유지

9. 입자 이동 애니메이션

.light-effect {
    width: var(--blur-size);
    height: var(--blur-size);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(calc(var(--blur-size) * 0.25));
    animation: pulseNeon 8s ease-in-out infinite;
}

이동 분석:

1. 시작(0%):
   • 뷰포트 아래에서 시작
   • 보이지 않는 상태
2. 페이드 인(20%):
   • 부드러운 불투명도 전환
3. 주요 운동(20-80%):
   • 전체 가시성
   • 꾸준한 상승 모션
4. 종료(80-100%):
   • 페이드 아웃 효과
   • 뷰포트 위 약간 겹침

10. 동적 입자 생성

.light-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.2) 0%,
        rgba(72, 61, 139, 0.15) 30%,
        rgba(0, 0, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
}

기능 분석:

1. 입자 생성:
   • 동적 DOM 요소 생성
   • 임의의 크기 할당
   • 확률적 분포
2. 포지셔닝 로직:
   • 임의의 가로 배치
   • 랜덤 애니메이션 지연
3. 메모리 관리:
   • 자동 정리
   • 크기에 따른 기간
   • 메모리 누수 방지

11. 반응형 디자인 구현

.light-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 40%,
        rgba(0, 0, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 80%);
    animation: rotateGradient 10s linear infinite;
    mix-blend-mode: screen;
}

대응 고려사항:

1. 태블릿 장치(768px 이하):
   • 상대적 크기 증가
   • 비율 유지
2. 모바일 기기(480px 이하):
   • 최대 상대 크기
   • 작은 화면에 최적화

12. 성능 최적화

@keyframes pulseNeon {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

최적화 전략:

1. 응답 간격:
   • 모바일에서는 입자가 적습니다
   • 기기 기능에 맞게 조정
2. 메모리 관리:
   • 이전 간격 지우기
   • 여러 인스턴스 방지
3. 이벤트 처리:
   • 창 크기 조정에 응답
   • 실적 유지

결론

이 효과는 여러 겹의 정교함을 결합합니다.

• 반응형 크기 조정을 위한 동적 CSS 변수
• 현실적인 빛을 위한 복잡한 그라데이션 조합
• 깊이를 더하는 파티클 시스템
• 원활한 운영을 위한 성능 최적화
• 모든 기기에 반응하는 디자인

결과적으로 성능에 미치는 영향을 최소화하면서 모든 웹 프로젝트를 향상시킬 수 있는 매혹적인 네온 효과가 탄생했습니다.