-2
ねえ、私はちょっとした問題がありました。私は自分の好きなサイトの基本的なHTMLとブートストラップを使ってfirefoxのカスタムホームページを作った。
私はp5ライブラリ（ビジュアルにはかなりかっこいい）に出くわしました。今は素晴らしいループアニメーションがあり、私は自分のホームページの背景として設定したいと思っています。私はいくつかのdiv技術といくつかのCSS操作を試してみましたが、成功しませんでした。助言がありますか？JSファイルをウェブサイトの背景にするにはどうすればよいですか？
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Purple Rain</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href='style.css'>
<script src="p5.js" type="text/javascript"></script>
<script src="p5.dom.js" type="text/javascript"></script>
<script src="p5.sound.js" type="text/javascript"></script>
<script src="terrain.js" type="text/javascript"></script>
</head>
<body>
<div class = "container-fluid">
<aside>
<article>
<ul><h3>Reddit</h3>
<redditbutton><a href="https://www.reddit.com">Reddit</a></redditbutton>
<redditbutton><a href="https://www.reddit.com/r/documentaries">Documentaries</a></redditbutton>
<redditbutton><a href="https://www.reddit.com/r/historyporn">History Porn</a></redditbutton>
<redditbutton><a href="https://www.reddit.com/r/learnprogramming">Learn Programming</a></redditbutton>
<redditbutton><a href="https://www.reddit.com/r/lofihiphop">lofihiphop</a></redditbutton>
<redditbutton><a href="https://www.reddit.com/r/unixporn">UnixPorn</a></redditbutton>
</ul>
</aside>
</ul>
</article>
</div>
</body>
</html>
[CSS]
body{
/*background-image: url("planet.gif");
background-repeat:no-repeat;
background-size:1440px;
animation-name: diagonal-slide;*/
}
redditbutton{
background-color: #e02c2c;
border-radius: 15px;
border: none;
color: white;
padding: 12px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 8px;
}
article{
background-repeat: no-repeat;
align-content: center;
}
ul {
font-family: monospace;
padding-left: none;
}
h3 {
font-family: monospace;
font-size: 12px;
}
a:link {
color: white;
background-color: transparent;
}
a:visited{
color:white;
}
aside{
padding-left: 0px;
}
[P5/JAVASCRIPT]
// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/IKB1hWWedMk
// Edited by SacrificeProductions
var cols, rows;
var scl = 20;
var w = 1400;
var h = 1000;
var flying = 0;
var terrain = [];
function setup() {
createCanvas(900, 500, WEBGL);
cols = w/scl;
rows = h/ scl;
for (var x = 0; x < cols; x++) {
terrain[x] = [];
for (var y = 0; y < rows; y++) {
terrain[x][y] = 0; //specify a default value for now
}
}
}
function draw() {
flying -= 0.1;
var yoff = flying;
for (var y = 0; y < rows; y++) {
var xoff = 0;
for (var x = 0; x < cols; x++) {
terrain[x][y] = map(noise(xoff, yoff), 0, 1, -100, 100);
xoff += 0.2;
}
yoff += 0.2;
}
background(0);
translate(0, 50);
rotateX(-PI/3);
fill(200,200,200, 150);
translate(-w/2, -h/2);
for (var y = 0; y < rows-1; y++) {
beginShape(TRIANGLE_STRIP);
for (var x = 0; x < cols; x++) {
vertex(x*scl, y*scl, terrain[x][y]);
vertex(x*scl, (y+1)*scl, terrain[x][y+1]);
}
endShape();
}
}
「私はいくつかの試みました」 - 言いやすいことは、コードを書くのではなく、コードを書くことです...少なくともあなたのスキルレベルのゲージを得ることができますあなたが間違っている可能性があります –
私はそれらを追加しましたアドバイスを持って –