Javascript 如何在Wordpress主页中实现js动画_Javascript_Html_Css_Wordpress

Javascript 如何在Wordpress主页中实现js动画

javascript html css wordpress

Javascript 如何在Wordpress主页中实现js动画,javascript,html,css,wordpress,Javascript,Html,Css,Wordpress,我想在我的wordpress网站中实现这段代码。现在，当我在同一个文件夹中创建单独的css和js文件并将它们链接到html页面以显示它时，我甚至不能让它出现 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="./particle.css"> </head> <!-- particles.js container --

我想在我的wordpress网站中实现这段代码。现在，当我在同一个文件夹中创建单独的css和js文件并将它们链接到html页面以显示它时，我甚至不能让它出现


<!DOCTYPE html>
<html>
<head>

    <link rel="stylesheet" type="text/css" href="./particle.css">

</head>

<!-- particles.js container --> 
<body>



    <!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> 
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="./particle.js"> </script>





</body>

当我尝试在浏览器上可视化html页面时，没有显示任何内容

我不明白如何使它工作。最终目的是在我的网站主页上显示它，而不是实际的视频动画

有人可以帮我吗？

您需要为particle.js添加div标记，以便知道渲染元素的位置

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="./particle.css">
</head>

<!-- particles.js container --> 
<body>
    <div id="particles-js"></div>
    <!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> 
    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script src="./particle.js"> </script>
</body>

particlesJS（“particlesJS”{
“粒子”：{
“编号”：{
“价值”：80，
“密度”：{
“启用”：正确，
“价值面积”：800
}
},
“颜色”：{
“值”：“#ffffff”
},
“形状”：{
“类型”：“圆圈”，
“笔划”：{
“宽度”：0，
“颜色”：“000000”
},
“多边形”：{
“nb_边”：5
},
“图像”：{
“src”：“img/github.svg”，
“宽度”：100，
“高度”：100
}
},
“不透明度”：{
“值”：0.5，
“随机”：假，
“动画”：{
“enable”：false，
“速度”：1，
“不透明度最小值”：0.1，
“同步”：错误
}
},
“尺寸”：{
“价值”：3，
“随机”：对，
“动画”：{
“enable”：false，
“速度”：40，
“最小尺寸”：0.1，
“同步”：错误
}
},
“行链接”：{
“启用”：正确，
“距离”：150，
“颜色”：“ffffff”，
“不透明度”：0.4，
“宽度”：1
},
“移动”：{
“启用”：正确，
“速度”：6，
“方向”：“无”，
“随机”：假，
“直”：假，
“输出模式”：“输出”，
“反弹”：错误，
“吸引”：{
“enable”：false，
“rotateX”：600，
“rotateY”：1200
}
}
},
“互动性”：{
“在画布上检测”：“画布”，
“事件”：{
“悬停”：{
“启用”：正确，
“模式”：“拒绝”
},
“onclick”：{
“启用”：正确，
“模式”：“推送”
},
“调整大小”：true
},
“模式”：{
“抓取”：{
“距离”：400，
“行链接”：{
“不透明度”：1
}
},
“泡沫”：{
“距离”：400，
“尺寸”：40，
“期限”：2，
“不透明度”：8，
“速度”：3
},
“拒绝”：{
“距离”：200，
“持续时间”：0.4
},
“推送”：{
“粒子”：4
},
“删除”：{
“粒子”：2
}
}
},
“视网膜检测”：正确
});
变量计数\u粒子、统计数据、更新；
统计数据=新统计数据；
stats.setMode（0）；
stats.domElement.style.position='绝对'；
stats.domeElement.style.left='0px'；
stats.domElement.style.top='0px'；
document.body.appendChild（stats.domeElement）；
count_particles=document.querySelector（'.js count particles'）；
更新=函数（）{
stats.begin（）；
stats.end（）；
if（window.pJSDom[0].pJS.particles&&window.pJSDom[0].pJS.particles.array）{
count_particles.innerText=window.pJSDom[0].pJS.particles.array.length；
}
requestAnimationFrame（更新）；
};
requestAnimationFrame（更新）
画布{
显示：块；
垂直对齐：底部对齐；
}
/*----particles.js容器--*/
#粒子js{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：#dd8d3a；
背景图片：url（“”）；
背景重复：重复；
背景尺寸：封面；
背景位置：50%50%；
}
/*----stats.js----*/
.计算粒子数{
背景：#000022；
位置：绝对位置；
顶部：48px；
左：0；
宽度：80px；
颜色：#13E8E9；
字体大小：.8em；
文本对齐：左对齐；
文本缩进：4px；
线高：14px；
垫底：2件；
字体系列：Helvetica、Arial、无衬线字体；
字体大小：粗体；
}
.js计数粒子{
字体大小：1.1米；
}
#统计数据，
.计算粒子数{
-webkit用户选择：无；
边缘顶部：5px；
左边距：5px；
}
#统计数据{
边界半径：3px3px0；
溢出：隐藏；
}
.计算粒子数{
边界半径：0 0 3px 3px；
}

你好，谢谢！当我把给定的代码放在主题解析错误的函数php上时，我得到了这个错误：语法错误，意外的“add_action”（T_字符串），期望函数（T_函数）在第453行的/web/htdocs/www.babbasons.com/home/wp-content/themes/jupiter/functions.php中，我犯了什么错误？@akademia复制我的functions.php最新代码并检查你的花括号我无法让它工作。。。我把代码放在另一个函数之后。。。看起来是这样的/***添加巡更列表，然后包括主巡更类。***自5.9.6*/private function tour（）{//Add tour list.选择简短的一个单词id.添加过滤器（'mk_tour_list'，function（'tour_list）{$tour_list=array（'intro'=>array（'state'=>true，），）；返回$tour_list；}）；包含一次主题_ADMIN./tour/class mk tour.php'}/***添加粒子*/函数testtheme_脚本（{wp_队列_脚本（'Particles js'，wp_队列_脚本（'Particles js'，'（'jquery'），'20181224'，true）；}添加动作（'wp_队列_脚本，'testtheme_脚本'）；}@akademia删除最后一个}花括号