JSFiddle - React, Tailwind, and code Playground
by secretgspot
HTML
<section>
<div id="p_content">
<p>
好き１好き１好き１好き１好き１好き１
</p>
<p>
嫌い２嫌い２嫌い２嫌い２嫌い２嫌い２
</p>
<p>
好き３好き３好き３好き３好き３好き３
</p>
<p>
嫌い４嫌い４嫌い４嫌い４嫌い４嫌い４
</p>
<p>
好き５好き５好き５好き５好き５好き５
</p>
<p>
嫌い６嫌い６嫌い６嫌い６嫌い６嫌い６
</p>
<p>
好き７好き７好き７好き７好き７好き７
</p>
<p>
嫌い８嫌い８嫌い８嫌い８嫌い８嫌い８
</p>
<p>
好き９好き９好き９好き９好き９好き９
</p>
<p>
嫌い１０嫌い１０嫌い１０嫌い１０嫌い１０嫌い１０
</p>
<p>
好き１１好き１１好き１１好き１１好き１１好き１１
</p>
<p>
嫌い１２嫌い１２嫌い１２嫌い１２嫌い１２嫌い１２
</p>
<p>
好き１３好き１３好き１３好き１３好き１３好き１３
</p>
<p>
嫌い１４嫌い１４嫌い１４嫌い１４嫌い１４嫌い１４
</p>
<p>
好き１５好き１５好き１５好き１５好き１５好き１５
</p>
<p>
嫌い１６嫌い１６嫌い１６嫌い１６嫌い１６嫌い１６
</p>
</div>
</section>
<div id="message">
</div>CSS
*{margin:0; padding:0;}
body { background-color: #DDDDDD; font: 10px sans-serif; }
#p_content{
/*とりあえずベースとなるDivを真ん中あたりに*/
position:absolute;
top:22em;
left:1em;
}
#p_content p {
/*これで回転の基準をきめる。この場合要素の一番上中央を基準にして回転させるから。*/
-moz-transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
/*回転動作の動きの時間をきめる 0.5秒で移動するということ*/
-webkit-transition:-webkit-transform 0.5s ease-out;
width:12em;
height:3em;
padding-right:10em;
position:absolute;
cursor: pointer;
}
/* ここで rotateを設定してもjavascriptで取得できない。
#p_content p:nth-child(1){
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
#p_content p:nth-child(2){
-webkit-transform: rotate(-22.5deg);
-moz-transform: rotate(-22.5deg);
}
#p_content p:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
}
#p_content p:nth-child(4) {
-webkit-transform: rotate(-67.5deg);
-moz-transform: rotate(-67.5deg);
}
#p_content p:nth-child(5) {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
#p_content p:nth-child(6) {
-webkit-transform: rotate(-112.5deg);
-moz-transform: rotate(-112.5deg);
}
#p_content p:nth-child(7) {
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
}
#p_content p:nth-child(8) {
-webkit-transform: rotate(-157.5deg);
-moz-transform: rotate(-157.5deg);
}
#p_content p:nth-child(9) {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
#p_content p:nth-child(10) {
-webkit-transform: rotate(-202.5deg);
-moz-transform: rotate(-202.5deg);
}
#p_content p:nth-child(11) {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
}
#p_content p:nth-child(12) {
-webkit-transform: rotate(-247.5deg);
-moz-transform:...JavaScript
// forked from chezsugi's "forked: マウスホイールで拡大縮小するように forked: 「お前、これであの娘にラブレター書けよ！」 ～要素を渦状に並べて無限ループ～" http://jsdo.it/chezsugi/p9nwT
// forked from ishimig's "マウスホイールで拡大縮小するように forked: 「お前、これであの娘にラブレター書けよ！」 ～要素を渦状に並べて無限ループ～" http://jsdo.it/ishimig/EndlessLoveText2
// forked from ishimig's "「お前、これであの娘にラブレター書けよ！」 ～要素を渦状に並べて無限ループ～" http://jsdo.it/ishimig/EndlessLoveText
// forked from ishimig's "文章を円形に並べて回転するホームページ" http://jsdo.it/ishimig/RollingThunder
//渦にする要素とその大きさの取得
var P=document.getElementById("p_content");
var PS=P.getElementsByTagName("p");
var P_SIZE=PS.length;
//クリックで回転させる
function PRotateUzu(delta){
//クリックした要素の角度を取得
// var r = event.target.style.webkitTransform;
// var this_deg = parseFloat(r.match( /rotate\((.*)deg/ )[1]);
//クリックした位置から、どれだけ移動させるか
// var deg_v = this_deg/(360/P_SIZE);
var deg_v=delta
var ps=P.getElementsByTagName("p");
var pslen=PS.length;
var tmp_Transform = new Array(pslen);
var tmp_opacity = new Array(pslen);
//入れ替えの為、 transformとopacityをとっておく。もっと効率よいアルゴリズムがある
for (var i= 0; i < pslen; i++) {
tmp_Transform[i]= ps[i].style.webkitTransform;
tmp_opacity[i]= ps[i].style.opacity;
//debug
//document.getElementById("message").innerHTML += i + ":" +ps[i].innerHTML + ":"+ tmp_opacity[i] +"<br>";
}
//それぞれの要素の角度を調節して、クリックした要素が左中央にくるように
for (i= 0; i < pslen; i++) {
//移動先の番号を取得する
tmp_v = i + deg_v;
//0以下になったり、pslenを超えたりしたら循環させる
if ((tmp_v < 0)){
tmp_v= pslen +tmp_v;
}else if(tmp_v >= pslen){
tmp_v= tmp_v - pslen ;
}
//移動
ps[i].style.webkitTransform = tmp_Transform[tmp_v];
ps[i].style.opacity = tmp_opacity[tmp_v];
}
}
function wheel(event){
var delta = 0;
delta = event.wheelDelta/120;
if (delta)
PRotateUzu(delta);
if (event.preventDefault) {
...