아보카도 배경 효과 채택완료

그누보드5(순정 그누 예시)에서 Prism Particle Parallax 배경 효과를 적용하기 위해,

스타일은 /css/prism-background.css 별도 파일을 생성/관리하고,

/js/prism-background.js를 생성하여 JavaScript로 파티클 애니메이션과 패럴랙스 효과를 구현.

그누보드에 적용하기 위해 (파일 경로 커스터마이징 필수)

head.sub.php에서 <link rel="stylesheet" href="/css/prism-background.css">로 CSS를 로드,

적용할_블럭.php에서 <div class="background-effect-prism"></div> 및

<div class="background-effect-prism-back"></div> 요소를 추가한 뒤, </body> 태그 직전에

<script src="/js/prism-background.js"></script>를 삽입하여 JavaScript를 실행.

개발자 도구로 prism-background.css와 prism-background.js의 정상 로드 확인.

/＊/css/prism-background.css */

@font-face {
    font-family: 'ClimateCrisisKR-1979';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/ClimateCrisisKR-1979.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

body {
    overflow: hidden;
}

.background {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('https://images.unsplash.com/photo-1542272201-b1ca555f8505?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80');
    position: absolute;
    overflow: hidden;
    filter: blur(3px);
    z-index: -10;
}

.background-effect-prism, .background-effect-prism-back {
    width: 100vw; 
    height: 100vh; 
    position: fixed; 
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}

/* 파티클 스타일 */
.particle {
    position: absolute;
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 100%;
    opacity: 0;
    animation-iteration-count: infinite;
    box-shadow: 10px -5px 3px rgba(255,255,255,0.2);
}

@keyframes spark1 {
    0%, 35%, 100% { opacity: 0; }
    30%, 70%, 90% { opacity: 1; }
}

@keyframes sparkmove1 {
    0% { transform: translate(0, 0) scale(1); filter: blur(4px); }
    100% { transform: translate(-900px, 1200px) scale(1.5); filter: blur(6px); }
}

@keyframes sparkmove2 {
    0% { transform: translate(0, 0) scale(1); filter: blur(1px); }
    100% { transform: translate(-600px, 800px) scale(1.2); filter: blur(3px); }
}

/* 전경 */
.background-effect-prism .particle {
    animation-name: spark1, sparkmove1;
    animation-duration: 20s;
}

/* 원경 */
.background-effect-prism-back .particle {
    animation-name: spark1, sparkmove2;
    animation-duration: 40s;
}

//＊/js/prism-background.js ＊

document.addEventListener("DOMContentLoaded", function () {
    let backgroundEffect = document.createElement("div");
    backgroundEffect.className = "background-effect-prism";
    document.body.insertBefore(backgroundEffect, document.body.firstChild);

    let backgroundEffectBack = document.createElement("div");
    backgroundEffectBack.className = "background-effect-prism-back";
    document.body.insertBefore(backgroundEffectBack, document.body.firstChild);

    for (let i = 0; i < 40; i++) {
        let particleDiv = document.createElement('div');
        let z = Math.floor(Math.random() * 4);
        let color = ['#F8E0EC', '#CED8F6', '#F5ECCE', '#E6F8E0'][z];
        let gradient = `background: linear-gradient(45deg, ${color}, rgba(255, 222, 222, 0.253));`;
        let x = Math.floor(Math.random() * 120) - 40;
        let y = Math.floor(Math.random() * 120) - 40;

        particleDiv.setAttribute("class", i % 2 === 0 ? "particle distance1-p" : "particle distance2-p");
        particleDiv.setAttribute("style", `top: ${x}vh; right: ${y}vw; ${gradient} animation-delay: ${i % 20}s;`);

        if (i % 2 === 0) {
            document.querySelector('.background-effect-prism').appendChild(particleDiv);
        } else {
            document.querySelector('.background-effect-prism-back').appendChild(particleDiv);
        }
    }

    document.querySelector('body').addEventListener('mousemove', function (e) {
        let amountMovedX = (e.clientX * -0.43 / 6);
        let amountMovedY = (e.clientY * -0.43 / 6);
        let amountMovedX2 = (e.clientX * -0.1 / 6);
        let amountMovedY2 = (e.clientY * -0.1 / 6);

        document.querySelectorAll('.distance1-p').forEach(el => el.style.transform = `translate3d(${amountMovedX}px, ${amountMovedY}px, 0px)`);
        document.querySelectorAll('.distance2-p').forEach(el => el.style.transform = `translate3d(${amountMovedX2}px, ${amountMovedY2}px, 0px)`);
    });
});

※ 최신 순정 그누보드, 기본 테마(/theme/basic/head.sub.php)에 설정한 예시

<?php

$shop_css = '';

if (defined('_SHOP_')) $shop_css = '_shop';

echo '<link rel="stylesheet" href="'.run_replace('head_css_url', G5_THEME_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').$shop_css.'.css?ver='.G5_CSS_VER, G5_THEME_URL).'">'.PHP_EOL;

?>

head.sub.php 파일의 위의 코드 밑에 아래 코드 추가 

</p>

<p><link rel="stylesheet" href="<?php echo G5_URL; ?>/css/prism-background.css"></p>

<p><script src="<?php echo G5_URL; ?>/js/prism-background.js"></script></p>

<p>