{"id":1169,"date":"2014-09-20T11:07:02","date_gmt":"2014-09-20T02:07:02","guid":{"rendered":"http:\/\/www.dream-net.org\/blog\/?p=1169"},"modified":"2015-09-18T12:20:38","modified_gmt":"2015-09-18T03:20:38","slug":"%e3%80%90jquery%e3%80%91%e9%a3%9b%e3%81%b3%e5%87%ba%e3%81%97%e3%81%a6%e5%bc%be%e3%82%80%ef%bc%81%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%8c%e3%82%ad%e3%83%a5%e3%83%bc","status":"publish","type":"post","link":"https:\/\/dream-net.org\/blog\/?p=1169","title":{"rendered":"\u3010jQuery\u3011\u98db\u3073\u51fa\u3057\u3066\u5f3e\u3080\uff01\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u30ad\u30e5\u30fc\u30c8\u306a\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7Stackbox.js"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><ul><li><a href=\"#jQueryStackboxjs\"><span class=\"toc_number toc_depth_2\">0.1<\/span> \u3010jQuery\u3011\u98db\u3073\u51fa\u3057\u3066\u5f3e\u3080\uff01\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u30ad\u30e5\u30fc\u30c8\u306a\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7Stackbox.js<\/a><\/li><li><a href=\"#1\"><span class=\"toc_number toc_depth_2\">0.2<\/span> 1.\u30bd\u30fc\u30b9\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a><\/li><li><a href=\"#2animatecss\"><span class=\"toc_number toc_depth_2\">0.3<\/span> 2.animate.css\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a><\/li><li><a href=\"#3htmlcssjs\"><span class=\"toc_number toc_depth_2\">0.4<\/span> 3.html\u304b\u3089css\u3068js\u3092\u8aad\u307f\u8fbc\u3080<\/a><\/li><li><a href=\"#4HTML\"><span class=\"toc_number toc_depth_2\">0.5<\/span> 4.HTML\u3092\u8a18\u8ff0\u3059\u308b<\/a><\/li><li><a href=\"#i\"><span class=\"toc_number toc_depth_2\">0.6<\/span> \u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u8272\u3084\u5f62\u3092\u5909\u3048\u305f\u3044\uff01\u3068\u3044\u3046\u5834\u5408<\/a><\/li><\/ul><\/li><li><a href=\"#i-2\"><span class=\"toc_number toc_depth_1\">1<\/span> \u30d8\u30c3\u30c0\u30fc\u3092\u8ffd\u52a0<\/a><\/li><\/ul><\/div>\n<h2 style=\"color: #0083b9; background: #fffd73;\"><span id=\"jQueryStackboxjs\">\u3010jQuery\u3011\u98db\u3073\u51fa\u3057\u3066\u5f3e\u3080\uff01\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u30ad\u30e5\u30fc\u30c8\u306a\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7Stackbox.js<\/span><\/h2>\n<p>\u98db\u3073\u51fa\u3057\u305f\u308a\u3001\u3072\u3063\u304f\u308a\u8fd4\u3063\u305f\u308a\u3001\u3076\u3089\u4e0b\u304c\u3063\u305f\u308a\u3001\u591a\u5f69\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u697d\u3057\u307e\u305b\u3066\u304f\u308c\u308b\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u300cStackbox.js\u300d\u3002\u904a\u3073\u5fc3\u6e80\u8f09\u3067\u3001\u8efd\u3044\u52d5\u304d\u3092\u5165\u308c\u305f\u3044\u3068\u304d\u306b\u304a\u30b9\u30b9\u30e1\u3067\u3059\u3002<br \/>\n\u307e\u305a\u306f\u30c7\u30e2\u3092\u3054\u89a7\u4e0b\u3055\u3044\u3002<br \/>\nStackbox Animation Playground<br \/>\n\uff08<a href=\"http:\/\/stefan.codes\/stackbox\/anims\/\" target=\"_blank\">http:\/\/stefan.codes\/stackbox\/anims\/<\/a>\uff09<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/09\/015.jpg\" \/><\/p>\n<p>\u30aa\u30fc\u30d7\u30f3\u6642\u3068\u30af\u30ed\u30fc\u30ba\u6642\u3067\u5225\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<br \/>\n\u30b9\u30d4\u30fc\u30c9\u306e\u8abf\u7bc0\u3082\u53ef\u80fd\u3002<\/p>\n<p>YouTube\u306a\u3069\u306e\u52d5\u753b\u306b\u3082\u4f7f\u3048\u307e\u3059\u3002<br \/>\nStackbox &#8216;n&#8217; YouTube<br \/>\n\uff08<a href=\"http:\/\/stefan.codes\/stackbox\/youtube\/\" target=\"_blank\">http:\/\/stefan.codes\/stackbox\/youtube\/<\/a>\uff09<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/09\/025.jpg\" \/><\/p>\n<p>\u305d\u308c\u3067\u306f\u65e9\u901f\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<h2 style=\"color: #0083b9;\"><span id=\"1\">1.\u30bd\u30fc\u30b9\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/span><\/h2>\n<p>GitHub\u304b\u3089\u30bd\u30fc\u30b9\u4e00\u5f0f\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3059\u3002<br \/>\n\u300cStackbox\u300d<br \/>\n<a href=\"https:\/\/github.com\/stebru\/stackbox\" target=\"_blank\">https:\/\/github.com\/stebru\/stackbox<\/a><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/09\/034.jpg\" \/><\/p>\n<h2 style=\"color: #0083b9;\"><span id=\"2animatecss\">2.animate.css\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/span><\/h2>\n<p>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3001animate.css\u3067\u5b9f\u88c5\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3053\u308c\u304c\u306a\u304f\u3066\u3082\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306f\u8868\u793a\u3055\u308c\u307e\u3059\u304c\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u5834\u5408\u306f\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\nAnimate.css<br \/>\n\uff08<a href=\"http:\/\/daneden.github.io\/animate.css\/\" target=\"_blank\">http:\/\/daneden.github.io\/animate.css\/<\/a>\uff09<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/09\/044.jpg\" \/><br \/>\n\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u306e\u4e0b\u306b\u3042\u308b\u300c<a href=\"https:\/\/raw.github.com\/daneden\/animate.css\/master\/animate.css\" target=\"_blank\">Download  Animate.css<\/a> or <a href=\"http:\/\/github.com\/daneden\/animate.css\" target=\"_blank\">View on GitHub<\/a>\u300d\u3088\u308a\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2 style=\"color: #0083b9;\"><span id=\"3htmlcssjs\">3.html\u304b\u3089css\u3068js\u3092\u8aad\u307f\u8fbc\u3080<\/span><\/h2>\n<p>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305fzip\u30d5\u30a1\u30a4\u30eb\u3092\u89e3\u51cd\u3059\u308b\u3068\u3001<br \/>\n\u300cstackbox-master\u300d\u3068\u3044\u3046\u30d5\u30a9\u30eb\u30c0\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n\u305d\u306e\u4e2d\u306eplugin > src \u306e\u4e2d\u306bcss\u3068js\u30d5\u30a1\u30a4\u30eb\u304c\u5165\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>head\u5185\u306b\u3001jquery.stackbox.css\u3068animate.css\u3092\u3001<br \/>\nbody\u306e\u9589\u3058\u30bf\u30b0\u306e\u76f4\u524d\u3067jquery\u672c\u4f53\u3068jquery.stackbox.min.js\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<\/p>\n<p>\u4f8b\uff09<\/p>\n<pre>\r\n<xmp>\r\n<!doctype html>\r\n <html> \r\n<head> \r\n<meta charset=\"UTF-8\"> \r\n<title>Sample<\/title> \r\n<link rel=\"stylesheet\" href=\"css\/animate.css\">\r\n <link rel=\"stylesheet\" href=\"src\/jquery.stackbox.css\"> \r\n<\/head>  \r\n<body> \r\n<div id=\"container\">\r\n\u30b3\u30f3\u30c6\u30f3\u30c4\r\n\u30b3\u30f3\u30c6\u30f3\u30c4\r\n\u30b3\u30f3\u30c6\u30f3\u30c4\r\n<\/div>\r\n<script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"><\/script> \r\n<script src=\"..\/stackbox-master\/plugin\/dist\/jquery.stackbox.min.js\"><\/script>   \r\n<\/body>\r\n <\/html>\r\n<\/xmp>\r\n<\/pre>\n<h2 style=\"color: #0083b9;\"><span id=\"4HTML\">4.HTML\u3092\u8a18\u8ff0\u3059\u308b<\/span><\/h2>\n<p>\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u90e8\u5206\u306fdisplay:none\u3067\u96a0\u3057\u3001\u30c8\u30ea\u30ac\u30fc\u90e8\u5206\u306bdata\u5c5e\u6027\u3092\u7528\u3044\u3066\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u7a2e\u985e\u3084\u30b9\u30d4\u30fc\u30c9\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<br \/>\n\u4f8b\uff09<\/p>\n<pre>\r\n<xmp>\r\n<div id=\"element\" style=\"display: none;\"> \r\n<div class=\"stackbox-body\">\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u4e2d\u8eab<\/div>\r\n <\/div> \r\n<a href=\"#element\"     data-stackbox=\"true\"     data-stackbox-close-button=\"true\"     data-stackbox-position=\"bottom\"     data-stackbox-anim-open=\"zoomOutUp slow\">\r\n\u30c8\u30ea\u30ac\u30fc\uff08\u3053\u3053\u3092\u30af\u30ea\u30c3\u30af\uff09\r\n<\/a> \r\n<\/div> \r\n<\/xmp>\r\n<\/pre>\n<p>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u7a2e\u985e\u3092\u5909\u3048\u308b\u306b\u306f\u3001<br \/>\n\u30c8\u30ea\u30ac\u30fc\u306edata-stackbox-anim-open\u306e\u5024\u3092\u5909\u66f4\u3057\u307e\u3059\u3002<\/p>\n<p>\u4f8b\u3068\u3057\u3066\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30a8\u30d5\u30a7\u30af\u30c8\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\nbounceIn\u30fb\u30fb\u30fb\u306f\u306d\u308b<br \/>\nfadeIn\u30fb\u30fb\u30fb\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3<br \/>\nflip\u30fb\u30fb\u30fb\u3072\u3063\u304f\u308a\u8fd4\u308b<br \/>\nlightSpeedIn\u30fb\u30fb\u30fb\u3086\u304c\u3080<br \/>\nrotateIn\u30fb\u30fb\u30fb\u56de\u8ee2\u3059\u308b<br \/>\nwobble\u30fb\u30fb\u30fb\u9707\u3048\u308b<\/p>\n<p>\u3053\u306e\u4ed6\u306b\u3082\u305f\u304f\u3055\u3093\u306e\u30a8\u30d5\u30a7\u30af\u30c8\u304c\u3042\u308a\u307e\u3059\u306e\u3067\u3001\u30c7\u30e2\u3092\u53c2\u8003\u306b\u3001\u3044\u308d\u3044\u308d\u3068\u8a66\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<h2 style=\"color: #0083b9;\"><span id=\"i\">\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u8272\u3084\u5f62\u3092\u5909\u3048\u305f\u3044\uff01\u3068\u3044\u3046\u5834\u5408<\/span><\/h2>\n<p>\u30c7\u30b6\u30a4\u30f3\u306f\u3001css\u3067\u624b\u8efd\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002<br \/>\n\u3053\u308c\u3082\u30c7\u30e2\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u53c2\u8003\u306b\u3069\u3046\u305e\u3002<br \/>\nStyled Stackbox<br \/>\n<a href=\"http:\/\/stefan.codes\/stackbox\/styled\/\" target=\"_blank\">http:\/\/stefan.codes\/stackbox\/styled\/<\/a><br \/>\n<img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2014\/09\/054.jpg\" \/><\/p>\n<p>\u30c7\u30e2\u3092\u898b\u308b\u3068\u5206\u304b\u308a\u307e\u3059\u304c\u3001\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u90e8\u5206\u306b\u30d8\u30c3\u30c0\u30fc\u3084\u30d5\u30c3\u30bf\u30fc\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059<\/p>\n<p>\u4f8b\uff09<br \/>\n<strong>\u25c6css<\/strong><\/p>\n<pre>\r\n.stackboxes .stackbox {\r\nborder-top-left-radius: 20px;\r\nborder-bottom-right-radius: 20px;\r\n}\r\n.stackboxes .stackbox .stackbox-header {\r\nbackground-color: #6EB9FF;\r\nborder-top-left-radius: 18px;\r\n}\r\n.stackboxes .stackbox .stackbox-header h1 {\r\ncolor: #fff;\r\ntext-shadow: 2px 2px 3px rgba(0, 0, 0, 0.31);\r\nfont-size: 4em;\r\nmargin: 0px;\r\n}\r\n.stackboxes .stackbox .stackbox-footer {\r\nbackground-color: #6EB9FF;\r\nborder-bottom-right-radius: 18px;\r\ncolor: #fff;\r\ntext-align: left;\r\n}\r\n.stackboxes .stackbox-arrow.bottom:after {\r\nborder-bottom-color: #6EB9FF;\r\n}\r\n.stackboxes .stackbox-close {\r\nbackground-color: #6EB9FF;\r\n}\r\n.stackboxes .stackbox .stackbox-close .close {\r\ncolor: #fff;\r\nopacity: 1;\r\ntop: 0px;\r\nleft: -2px;\r\ntext-shadow: 2px 2px 3px rgba(0, 0, 0, 0.31);\r\n-webkit-transition: -webkit-transform .3s ease-out;\r\n          transition: transform .3s ease-out;\r\n}\r\n.stackboxes .stackbox .stackbox-close .close:hover {\r\ncolor: #E66060;\r\nopacity: 1;\r\n-webkit-transform: scale(2);\r\ntransform: scale(2);\r\n}\r\n<\/pre>\n<p><strong>\u25c6HTML<\/strong><\/p>\n<pre>\r\n<xmp>\r\n<div id=\"some-element\" style=\"display: none;\"> \r\n<div class=\"stackbox-header\"><h1><span id=\"i-2\">\u30d8\u30c3\u30c0\u30fc\u3092\u8ffd\u52a0<\/span><\/h1><\/div> \r\n<div class=\"stackbox-body\">Stackbox example with options<\/div> \t\r\n<div class=\"stackbox-footer\">\u30d5\u30c3\u30bf\u30fc\u3092\u8ffd\u52a0<\/div>\r\n<\/div> \r\n<\/xmp>\r\n<\/pre>\n<p>\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u90aa\u9b54\u306b\u306a\u308b\u3053\u3068\u3082\u306a\u304f\u3001\u6ce8\u76ee\u3092\u96c6\u3081\u308b\u306b\u306f\u3068\u3066\u3082\u3044\u3044\u65b9\u6cd5\u3002\u8272\u3005\u8a66\u3057\u3066\u597d\u307f\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u898b\u3064\u3051\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents0.1 \u3010jQuery\u3011\u98db\u3073\u51fa\u3057\u3066\u5f3e\u3080\uff01\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u30ad\u30e5\u30fc\u30c8\u306a\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7Stackbox.js0.2 1.\u30bd\u30fc\u30b9\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c90.3 2.animate.css\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c90.4 3.html\u304b\u3089 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1165,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,45],"tags":[],"class_list":["post-1169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-web"],"_links":{"self":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1169"}],"version-history":[{"count":11,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1169\/revisions"}],"predecessor-version":[{"id":1184,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1169\/revisions\/1184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/media\/1165"}],"wp:attachment":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}