質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

867閲覧

html/css/jsでグルグルアニメーションの仕方について(ローディングじゃないよ!)

tama_yn0815

総合スコア143

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/07/05 05:39

編集2017/07/05 09:28

###前提・実現したいこと
HTML(css/js)でドット風に配置された要素(1010マス)を表示する際に、
ドラクエ1の敵モンスターが出現する時のエフェクトと"似た"事がしたい
ex:)
ドット風要素の集合体(10
10)の中心点から、外側に渦を巻きながら、
順番にアニメーションでフェードイン
下の図(1)で示した感じの要素であれば、
44 -> 45 -> 55 -> 54 -> 53 -> 43
の順番にアニメーションを起こす。
※外側から中心点に向けてでも可

・図(1)

列0列1列2列3列4列5列6列7列8列9
行000010203040506070809
行110212223242526272829
行220212223242526272829
行330313233343536373839
行440414243444546474849
行550515253545556575859
行660616263646566676869
行770717273747576777879
行880818283848586878889
行990919293949596979899

###発生している問題・エラーメッセージ
アニメーションは、起こせるので、アニメーション効果の詳細は、一時、割愛中
渦巻き(順)にアニメーションを実行する手段が知りたい。
00から99まで全ての要素が配列ライクになった要素は、取得可能

###該当のソースコード

html

