JavaScriptのアニメーションをバックグラウンドに配置する最も簡単な方法は何ですか？

私はJSアニメーションを作成しています。このアニメーションをテキストと他のすべての要素の背後に配置したいと思います。JavaScriptのアニメーションをバックグラウンドに配置する最も簡単な方法は何ですか？

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta http-equiv="X-UA-Compatible" content="chrome=1"> 
 
    <link rel="stylesheet" href="http://hub.chemdoodle.com/cwc/latest/ChemDoodleWeb.css" type="text/css"> 
 
    <script type="text/javascript" src="http://hub.chemdoodle.com/cwc/latest/ChemDoodleWeb.js"></script> 
 
    <title>Molecules</title> 
 
</head> 
 
<body> 
 
<h1 style="font-size:300%; text-align: center; font-family: Menlo;">Molecules</h1> 
 
<script> 
 
    var w = window.innerWidth; 
 
    var h = window.innerHeight; 
 
    console.log('WIDTH', w, 'AND HEIGHT', h); 
 
    var rotate3D = new ChemDoodle.RotatorCanvas('rotate3D', w, h, true); 
 
    rotate3D.specs.atoms_useJMOLColors = true; 
 
    rotate3D.specs.atoms_circles_2D = true; 
 
    rotate3D.specs.bonds_symmetrical_2D = true; 
 
    var exampleMolFile = 'Molecule Name\n CHEMDOOD12250908183D 0 0.00000  0.00000  0\n[Insert Comment Here]\n 40 44 0 0 0 0 0 0 0 0 1 V2000\n -2.4201 -1.3169 0.4885 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.4007 -0.2197 0.6870 C 0 0 0 1 0 0 0 0 0 0 0 0\n -3.1630 -1.7585 0.5832 H 0 0 0 1 0 0 0 0 0 0 0 0\n -1.4920 -1.8472 0.1276 C 0 0 0 1 0 0 0 0 0 0 0 0\n -3.3129 0.2911 0.9878 O 0 0 0 1 0 0 0 0 0 0 0 0\n -1.4550 0.3261 0.5477 C 0 0 0 1 0 0 0 0 0 0 0 0\n -0.5339 -1.2844 -0.0016 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.5355 -2.6937 -0.0688 H 0 0 0 1 0 0 0 0 0 0 0 0\n -3.1138 1.0345 1.1162 H 0 0 0 1 0 0 0 0 0 0 0 0\n -0.5385 -0.2088 0.2615 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.3162 1.4114 0.6041 O 0 0 0 1 0 0 0 0 0 0 0 0\n 0.4574 -1.7528 -0.5024 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.3884 0.5420 0.1963 C 0 0 0 1 0 0 0 0 0 0 0 0\n -0.2569 1.5925 0.1057 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.6675 -2.4994 -0.0963 H 0 0 0 1 0 0 0 0 0 0 0 0\n 1.4380 -0.9689 -0.5556 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.2503 -1.9697 -1.3283 H 0 0 0 1 0 0 0 0 0 0 0 0\n 1.0495 0.4819 1.2355 C 0 0 0 1 0 0 0 0 0 0 0 0\n 1.0919 0.2175 -0.7577 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.1184 2.2301 0.5784 H 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3921 2.0169 -1.0582 C 0 0 0 1 0 0 0 0 0 0 0 0\n 1.9358 -1.2202 -1.2354 H 0 0 0 1 0 0 0 0 0 0 0 0\n 2.1438 -0.9618 0.4030 N 0 0 0 1 0 0 0 0 0 0 0 0\n 1.6007 -0.6068 1.3817 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5521 0.6440 1.9410 H 0 0 0 1 0 0 0 0 0 0 0 0\n 1.6648 1.1088 1.2152 H 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5456 0.4220 -1.8161 C 0 0 0 1 0 0 0 0 0 0 0 0\n 1.8191 0.7140 -0.7698 H 0 0 0 1 0 0 0 0 0 0 0 0\n -1.4411 2.4257 -1.2400 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.1380 1.2410 -1.9394 C 0 0 0 1 0 0 0 0 0 0 0 0\n 0.1565 2.6937 -1.1652 H 0 0 0 1 0 0 0 0 0 0 0 0\n 2.6986 -1.9758 0.5733 C 0 0 0 1 0 0 0 0 0 0 0 0\n 2.1879 -0.5234 2.0289 H 0 0 0 1 0 0 0 0 0 0 0 0\n 1.0187 -1.2041 1.6545 H 0 0 0 1 0 0 0 0 0 0 0 0\n 0.7435 -0.0833 -2.4955 H 0 0 0 1 0 0 0 0 0 0 0 0\n -1.9229 1.9705 -0.8287 H 0 0 0 1 0 0 0 0 0 0 0 0\n -0.4917 1.3949 -2.7191 H 0 0 0 1 0 0 0 0 0 0 0 0\n 3.1158 -2.2288 -0.1548 H 0 0 0 1 0 0 0 0 0 0 0 0\n 3.3129 -1.8835 1.1918 H 0 0 0 1 0 0 0 0 0 0 0 0\n 2.1618 -2.6206 0.8240 H 0 0 0 1 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0 0\n 1 3 1 0 0 0 0\n 1 4 1 0 0 0 0\n 2 5 1 0 0 0 0\n 2 6 1 0 0 0 0\n 7 4 2 0 0 0 0\n 4 8 1 0 0 0 0\n 5 9 1 0 0 0 0\n 6 10 2 0 0 0 0\n 6 11 1 0 0 0 0\n 10 7 1 0 0 0 0\n 7 12 1 0 0 0 0\n 10 13 1 0 0 0 0\n 14 11 1 0 0 0 0\n 12 15 1 0 0 0 0\n 16 12 1 0 0 0 0\n 12 17 1 0 0 0 0\n 13 18 1 0 0 0 0\n 13 14 1 0 0 0 0\n 13 19 1 0 0 0 0\n 14 20 1 0 0 0 0\n 21 14 1 0 0 0 0\n 16 22 1 0 0 0 0\n 19 16 1 0 0 0 0\n 16 23 1 0 0 0 0\n 18 24 1 0 0 0 0\n 18 25 1 0 0 0 0\n 18 26 1 0 0 0 0\n 19 27 1 0 0 0 0\n 19 28 1 0 0 0 0\n 21 29 1 0 0 0 0\n 30 21 1 0 0 0 0\n 21 31 1 0 0 0 0\n 23 32 1 0 0 0 0\n 23 24 1 0 0 0 0\n 24 33 1 0 0 0 0\n 24 34 1 0 0 0 0\n 27 35 1 0 0 0 0\n 27 30 2 0 0 0 0\n 29 36 1 0 0 0 0\n 30 37 1 0 0 0 0\n 32 38 1 0 0 0 0\n 32 39 1 0 0 0 0\n 32 40 1 0 0 0 0\nM END'; 
 
    var mol = ChemDoodle.readMOL(exampleMolFile); 
 
    rotate3D.loadMolecule(mol); 
 
    rotate3D.startAnimation(); 
 
