コンパイラかく語りき

import { Fun } from 'programming'

トップ > tsParticles > 【tsparticles】canvas 要素への z-index 指定方法や、前面に出過ぎる問題への対処法

【tsparticles】canvas 要素への z-index 指定方法や、前面に出過ぎる問題への対処法

tsParticles

問題

tsparticles を使うと、サイト内に動的な演出ができて便利です。

github.com

 

しかし直近リリースされた v2.4.0 に対応したところ、tsparticles の canvas が前面に出てきてしまいました…。

github.com

 

原因

原因は、canvas の inline style を消すのが難しくなったためでした。

 

自分は tsparticles が生成する canvas の inline styles を削除して、自前でスタイルを当てていました。

export const ParticlesBackground = () => {
// プリセットの読みこみ
const particlesInit = useCallback(async (engine: Engine) => {
await loadLinksPreset(engine)
}, )

// デフォルトの canvas css を削除
const particleLoaded = useCallback(async () => {
const c = document.querySelector('canvas.particles-canvas')
c?.removeAttribute('style')
}, )

return (
<Particles canvasClassName={`particles-canvas ${styles.particles}`}
...

 

.particles {
// 親要素で position: relative; を指定すること
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100vw;
height: 100%;
background-color: #fff;
}
 
React ですが、このような実装。
しかし、消したはずの canvas の style が復活してくるという…。
 

対策

tsparticles のオプションにて、full screen を無効にし、背景色を設定するようにしました。

<Particles
canvasClassName={`particles-canvas ${styles.particles}`}
options={{
fullScreen: { enable: false },
background: {
color: { value: '#f5f5f5' },
},
 
このような感じ。
fullScreen がデフォルトで有効になっているので、「position:fixed」が付与されて前面に出てきていました。
また z-index を指定する場合は、「 fullScreen: { zIndex: -1 }」のように指定すれば OK です。
 
また、設定する CSS も少なくなりました。
.particles {
// 親要素で position: relative; を指定すること
position: absolute;
top: 0;
left: 0;
}
 
以上の対応により、元通りの表示を復元することができました。
そもそも、適切に options を設定すれば起こらなかった問題ですが…。（でも tsparticles のドキュメント見にくい…😇）
何かの参考になれば幸いです。