1<style> 2.dqWrap{width:500px;height:500px;margin:0 auto;} 3span.dqDot{display:inline-block;width:50px;height:50px;background-color:#111; vertical-align:bottom;} 4</style> 5<div class="dqWrap"> 6<div id="dqModal"> 7<span class="dqDot" id="dqDot_001"></span><span class="dqDot" id="dqDot_002"></span><span class="dqDot" id="dqDot_003"></span><span class="dqDot" id="dqDot_004"></span><span class="dqDot" id="dqDot_005"></span><span class="dqDot" id="dqDot_006"></span><span class="dqDot" id="dqDot_007"></span><span class="dqDot" id="dqDot_008"></span><span class="dqDot" id="dqDot_009"></span><span class="dqDot" id="dqDot_010"></span><span class="dqDot" id="dqDot_011"></span><span class="dqDot" id="dqDot_012"></span><span class="dqDot" id="dqDot_013"></span><span class="dqDot" id="dqDot_014"></span><span class="dqDot" id="dqDot_015"></span><span class="dqDot" id="dqDot_016"></span><span class="dqDot" id="dqDot_017"></span><span class="dqDot" id="dqDot_018"></span><span class="dqDot" id="dqDot_019"></span><span class="dqDot" id="dqDot_020"></span><span class="dqDot" id="dqDot_021"></span><span class="dqDot" id="dqDot_022"></span><span class="dqDot" id="dqDot_023"></span><span class="dqDot" id="dqDot_024"></span><span class="dqDot" id="dqDot_025"></span><span class="dqDot" id="dqDot_026"></span><span class="dqDot" id="dqDot_027"></span><span class="dqDot" id="dqDot_028"></span><span class="dqDot" id="dqDot_029"></span><span class="dqDot" id="dqDot_030"></span><span class="dqDot" id="dqDot_031"></span><span class="dqDot" id="dqDot_032"></span><span class="dqDot" id="dqDot_033"></span><span class="dqDot" id="dqDot_034"></span><span class="dqDot" id="dqDot_035"></span><span class="dqDot" id="dqDot_036"></span><span class="dqDot" id="dqDot_037"></span><span class="dqDot" id="dqDot_038"></span><span class="dqDot" id="dqDot_039"></span><span class="dqDot" id="dqDot_040"></span><span class="dqDot" id="dqDot_041"></span><span class="dqDot" id="dqDot_042"></span><span class="dqDot" id="dqDot_043"></span><span class="dqDot" id="dqDot_044"></span><span class="dqDot" id="dqDot_045"></span><span class="dqDot" id="dqDot_046"></span><span class="dqDot" id="dqDot_047"></span><span class="dqDot" id="dqDot_048"></span><span class="dqDot" id="dqDot_049"></span><span class="dqDot" id="dqDot_050"></span><span class="dqDot" id="dqDot_051"></span><span class="dqDot" id="dqDot_052"></span><span class="dqDot" id="dqDot_053"></span><span class="dqDot" id="dqDot_054"></span><span class="dqDot" id="dqDot_055"></span><span class="dqDot" id="dqDot_056"></span><span class="dqDot" id="dqDot_057"></span><span class="dqDot" id="dqDot_058"></span><span class="dqDot" id="dqDot_059"></span><span class="dqDot" id="dqDot_060"></span><span class="dqDot" id="dqDot_061"></span><span class="dqDot" id="dqDot_062"></span><span class="dqDot" id="dqDot_063"></span><span class="dqDot" id="dqDot_064"></span><span class="dqDot" id="dqDot_065"></span><span class="dqDot" id="dqDot_066"></span><span class="dqDot" id="dqDot_067"></span><span class="dqDot" id="dqDot_068"></span><span class="dqDot" id="dqDot_069"></span><span class="dqDot" id="dqDot_070"></span><span class="dqDot" id="dqDot_071"></span><span class="dqDot" id="dqDot_072"></span><span class="dqDot" id="dqDot_073"></span><span class="dqDot" id="dqDot_074"></span><span class="dqDot" id="dqDot_075"></span><span class="dqDot" id="dqDot_076"></span><span class="dqDot" id="dqDot_077"></span><span class="dqDot" id="dqDot_078"></span><span class="dqDot" id="dqDot_079"></span><span class="dqDot" id="dqDot_080"></span><span class="dqDot" id="dqDot_081"></span><span class="dqDot" id="dqDot_082"></span><span class="dqDot" id="dqDot_083"></span><span class="dqDot" id="dqDot_084"></span><span class="dqDot" id="dqDot_085"></span><span class="dqDot" id="dqDot_086"></span><span class="dqDot" id="dqDot_087"></span><span class="dqDot" id="dqDot_088"></span><span class="dqDot" id="dqDot_089"></span><span class="dqDot" id="dqDot_090"></span><span class="dqDot" id="dqDot_091"></span><span class="dqDot" id="dqDot_092"></span><span class="dqDot" id="dqDot_093"></span><span class="dqDot" id="dqDot_094"></span><span class="dqDot" id="dqDot_095"></span><span class="dqDot" id="dqDot_096"></span><span class="dqDot" id="dqDot_097"></span><span class="dqDot" id="dqDot_098"></span><span class="dqDot" id="dqDot_099"></span><span class="dqDot" id="dqDot_100"></span> 8</div></div>

javascript

1function dqLikeAnimate(){ 2 this.options = { 3 speed: 1000, 4 delayTime: 20, 5 type: 'dq', 6 target: $() 7 }; 8} 9dqLikeAnimate.prototype = { 10 init: function(){ 11 return this; 12 }, 13 setup: function(options){ 14 this.options = $.extend(true, {}, this.options, options); 15 this.init(); 16 this.setupAnimetion(); 17 return this; 18 }, 19 setupAnimetion: function(){ 20 var _this = this; 21 this.options.target.each(function(i, e){ 22 var $this = $(this); 23 _this.animate($this, i).done(function(){ 24 _this.setupAfter(); 25 }).fail(function(){ 26 return; 27 }); 28 }); 29 }, 30 setupAfter: function(){ 31 this.options.target.css({ 32 opacity: 1 33 }); 34 return this; 35 }, 36 animate: function($target, index){ 37 var _this = this; 38 var $d = new $.Deferred; 39 $target.delay(index * this.options.delayTime).animate({ 40 opacity: 0 41 }, this.options.speed, 'swing', function(){ 42 if(_this.options.target.index($target) == (_this.options.target.length - 1)){ 43 $d.resolve(true); 44 }else{ 45 $d.reject(false); 46 } 47 }); 48 return $d.promise(); 49 } 50}; 51$(function(){ 52 var animated = new dqLikeAnimate(); 53 animated.setup({ 54 target: $('#dqModal').find('.dqDot') 55 }); 56});

###試したこと
上記ソースコード参照

###補足情報(言語/FW/ツール等のバージョンなど)
javascriptは、ライブラリとして、jQueryのみ利用可能です。
'#dqModal' -> こいつは、ドット要素の親
'.dqDot' -> こいつは、ドット要素

###動きのイメージ
https://jsfiddle.net/8sree1an/
↑作ってみました!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

think49

2017/07/05 05:47 編集

HTML/CSSも追記して下さい。記事上にあるコードだけで状況が再現できることを確認し、足りない情報があれば随時追記して下さい。複雑なコードであれば、https://jsfiddle.net/ にUPすると回答が得られやすいと思います。
tama_yn0815

2017/07/05 05:51

質問本文の方に追記致しました。
think49

2017/07/05 07:28

素朴な疑問ですが、table要素を使わない事に特別な理由はあるのでしょうか。table関連APIを利用すると簡単に実装できそうですが、全てを自前処理にするとややコードが複雑化します(勿論、できなくはありませんが)。
tama_yn0815

2017/07/05 07:43

不可ではないですが、実現したい現象(グルグル)を、htmlに依存しない形(要は、他所(別ページ))で動かせるモノを作ろうと思っております。
tama_yn0815

2017/07/05 07:46

今回で言えば、.setup()のメソッドの引数optonsに'10*10'の様な構造体を識別出来る文字を渡して、構造を動的に解決するjsにしたいと想定しています。
think49

2017/07/05 07:59

つまり、HTML上では「#dqDot_078,#dqDot_054,#dqDot_034,#dqDot_023,...(100個続く)」のように雑然と存在していても、dqLikeAnimate() に「#dqDot_001,#dqDot_002,#dqDot_003,#dqDot_004...,#dqDot_100」のように正しい順番を指定してやれば、表形式で描画されるようにしたい、という事でしょうか。 「HTML=構造」という既存の概念を覆す考え方ですね…。そういう設計方針なら、template要素を使うか、JSON等でJavaScript側にデータを持ってくる等、HTMLに構造となる要素を持ってこない方が素直な気はします。
tama_yn0815

2017/07/05 09:12

追記で動きのイメージを載せてみました。教えていただいとサイト恐縮っす!とても、便利^^;
tama_yn0815

2017/07/05 09:13

実現方法をjQueryの追加ライブラリ(swiper.jsとかとか)みたい使えるようにしたいって要望ですね...最悪は、想定していて、ページ単位でjsをゴリゴリ書くことも最後、視野に入れては居ます
think49

2017/07/05 10:30

マップチップを並べていく時に静的HTMLでゴリゴリ書かせるのが面倒くさくてやらせたくない、という事情はわかります。 ただ、JavaScriptで扱う上では最終的に構造化されたHTMLで出力させた方が便利なはずなんです。静的HTMLを書かせたくないのなら、マップチップとなる素材を用意させてJavaScriptで動的に構造化されたDOMを出力させても良いと思います。span要素を並べた状態から構造化されたDOMにJavaScriptで改変させても良いはずです。ようするに、初期状態がどうあれ、最終的にspan要素を並べた状態のままで管理させるメリットが少ない、と私は思っているのですが、いかがでしょうか。
guest

回答1

0

ベストアンサー

渦巻エフェクト

構造の問題はさておき、問題の渦巻エフェクトは次のコードで実現可能です。

HTML

1<style> 2.dq-display[role="table"] { 3 margin: 1em auto; 4 padding: 0; 5 display: table; 6 width: 500px; 7 border-collapse: collapse; 8 border-style: none; 9 border-spacing: 0; 10} 11 12.dq-display [role="row"] { 13 display: table-row; 14 margin: 0; 15 padding: 0; 16 border-style: none; 17 border-collapse: collapse; 18} 19 20.dq-display [role="gridcell"] { 21 display: table-cell; 22 margin: 0; 23 padding: 0; 24 width: 50px; 25 height: 50px; 26 border-style: none; 27 color: white; 28 background-color: #111; 29 vertical-align: bottom; 30 border-collapse: collapse; 31} 32</style> 33</head> 34<body> 35 36<div class="dq-display" role="table"> 37 <div role="row"> 38 <span role="gridcell" data-rowindex="0" data-cellindex="0">1A</span> 39 <span role="gridcell" data-rowindex="0" data-cellindex="1">1B</span> 40 <span role="gridcell" data-rowindex="0" data-cellindex="2">1C</span> 41 <span role="gridcell" data-rowindex="0" data-cellindex="3">1D</span> 42 <span role="gridcell" data-rowindex="0" data-cellindex="4">1E</span> 43 <span role="gridcell" data-rowindex="0" data-cellindex="5">1F</span> 44 <span role="gridcell" data-rowindex="0" data-cellindex="6">1G</span> 45 <span role="gridcell" data-rowindex="0" data-cellindex="7">1H</span> 46 <span role="gridcell" data-rowindex="0" data-cellindex="8">1I</span> 47 <span role="gridcell" data-rowindex="0" data-cellindex="9">1J</span> 48 </div> 49 <div role="row"> 50 <span role="gridcell">2A</span> 51 <span role="gridcell">2B</span> 52 <span role="gridcell">2C</span> 53 <span role="gridcell">2D</span> 54 <span role="gridcell">2E</span> 55 <span role="gridcell">2F</span> 56 <span role="gridcell">2G</span> 57 <span role="gridcell">2H</span> 58 <span role="gridcell">2I</span> 59 <span role="gridcell">2J</span> 60 </div> 61 <div role="row"> 62 <span role="gridcell">3A</span> 63 <span role="gridcell">3B</span> 64 <span role="gridcell">3C</span> 65 <span role="gridcell">3D</span> 66 <span role="gridcell">3E</span> 67 <span role="gridcell">3F</span> 68 <span role="gridcell">3G</span> 69 <span role="gridcell">3H</span> 70 <span role="gridcell">3I</span> 71 <span role="gridcell">3J</span> 72 </div> 73 <div role="row"> 74 <span role="gridcell">4A</span> 75 <span role="gridcell">4B</span> 76 <span role="gridcell">4C</span> 77 <span role="gridcell">4D</span> 78 <span role="gridcell">4E</span> 79 <span role="gridcell">4F</span> 80 <span role="gridcell">4G</span> 81 <span role="gridcell">4H</span> 82 <span role="gridcell">4I</span> 83 <span role="gridcell">4J</span> 84 </div> 85 <div role="row"> 86 <span role="gridcell">5A</span> 87 <span role="gridcell">5B</span> 88 <span role="gridcell">5C</span> 89 <span role="gridcell">5D</span> 90 <span role="gridcell">5E</span> 91 <span role="gridcell">5F</span> 92 <span role="gridcell">5G</span> 93 <span role="gridcell">5H</span> 94 <span role="gridcell">5I</span> 95 <span role="gridcell">5J</span> 96 </div> 97 <div role="row"> 98 <span role="gridcell">6A</span> 99 <span role="gridcell">6B</span> 100 <span role="gridcell">6C</span> 101 <span role="gridcell">6D</span> 102 <span role="gridcell">6E</span> 103 <span role="gridcell">6F</span> 104 <span role="gridcell">6G</span> 105 <span role="gridcell">6H</span> 106 <span role="gridcell">6I</span> 107 <span role="gridcell">6J</span> 108 </div> 109 <div role="row"> 110 <span role="gridcell">7A</span> 111 <span role="gridcell">7B</span> 112 <span role="gridcell">7C</span> 113 <span role="gridcell">7D</span> 114 <span role="gridcell">7E</span> 115 <span role="gridcell">7F</span> 116 <span role="gridcell">7G</span> 117 <span role="gridcell">7H</span> 118 <span role="gridcell">7I</span> 119 <span role="gridcell">7J</span> 120 </div> 121 <div role="row"> 122 <span role="gridcell">8A</span> 123 <span role="gridcell">8B</span> 124 <span role="gridcell">8C</span> 125 <span role="gridcell">8D</span> 126 <span role="gridcell">8E</span> 127 <span role="gridcell">8F</span> 128 <span role="gridcell">8G</span> 129 <span role="gridcell">8H</span> 130 <span role="gridcell">8I</span> 131 <span role="gridcell">8J</span> 132 </div> 133 <div role="row"> 134 <span role="gridcell">9A</span> 135 <span role="gridcell">9B</span> 136 <span role="gridcell">9C</span> 137 <span role="gridcell">9D</span> 138 <span role="gridcell">9E</span> 139 <span role="gridcell">9F</span> 140 <span role="gridcell">9G</span> 141 <span role="gridcell">9H</span> 142 <span role="gridcell">9I</span> 143 <span role="gridcell">9J</span> 144 </div> 145 <div role="row"> 146 <span role="gridcell">10A</span> 147 <span role="gridcell">10B</span> 148 <span role="gridcell">10C</span> 149 <span role="gridcell">10D</span> 150 <span role="gridcell">10E</span> 151 <span role="gridcell">10F</span> 152 <span role="gridcell">10G</span> 153 <span role="gridcell">10H</span> 154 <span role="gridcell">10I</span> 155 <span role="gridcell">10J</span> 156 </div> 157</div> 158 159<script> 160'use strict'; 161function getElementsSpiral (table) { 162 var rows = table.querySelectorAll('[role="row"]'), 163 elements = [], 164 rLen = rows.length, 165 rStart = 0, 166 cLen = rows[0].children.length, 167 cStart = 0; 168 169 for (var i = rStart, j = cStart, cells, row; i < rLen; ++i) { 170 cells = rows[i].children; 171 172 while (j < cLen) { // leftTop to right 173 elements.push(cells[j++]); 174 } 175 176 ++rStart; 177 --j; 178 179 while (++i < rLen) { // rightTop to bottom 180 elements.push(rows[i].children[j]); 181 } 182 183 --cLen; 184 row = rows[--i]; 185 186 while (j-- > cStart) { // rightBottom to left 187 elements.push(row.children[j]); 188 } 189 190 --rLen; 191 ++j; 192 193 while (i-- > rStart) { // leftBottom to up 194 elements.push(rows[i].children[j]); 195 } 196 197 ++cStart; 198 ++j; 199 } 200 201 return elements; 202} 203 204setTimeout(function handleTimeout (elements, i) { 205 elements[i++].firstChild.data = ''; 206 207 if (i < elements.length) { 208 setTimeout(handleTimeout, 50, elements, i); 209 } 210}, 50, getElementsSpiral(document.querySelector('.dq-display')), 0); 211 212 213var elements = getElementsSpiral(document.querySelector('.dq-display')).map(function (element) { return element.firstChild.data; }); 214console.log(JSON.stringify(elements)); // ["1A","1B","1C","1D","1E","1F","1G","1H","1I","1J","2J","3J","4J","5J","6J","7J","8J","9J","10J","10I","10H","10G","10F","10E","10D","10C","10B","10A","9A","8A","7A","6A","5A","4A","3A","2A","2B","2C","2D","2E","2F","2G","2H","2I","3I","4I","5I","6I","7I","8I","9I","9H","9G","9F","9E","9D","9C","9B","8B","7B","6B","5B","4B","3B","3C","3D","3E","3F","3G","3H","4H","5H","6H","7H","8H","8G","8F","8E","8D","8C","7C","6C","5C","4C","4D","4E","4F","4G","5G","6G","7G","7F","7E","7D","6D","5D","5E","5F","6F","6E"] 215console.log(elements.length); // 100 216</script>

渦巻エフェクト (マップ動的生成版)

※10000文字制限に接触した為、teratailにコードを投稿できず。jsfiddleを参考にどうぞ。

更新履歴

  • 2017/07/05 20:22 渦巻エフェクト (マップ動的生成版)のコード追加

Re: yuki_nishida さん

投稿2017/07/05 10:15

編集2017/07/05 11:27
think49

総合スコア18162

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tama_yn0815

2017/07/05 11:02

すごい、出来ている!
think49

2017/07/05 11:25

template要素を使っていますが、比較的質問文にある構造に近いHTMLのコード(マップを動的生成)も追記しておきました。
think49

2017/07/05 11:32

要件を改めて読みましたが、中心から外側に向けてでしたね。getElementsSpiral() の返り値を Array#reverce で反転させれば、そのようになります。 後は、起点と渦巻の向きがカスタマイズできれば完璧ですが、コードを読めば分かると思いますので、割愛します。
tama_yn0815

2017/07/06 00:49

こちら、記述いただいたロジックで、できそうでした! 細かい修正は、割愛中ですが、共通化して、使えるようにしたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問