javascriptで特定のclassだけに効果をつけたい。

javascriptで、雪を　『fall』とclassをつけたdiv要素だけに降らしたいのですが
うまくいきません。下記にあるjavascriptをどこかいじるだけでうまくできたりしますか？
どうか、よろしくお願いします。

HTML5
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5<title>Title</title>
6    <meta charset="UTF-8">
7    <meta name="description" content="">
8    <meta name="keywords" content="">
9    <script src=".js" type="text/javascript"></script>
10    <link href=".css" rel="stylesheet" type="text/css" media="screen,print">
11
12</head>
13<body style="background-color:#666666;">
14あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>あ<br>
15<div>
16<div style="width:200px; height:300px;"  class="fall">
17<script src='snowfall.min.js'></script>
18<script src="snowfall.jquery.min.js"></script>
19<script src="snowfall.setting.js"></script>
20</div>
21</div>
22
23
24</body>
25
26</html>

下記　snowfall.setting.js

javascript
1
2        //default options
3        snowFall.snow(document.body, {shadow : true, flakeCount:200, /*image : "images/flake.png", minSize: 10, maxSize:32*/}); //雪の量と画像の指定

追記　回答をいただいたコードで試してみましたが、
下記の画像のように上にずれて表示され
うまくdiv要素の中に納まってくれません。

javascript
1snowFall.snow(
2  document.querySelectorAll(".fall"),
3  {
4    shadow : true,
5    flakeCount:200
6    /*image : "images/flake.png",
7    minSize: 10,
8    maxSize:32*/
9  }); //雪の量と画像の指定

yoshinavi

2017/11/20 04:53

「.fall」のCSSはどのようになってますか？

penguin520

2017/11/20 04:58

外部にCSSはありません、style属性で　style="width:200px; height:300px;"　にしています。

penguin520

2017/11/20 05:19

ありがとうございます「.fall」にCSSをかけたら解決しました。

yoshinavi

2017/11/20 05:31

解決して何よりです。任意の位置にCSSで配置できると色々な表現が出来ると思いますので頑張ってください。

yoshinavi

2017/11/20 05:36

「解決済」にしておいてくださいね。

行動規範の内容に同意します

回答2件

ベストアンサー

snowFall.snow()関数の第1引数に対象要素を指定するみたいですね。

ここにHTMLCollectionを指定してもいいならば、試してませんけど下記コードでいけると思います。

javascript
1snowFall.snow(
2  document.querySelectorAll(".fall"),
3  {
4    shadow : true,
5    flakeCount:200
6    /*image : "images/flake.png",
7    minSize: 10,
8    maxSize:32*/
9  }); //雪の量と画像の指定

もし単体要素しか渡せない場合は、

javascript
1var falls = document.querySelectorAll(".fall");
2
3Array.prototype.forEach.call(falls,
4  function(fall){
5    snowFall.snow(
6      fall,
7      {
8        shadow : true,
9        flakeCount:200
10        /*image : "images/flake.png",
11        minSize: 10,
12        maxSize:32*/
13      });
14  });

で多分いけると思います。

投稿2017/11/20 04:13

namnium1125

総合スコア2043

penguin520

2017/11/20 04:37 編集

ありがとうございます、かなり良くなりました。しかし https://teratail.storage.googleapis.com/uploads/contributed_images/7a97e60c56973cfc21dcd0f5afcae6b7.png URLにあるように、ずれて表示されてしまい、うまくいきません。あともうちょっとでいけそうなのですが、ご指南いただけないでしょうか