-
ID:PQrSrE さんの質問

文字列を1文字単位で指定要素内に散らばらせるようなjsのライブラリをご存知でしたら教えて下さい。
cssのtransform rotateなどで回転角を調整出来るとなお良いです。

イメージはこんなのです
http://draw.to/D2J1Azm

みんなの回答 2 件

ID:aDjBxy さんの回答

jQueryでテキストの文字を字ごとに配列に格納して、指定要素内にdivで配置してランダムに動かせばええんでないかな。
ID:V/dztY

いやいや、プログラム書けないから質問してるんじゃないの？
作り方説明しても解決しないでしょ。

ID:aDjBxy

ID:V/dztYgb8Q8P お前ちょっと残念だな・・・。いやさ、言ってることはお前の言うとおりなんだけどね。

ID:PQrSrE

なんかライブラリがあるようだったら利用しようと思って質問しました。
コメ主さんの処理手順で問題なく出来ると思います！
考えて頂いてありがとうございます。

ID:oP2HYu

いるいる。
自分の専門分野で質問されると、それだけで得意げになっちゃうコメ主みたいなプログラマ（笑）

ID:aDjBxy

＞ID:oP2HYuMD9lj.
公式ドキュメント見て、jqueryの関数組み合わせれば、
「cssのtransform rotate」これの使い方を知ってるぐらいの奴なら出来るでしょうよ。
このレベルで専門分野とか言っちゃうなんてお里が知れるんだが、大丈夫かお前・・・。

ID:aDjBxy

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字バラバラサンプル</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//
var top = 600;
var left = 600;
var rotate = 360;

//
var str = $("#text").val();
var arrayStr = Array.prototype.slice.call(Object.prototype.valueOf.call(str));
var posX = $(’#target’).position().left;
var posY = $(’#target’).position().top;
var len = arrayStr.length;
for(var i=0; i<len; i++){
$(’#target’).append(’<div id="txt’ + i + ’" class="txt">’ + arrayStr[i] + ’</div>’);

$(’#txt’+i)
.offset( { top : (Math.random()*top+posY), left : (Math.random()*left+posX) } )
.css(’transform’, ’rotate(’+ (Math.random()*rotate-180) +’deg)’);
}
})
</script>
<style type="text/css">
#target {
position:relative;
width:612px;
height:612px;
background:#f0f0f0;
border:1px solid #ccc;
}
.txt {
position:absolute;
font-size:12px;
}
</style>
</head>
<body>
<input type="text" value="あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん" id="text" />
<div id="target">

</div>
</body>

ID:aDjBxy

適当コードだけど、後は勝手になおしてくれ。

ID:PQrSrE

ぬおおお！
わざわざコードを書いて頂いてありがとうございます！！！
SplitTextでも良いかと思ったのですが、散らばり具合を与える引数によって再現できるようにしたくなったため、結局、独力で実装してしまいました！

> var arrayStr = Array.prototype.slice.call(Object.prototype.valueOf.call(str));

splitでやってしまいましたがこういう書き方があるんですね。勉強になります。

ID:aDjBxy

＞トピ主
独力で実装できたようで良かったです。
また、お力になれてよかったと思います。

ID:aDjBxy

> > var arrayStr = Array.prototype.slice.call(Object.prototype.valueOf.call(str));
> splitでやってしまいましたがこういう書き方があるんですね。勉強になります。

対応のブラウザによっては動かないのもあるので、splitのほうが良いかもですね。

ID:3hC1mP さんの回答

こういうのですかね。

http://www.netgfx.com/trunk/splitText/examples/examples.html
ID:PQrSrE

おお、すばらしい！
SCRAMBLEがイメージに近いですね
ありがとうございます

最終更新日:2013-10-31 (4,135 views)

関連するトピックス

ページ上部に戻る