上下にふわふわ＋ランダム配置（math.random）

Question

###前提・実現したいこと
javascriptとCSSで

１、「幅960px」「高さ500px」のdivの中で文言を散らばして配置し、
２、その文言達が常に上下にふわふわと動いているコンテンツ

を作りたいです。
説明が難しいのですが…。
中身の文言が違う吹き出しみたいなのがいっぱいある感じです。
html4.01でIE9まで対応させたいです。

###発生している問題・エラーメッセージ
正直何から始めていいか分からず…。
jQueryのプラグインもいいのが見つからず途方に暮れています。
プラグインの掛け合わせでもいいので何かご教授いただけたら嬉しいです、、、
載せるコードもなくすみません。。。

###追記（2/16）
お二人様ご回答ありがとうございます。
なんとか文言たちを上下に動かすことができました。
あとはランダムに配置する部分なのですが、回答にあったmath.randomを使いたいのですが使い方がいまいち分からず。。。できれば要素が被らずに配置したいのですが、、、ご教授いただけると幸いです。
現在こんな感じです。

<ul class="wordList">
	<li>文言</li>
	<li>文言</li>
	<li>文言</li>
	<li>文言</li>
<!-- /.wordList--></ul>

.wordList {
	width: 960px;
	margin: 0 auto;
	background: #000000;
	position: relative;
}

.wordList li {
    margin: 0 auto;
    background: #000000;
    padding: 20px;
    text-align: center;
    color: #ffffff;
    position: absolute;
}

$(function () {
    setTimeout('rect()');
});

function rect() {
    $('.wordList li:nth-child(2n)').animate({
        marginTop: '-=10px'
    }, 800).animate({
        marginTop: '+=10px'
    }, 800);
    $('.wordList li:nth-child(3n)').animate({
        marginTop: '-=6px'
    }, 800).animate({
        marginTop: '+=6px'
    }, 800);
    setTimeout('rect()', 1600);
}

Answer 1

• ちらす部分の基本的なCSS設定（position:absoluteとか）
• ふわふわさせる部分のアニメーション設定（上下動でよければCSS AnimationやCSS Transition）で出来そうです）

1パターンだけだと統制が取れすぎるので、数パターン分設定を作ります。

• ランダム配置のJS設定（それぞれの吹き出しに対してCSSのleft, top値をランダムで設定する）

基本的にはこれらを1つ1つ片付けてゆけば出来ると思います。
プラグインはjQueryだけで充分かもしれません。

まずやるべきは、HTMLのコーディングと吹き出し部分のCSS設定ですね。

JSにおけるランダム値の作り方はこちらを参考にどうぞ。
min から max までの乱整数を返す関数を流用すれば、任意の幅のランダム値が作れるはずです。
Math.random()

ランダム配置のサンプルコードです。
幅960、高さ500の領域の中に収めるための座標の最小値と最大値についてですが、

top: 0〜500
left: 0〜960

となります。
なので、Math.randomのサンプルにある関数に対して、この範囲内の数値をランダムな数として出してくれるように引数を設定して実行すればいいです。

ここまでの処理では「被らないようにしたい」という点は満たしていません。
それについては、配置した後で「被っているかどうか」を判定し、「被っている場合はどうするか」という処理を追記する必要があります。

<div class="container">
  <ul class="wordList">
    <li>セリフサンプル1</li>
    <li>セリフサンプル2</li>
  </ul>
</div>

.container {
  margin: 0 auto;
  width: 960px;
  height: 500px;
  background: #CCC;
  position: relative;
}

.wordList > li {
    background: #000000;
    padding: 20px;
    text-align: center;
    color: #ffffff;
    position: absolute;
}

// 引数で渡した範囲内のランダムな整数を生成するための関数
var getRandomInt = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

// 要素の取得
var $container = $('.container'),
  $wordList = $('.wordList').find('li'),
  containerWidth = $container.width(),
  containerHeight = $container.height();

console.log(containerWidth, containerHeight) // 960, 500

// liそれぞれをランダムに配置
$.map($wordList, function(item, index) {
  var $item = $(item), // wordListのli要素が1番目から順に入ってきます
    topPos = getRandomInt(0, containerHeight), // 0〜500の間でtopの座標を取得
    leftPos = getRandomInt(0, containerWidth); // 0〜960の間でleft の座標を取得

  // 取得したランダム座標を設定
  $item.css({
    top: topPos,
    left: leftPos
  });
});

Comments

[PotatoHead]

ご回答ありがとうございます。
１つ１つ順序立てていったらなんとか前に進むことができました！ありがとうございます。あとはmath.randomを使うところなんですが…。もし可能であればmath.randomについてもう少しヒントいただけませんでしょうか…。よろしくお願いします。

[yamato_hikawa]

回答にサンプルを追記しました。
被っているかどうかの判定については、配置した後でそれぞれの要素のポジションを取得してみて、
それを元に上下左右の何処かが他の要素のポジションと被っていないかを判断する形になります。

Answer 2

jqFloatというプラグインはいかがでしょうか。
http://www.inwebson.com/demo/jqfloat/
上記サイトは英語ですが、「jqFloat」で検索していただければ日本語で解説しているページがいくつか見つかると思います。

Comments

[PotatoHead]

ご回答ありがとうございます。こんな便利なプラグインがあったのですね(T ^ T)今回は別のやり方でやらせてもらいますが、今後是非使ってみたいと思います！ありがとうございました。

Answer 3

こんにちは。

常に上下にふわふわと動いているコンテンツ

IEに対応ということなのでjQueryではいかがでしょうか。
理想のものと合っているかは分かりませんが、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
    setTimeout('rect()');
});
function rect() {
    $('#content p').animate({
        marginTop: '-=10px'
    }, 900).animate({
        marginTop: '+=10px'
    }, 900);
}
</script>
<style>
#content{
	width:960px;
	height:500px;
	position:relative;
}
#content p{
    background:#ffc4c4;
    width:100px;
    padding:20px;
    text-align:center;
    color:#fff;
	position:absolute;
}
</style>

<div id="content">
    <p style="top:20px; left:30px;">box1</p>
    <p style="top:50px; left:330px;">box2</p>
    <p style="top:20px; left:700px;">box3</p>
    <p style="top:350px; left:100px;">box4</p>
    <p style="top:250px; left:400px;">box5</p>
    <p style="top:300px; left:700px;">box6</p>
</div>

▲この場合全ての要素(p)が同じ動き・スピードですが、
動きをランダムにしたい場合は、変化をつけたい要素(p)にクラス名をつけて

    $('#content p').animate({
        marginTop: '-=10px'
    }, 900).animate({
        marginTop: '+=10px'
    }, 900);

この部分にクラス名で追加すれば、個別に変化をつけることが出来ます。

御参考ください。

Comments

[PotatoHead]

ご回答ありがとうございます！ちょうど同じような形で作っていたので大変参考になりました！ありがとうございます。