{"id":4535,"date":"2024-01-24T09:22:20","date_gmt":"2024-01-24T00:22:20","guid":{"rendered":"https:\/\/dandelions.co.jp\/blog\/?p=4535"},"modified":"2024-01-24T09:22:20","modified_gmt":"2024-01-24T00:22:20","slug":"2024-01-24","status":"publish","type":"post","link":"https:\/\/dandelions.co.jp\/blog\/blog\/2024\/01\/24\/2024-01-24\/","title":{"rendered":"anime.js\u3092\u4f7f\u3063\u3066\u307f\u305f"},"content":{"rendered":"\n<p>\u6280\u8853\u8005\u30d6\u30ed\u30b0\u3068\u984c\u3057\u3066\u793e\u54e1\u304c\u65e5\u3054\u308d\u53d6\u308a\u7d44\u3093\u3067\u3044\u308b\u5b66\u7fd2\u5185\u5bb9\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<br>\u4eca\u56de\u306fWEB\u30c7\u30b6\u30a4\u30f3\u3092\u30c6\u30fc\u30de\u306b\u3057\u3066\u3044\u308b\u7b2c0\u30e6\u30cb\u30c3\u30c8\u3067\u3059\u3002<br>\u672c\u8a18\u4e8b\u3067\u306fanime.js\u3092\u4f7f\u3063\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u306e\u3067\u305d\u306e\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2>anime.js\u3068\u306f<\/h2>\n\n\n\n<p><a href=\"http:\/\/animejs.com\/\">anime.js<\/a>\u306f\u3001\u8efd\u91cf\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002<br>\u3061\u3087\u3063\u3068\u3057\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u7c21\u5358\u306b\u5c0e\u5165\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3057\u3001 \u5de5\u592b\u3059\u308c\u3070\u51dd\u3063\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3082\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002<br>\u307e\u305f\u3001\u516c\u5f0f\u30b5\u30a4\u30c8\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3084\u30b5\u30f3\u30d7\u30eb\u3082\u5145\u5b9f\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2>\u5c0e\u5165\u65b9\u6cd5<\/h2>\n\n\n\n<p>\u516c\u5f0f\u306eGitHub\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u304d\u305f\u300canime.min.js\u300d\u3092\u8aad\u307f\u8fbc\u307e\u305b\u308c\u3070\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br><br>\u516c\u5f0f\u30b5\u30a4\u30c8<br><a href=\"https:\/\/animejs.com\/\">https:\/\/animejs.com\/<\/a><br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"669\" src=\"https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-1-1024x669.png\" alt=\"\" class=\"wp-image-4537\" srcset=\"https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-1-1024x669.png 1024w, https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-1-300x196.png 300w, https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-1-768x501.png 768w, https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-1-1536x1003.png 1536w, https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-1.png 2040w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"665\" src=\"https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-2-1024x665.png\" alt=\"\" class=\"wp-image-4538\" srcset=\"https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-2-1024x665.png 1024w, https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-2-300x195.png 300w, https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-2-768x499.png 768w, https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-2-1536x998.png 1536w, https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/image-2.png 2039w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>anime.min.js\u306f\u89e3\u51cd\u3057\u305fZIP\u30d5\u30a1\u30a4\u30eb\u306elib\u30d5\u30a9\u30eb\u30c0\u306e\u4e2d\u306b\u5165\u3063\u3066\u3044\u307e\u3059\u3002<br>\u5165\u624b\u3057\u305fjs\u30d5\u30a1\u30a4\u30eb\u3092HTML\u306b\u8aad\u307f\u8fbc\u307e\u305b\u308c\u3070\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;head&gt;\n    <a href=\"http:\/\/js\/anime.min.js\">http:\/\/js\/anime.min.js<\/a>\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<p>\u307e\u305f\u3001npm\u3092\u4f7f\u7528\u3057\u3066\u3044\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u3063\u3066\u307f\u308b<\/h2>\n\n\n\n<p>\u4f7f\u7528\u3059\u308b\u6e96\u5099\u304c\u3067\u304d\u305f\u306e\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u3063\u3066\u307f\u307e\u3059\u3002<br>\u4eca\u56de\u306f\u516c\u5f0f\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u3082\u516c\u958b\u3055\u308c\u3066\u3044\u308b\u30b5\u30f3\u30d7\u30eb\u3092\u4f5c\u3063\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"502\" height=\"203\" src=\"https:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/Animation1.gif\" alt=\"\" class=\"wp-image-4540\"\/><\/figure>\n\n\n\n<p>\u4e0a\u8a18\u306fgif\u753b\u50cf\u306a\u306e\u3067\u591a\u5c11\u3061\u3089\u3064\u304d\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u3061\u3089\u3064\u304d\u306a\u304f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br>\u4e0b\u8a18\u306e\u30b3\u30fc\u30c9\u3067\u6bd4\u8f03\u7684\u7c21\u5358\u306b\u5b9f\u88c5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059<\/p>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"box\" id=\"elem\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p><strong>css<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.box {\n    background-color: blue;\n    width: 80px;\n    height: 80px;\n}<\/code><\/pre>\n\n\n\n<p><strong>JS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var cssSelector = anime({\n    targets: '#elem',\n    translateX: 250,\n    rotate: '2turn',\n    scale: 2,\n    easing: 'easeInOutQuart',\n    duration: 2000,\n    direction: 'normal',\n    loop: true\n});<\/code><\/pre>\n\n\n\n<p>\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u8aad\u307f\u8fbc\u307e\u308c\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u81ea\u52d5\u7684\u306b\u5b9f\u884c\u3055\u308c\u307e\u3059\u304c\u3001<br>\u30af\u30ea\u30c3\u30af\u5b9f\u884c\u6642\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" width=\"164\" height=\"62\" src=\"http:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2024\/01\/Animation2.gif\" alt=\"\" class=\"wp-image-4541\"\/><\/figure>\n\n\n\n<p><strong>html<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;button id=\"btn-like\" class=\"btn btn-like\"&gt;\n        &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"30\" height=\"30\" fill=\"currentColor\" class=\"bi bi-heart-fill like-icon pointer\"\n            viewBox=\"0 0 16 16\"&gt;\n            &lt;path fill-rule=\"evenodd\" d=\"M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314\" \/&gt;\n        &lt;\/svg&gt;\n    &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p><strong>css<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.btn-pink {\n    --bs-btn-color: pink;\n    --bs-btn-border-color: deeppink;\n    --bs-btn-hover-color: pink;\n    --bs-btn-hover-bg: pink;\n    --bs-btn-hover-border-color: deeppink;\n    --bs-btn-focus-shadow-rgb: 108, 117, 125;\n    --bs-btn-active-color: #fff;\n    --bs-btn-active-bg: pink;\n    --bs-btn-active-border-color: pink;\n    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\n    --bs-btn-disabled-color: pink;\n    --bs-btn-disabled-bg: transparent;\n    --bs-btn-disabled-border-color: pink;\n    --bs-gradient: none;\n}\n\n.btn-like {\n    --bs-btn-hover-color: pink;\n    --bs-btn-active-color: #fff;\n    color: deeppink;\n}<\/code><\/pre>\n\n\n\n<p><strong>JS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let likeBtnAni = anime({\n    \/\/ targets: '.btn-like',\n    targets: '.btn-like',\n    rotate: '2turn',\n    easing: 'easeInOutQuart',\n    direction: 'normal',\n    loop: false\n});\n\n\/\/\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u505c\u6b62\nlikeBtnAni.pause();\n\n\/\/\u30af\u30ea\u30c3\u30af\u6642\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\ndocument.querySelector('.btn-like').addEventListener('click', likeBtnAni.play);<\/code><\/pre>\n\n\n\n<p>\u4eca\u56de\u306fanime.js\u3092\u4f7f\u3063\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3057\u305f\u3002<br>\u6b21\u56de\u306e\u7b2c0\u30e6\u30cb\u30c3\u30c8\u306e\u6280\u8853\u8005\u30d6\u30ed\u30b0\u3082\u304a\u697d\u3057\u307f\u306b\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6280\u8853\u8005\u30d6\u30ed\u30b0\u3068\u984c\u3057\u3066\u793e\u54e1\u304c\u65e5\u3054\u308d\u53d6\u308a\u7d44\u3093\u3067\u3044\u308b\u5b66\u7fd2\u5185\u5bb9\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002\u4eca\u56de\u306fWEB\u30c7\u30b6\u30a4\u30f3\u3092\u30c6\u30fc\u30de\u306b\u3057\u3066\u3044\u308b\u7b2c0\u30e6\u30cb\u30c3\u30c8\u3067\u3059\u3002\u672c\u8a18\u4e8b\u3067\u306fanime.js\u3092\u4f7f\u3063\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u306e\u3067\u305d\u306e\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002  &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/dandelions.co.jp\/blog\/blog\/2024\/01\/24\/2024-01-24\/\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;anime.js\u3092\u4f7f\u3063\u3066\u307f\u305f&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[8],"tags":[37,38,39,18],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paR9rw-1b9","_links":{"self":[{"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4535"}],"collection":[{"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/comments?post=4535"}],"version-history":[{"count":5,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4535\/revisions"}],"predecessor-version":[{"id":4556,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts\/4535\/revisions\/4556"}],"wp:attachment":[{"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/media?parent=4535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/categories?post=4535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/tags?post=4535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}