【Wordpress】記載のURLのようなアニメーションがWordpressサイトでは適用されない。

Question

現在、Wordpressを用いたサイトを作成中です。
トップページに参考サイトのような動きを取り入れたいと思い
実装を試みていますが適用されずの為、ご相談させて頂きます。

参考にしているサイト

https://codepen.io/Zaku/pen/EDaun

実際にやってみた事

【html】

<main>
	<div class="mainbox">
	<div class="mainL">
		<h1>オンマウスで画像を散らせるアニメーション</h1>
	</div>
	<div class="mainR">
        <div id="particle-slider">
        <div class="slides">
        <div id="first-slide" class="slide" data-src="ここに画像のデータ"></div>	
    	</div>
  		<canvas class="draw"></canvas>
        </div>
	</div>
	</div>
</main>
※文字数の兼ね合いでdata-src部分は割愛しています。

【CSS】

html, body {
  background-color: White;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.mainbox {
    display: table;
    width: 100%;
    height: 100vh;
}
.mainbox  .mainL {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}
.mainbox  .mainR {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}
#particle-slider {
  width: 100%;
  height: 100%;
}
canvas .draw {
	display: block;
	width: 100%;
	height: 100%;
}

【Javascript】

var init = function(){
  var isMobile = navigator.userAgent &&
    navigator.userAgent.toLowerCase().indexOf('mobile') >= 0;
  var isSmall = window.innerWidth < 1000;
  var ps = new ParticleSlider({
    ptlGap: isMobile || isSmall ? 3 : 0,
    ptlSize: isMobile || isSmall ? 3 : 1,
    width: 1e9,
    height: 1e9
  });
  var gui = new dat.GUI();
  gui.add(ps, 'ptlGap').min(0).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'ptlSize').min(1).max(5).step(1).onChange(function(){
    ps.init(true);
  });
  gui.add(ps, 'restless');
  gui.addColor(ps, 'color').onChange(function(value){
    ps.monochrome = true;
    ps.setColor(value);
	  ps.init(true);
  });
  (window.addEventListener
   ? window.addEventListener('click', function(){ps.init(true)}, false)
   : window.onclick = function(){ps.init(true)});
}
var initParticleSlider = function(){
  var psScript = document.createElement('script');
  (psScript.addEventListener
    ? psScript.addEventListener('load', init, false)
    : psScript.onload = init);
  psScript.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/ps-0.9.js';
	psScript.setAttribute('type', 'text/javascript');
  document.body.appendChild(psScript);
}
(window.addEventListener
  ? window.addEventListener('load', initParticleSlider, false)
  : window.onload = initParticleSlider);

当然ですが、実際にこの記述でcodepenの方で行った際は表示もされ、
望んだ形にもなったのですが、実際にWordpress上で記述を行った所、
アニメーションどころか、画像すら表示されない状態でした・・。


【実際にcodepen上で行っている内容】
https://codepen.io/kuronekonnc/pen/jOBLxOr

理想の動きは画像にオンマウスを行った際に、散らすような動きで、離すと元の画像に戻るような形なのですが、
Wordpress上だと何故適用されないのか分からずでしたので、お知恵を貸して頂ければ幸いです。

特にこの方法にこだわりがある訳ではないので、こういう方法もある・・と言った内容でも大歓迎です。

お手数ではございますが、よろしくお願いします。

Comments

[CHERRY]

WordPress には、どのように組み込んだのでしょうか？

デベロッパーツールで確認するとメッセージが出ていたり、他のJavaScript と競合していたりしないでしょうか？

[NNC]

ご返信ありがとうございます。

＞WordPress には、どのように組み込んだのでしょうか？
html、CSSはcodepenに記述した内容と全く同じにしており
Javascriptの方はlogo.jsと取り急ぎファイルを作り、読み込ませる方法と<script>～</script>で囲み直接記述する両方を試してみました。
※index.phpに直接書いています。

デベロッパーツールで確認をしたら下記のようなメッセージがありました。

──────────────────────
logo.js:35 Uncaught TypeError: Cannot read property 'appendChild' of null
at logo.js:35
at logo.js:37
(anonymous) @ logo.js:35
(anonymous) @ logo.js:37
──────────────────────
【35行目】
document.body.appendChild(psScript);

【37行目】
(window.addEventListener

見る限り、appendChildが存在しない扱いになってしまっているのですが、
Local環境に移して確認してみると、このエラーが出ないので何とぶつかっているのかがわからない状態でもあります・・。

Answer 1

particle-sliderの部分のwidthとheightを100％ではなく、サイズを指定する事で解決しました。

#particle-slider {
  width: 600px;
  height: 600px;
}