【React】マウス位置だけ画像が見える背景を実装する（particles.js）

概要

マウス位置だけ粒子が結合して、背面の画像が見える背景を実装します。

本記事は、以下の動画をReactで実装したものです。

スタイリングには、emotion/css（CSS in JS）を使用しています。

particles.jsの使い方は、以下を参照してください。

実装

import React, { VFC } from 'react';
import Particles from 'react-particles-js';
import { IOptions, RecursivePartial } from 'tsparticles';
import { css } from '@emotion/css';
import ParticlesParams from '../../assets/particlesjs-black-bubble.json';

export const AnimatedParticles: VFC = () => {
    return (
        <div className={styles.container}>
            <img className={styles.img} src="/assets/bg2.jpg" alt="" />
            <Particles
                className={styles.particles}
                params={ParticlesParams as RecursivePartial<IOptions>}
            />
        </div>
    )
}

const styles = {
    container: css`
        position: relative;
        width: 100vw;
        height: 100vh;
    `,
    img: css`
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    `,
    particles: css`
        position: relative;
        height: 100%;
        background-color: #fff;
        mix-blend-mode: screen;
    `
}

• mix-blend-modeで、背景画像と前面のParticlesを重ねています。screenを使用することで、白は不透明、黒（漂う粒子の色）は透明になります。