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

概要

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

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

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

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

実装

.tsx

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を使用することで、白は不透明、黒（漂う粒子の色）は透明になります。