</script> 
 
<p> 
 
Hydrogen bonding plays a significant role in many chemical and biological pro- cesses, including ligand binding and enzyme catalysis. Consideration of hydro- gen-bonding properties in drug design is important because of their strong influ- ence on specificity of binding, transport, adsorption, distribution, metabolization, and excretion properties of small molecules. Their ubiquity and flexibility make hydrogen bonds the most important physical interaction in systems of biomole- cules in aqueous solution. Because hydrogen atoms comprise approximately one- half of the atoms within biological macromolecules and two-thirds of the atoms of the solvating water, hydrogen atoms, or protons, are found between almost every pair of non-covalently bonded heavy atoms in a biological system. Since the basic necessary condition for a hydrogen bond being present is that a proton lies be- tween the electron clouds of two other atoms and modifies their interaction in a manner that is not explicable in terms of the van der Waals (dispersion-repulsion) effect, hydrogen bonds almost rival van der Waals interactions in number. 
 
</p> 
 

 
</body> 
 
</html>

今、私はこのテキストを所有していない

そして

を持っています。私は実験のためにそれを入れました。

私はトラッキングのためにフレームを保持します。スクリプトをヘッダー<h1>の下に表示せずに、その背後に同じレベルで表示させるには、x、yを0,0に設定する方法ややや似ている方法を見つけることができません。

どうすればこのスクリプトをバックグラウンドにすることができますか？

出典

2016-06-21 Anna-Lischen

：

のdiv内の要素をラップすることで、レイヤーのための位置とzインデックスを制御することができます。

マークアップ：

<div id="wrapper"> 
    <div id="content"> 
     // YOUR CONTENT 
    </div> 
    <div id="animation"> 
     // YOUR CANVAS SCRIPT 
    </div> 
</div>

CSS：

#wrapper { 
    position: relative; 
} 
#content { 
    position: relative; 
    z-index: 1; 
} 
#animation { 
    position: absolute; 
    top: 0; 
    z-index: 0; 
}

https://jsfiddle.net/mattBBP/m0Lo5v6w/

あなたは、あなたのコンテンツが遮断からそれを防ぐために、キャンバスのアニメーションの最小の高さを持っていることを確認したい場合があります：

#content { 
    ... 
    min-height: 400px; 
}

出典

2016-06-21 13:16:25 Bat

両方の答えが良いです。絶対的な位置とトリックは非常に簡単です。私はあなたの答えをより詳細に選ぶでしょう。どちらも良いですが。 –

このCSSをH1 - >position: aboslute; top: 0; left: 0;に追加してください。 javascriptの結果をいくつかのdivにバインドし、別の動作が必要な場合はスタイルを設定することができます。あなたが互いの上にそれらを配置するためにCSSを使用することができます

出典

2016-06-21 13:07:00

JavaScriptのアニメーションをバックグラウンドに配置する最も簡単な方法は何ですか？

答えて

関連する問題