jQueryで再帰ループを使って、プサンシステム(自称)を作ったよ!
スポンサードリンク
こんにちは、斜め上のアイディアを実現することに定評のある、瞬希です(挨拶)
なぜこういう挨拶かというと、さっき id:bulldra さんに
こういう記事で言及・紹介して頂いたからです!
上記記事、なんだかうちの場違い感が半端ない気もしましたが、面白いと言っていただけて非常に嬉しかったです。
そして、Web技術系のブログとして紹介していただいたからには、そういう記事書きたいなと思いました。
いくつかのアイデアの中から、パッと実現できそうで面白そうな全く意味のないものを作ってみました!
作り方
ソースは最後に貼ります。
上記のページを見ていただければわかると思いますが、ぐるぐる回っているだけのものです。
でも、ずっと止まりません。javascript(jQuery)で再帰をしたくて、作りました。
使っている技術は、スムーズなスクロールのアニメーションはまぁいいとして、あとはjQuery.Deferredだけですね。
ガッチリ理解したわけじゃないけど、なんとなく使えるんだなという感じになりました。
参考にした記事は、
こちら。
一応、いろいろ調べたりして軽く理解したつもりですが、今回のシステムではほぼコピペですね。
改変は.resolveに値を入れて引数を持たせたくらいです。
おわりに
javascriptで再帰の無限ループを作ろうとすると、sleep的なものを噛ませてもタイマーで呼ぶのを遅らせても、固まりました。
で、どうするかなという感じで調べてみて、こういうものが出来ました。
プサンシステムのプサンの由来、分かりますか? ヒントはこの動きですね。あとは止まらないこと。
ぜひ考えてみてくださいー。
という感じで今回はここまで。
あー、面白かった。おわり!
ソース
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>プサンシステム</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var wait_time = function(time, n){ return (function(){ var dfd = $.Deferred() setTimeout(function(){ console.log("resolve#wait_time("+time+") ");dfd.resolve(n + 1); }, time); return dfd.promise() }) } function pusan(n) { var speed = 1000; var x = 0, y = 0; if(n % 4 == 0 || n % 4 == 1) { y = $("html, body").height() - $(window).height(); } if(n % 4 == 1 || n % 4 == 2) { x = $("html, body").width() - $(window).width() } $("html, body").animate({scrollLeft: x, scrollTop: y}, speed, "swing"); var d = jQuery.Deferred(); d.then( $.get("./") ).then(wait_time(speed, n)).done( pusan )//再帰ループ d.resolve(); return d.promise(); } </script> <style type="text/css"> html { width: 200%; height: 200%; font-size: 200%; position: relative; } a { color: blue; text-decoration: none; } a:hover, a:active { color: orange; text-decoration: none; } p { width: 5em; height: 1em; display: block; font-size: 1000%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <a onClick="pusan(0);">スタート</a> <p> こんな感じ </p> </body> </html>