【SANGOカスタムブロック】アニメーションブロックの使い方

のじはた
のじはた

こんにちは、のじはた(@nojihata_com)です!

今回はSANGO Landで配布しているアニメーションブロックの使い方を解説していきます。

👆アニメーションブロックの中に入れたブロックはすべてアニメーションするようになります。アニメーション種類は全20種。
スピードや遅延、繰り返し、画面に入ってからアニメーションを開始するオプションも用意しています。

ブロックの使い方

ブロックをコピー

まずはSANGO Landにアクセスしてブロックをコピーしましょう。

右上のコピーボタンをクリック!

右上のコピーボタンからブロックをコピーします。

ブロックを貼り付け

使いたいページの編集画面で右クリックして貼り付け、もしくはCtrl + Vまたは⌘ + Vします。

ブロックを追加

+ボタンを押して好きなブロックを追加していきましょう。
アニメーション種類やスピードや遅延は右メニューから設定します。

設定項目の解説

のじはた
のじはた

ここからはブロックの設定項目を見ていきます。

アニメーション種類

全20種類のアニメーションを用意しています。

  • フェードイン(上下左右)
  • スライド(上下左右)
  • フリップ(上下)
  • フリップ(左右)
  • 回転(左右)
  • ふわふわ
  • 震える
  • ブラー(ぼかし)
  • ズームイン
  • 跳ねる
  • 点滅
のじはた
のじはた

ふわふわ~~~~~~

のじはた
のじはた

見えたりみえなかったり

このように選択肢から選ぶだけで簡単にアニメーションが利用できます

アニメーションスピード・遅延

アニメーションの動きの設定です、ブロックによって適切な速さは違うので適宜調節してください。

遅延はアニメーションを始めるのを遅らせる機能です。通常は0でOKです。

アニメーションを繰り返す

オンにするとアニメーションを永遠に繰り返すようになります。ふわふわや点滅などでオンにしておくのがおすすめです!

画面内に入ってからアニメーションを再生

通常であればアニメーションはページが読み込まれた段階で再生されてしまいます。ページの一番上えあれば問題ありませんが下のほうだとアニメーションがみられることはない….

そこでこのオプションをオンにすることでブロックが画面入ってきたときにアニメーションを再生することができます!

高度な設定要素を表示するしきい値

このオプションは画面内に入ってからアニメーションを再生をオンにしている場合のみ利用できます。

このオプションはどのくらいブロックが画面に入ってからアニメーションを再生開始するか指定できます。

例えば、50%に設定することでブロックの半分が見えたらアニメーションを再生する、なんてことができます!

よくわからない場合は0に設定しておくとよいです。

まとめ

今回はSANGO テーマで利用できるアニメーションブロックの使い方を解説しました。

アニメーションは多用せず強調したいところにつけるといい感じになります。ぜひ活用してください!

このブロックに関する質問・問題・要望はSANGO Landのコメント、もしくはTwitterまでどうぞ!

それではまた。

( 。•ᴗ• )੭⁾⁾

旧バージョン

なんらかの理由でSANGO3.0を利用できずアニメーションブロックが利用できない場合、以下旧バージョンコードをコピーしご利用ください。

ただしこのコードについて一切責任を負いません。

このコードはすでにアーカイブされており非推奨となります

HTML
<!-- wp:group {"layout":{"inherit":true},"css":".block-editor-block-list__block, .amt {\n    animation: var(\u002d\u002dsgb\u002d\u002dcustom\u002d\u002danimation-style);\n    animation-duration: calc(var(\u002d\u002dsgb\u002d\u002dcustom\u002d\u002danimation-speed) * 1s);\n    animation-delay: calc(var(\u002d\u002dsgb\u002d\u002dcustom\u002d\u002danimation-delay) * 1s);\n}\n\n@keyframes fadeInbottom {\n\t0% {\n\topacity: 0;\n\t-webkit-transform: translateY(-30px);\n    transform: translateY(-30px);\n}\n\t100% {\n\topacity: 1;\n}\n}\n\n@keyframes fadeInright {\n\t0% {\n\topacity: 0;\n\t-webkit-transform: translateX(30px);\n    transform: translatex(30px);\n}\n\t100% {\n\topacity: 1;\n}\n}\n\n@keyframes fadeInleft {\n0% {\n\topacity: 0;\n\t-webkit-transform: translateX(-30px);\n    transform: translateX(-30px);\n}\n\n100% {\n\topacity: 1;\n}\n}\n\n@keyframes zoomIn {\n  0% {\n\t  opacity: 0;\n\t  transform: scale(.9);\n  }\n  100% {\n\t  opacity: 1;\n\t  transform: scale(1);\n  }\n}\n\n@keyframes bounceAnim {\n0%, 40%, 60%, 80% {\n    transform: scale(1.0);\n  }\n  50%, 70% {\n    transform: scale(0.9);\n  }\n}\n\n@keyframes slideIntop {\n  0% {\n    transform: translateY(-50px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInbottom {\n  0% {\n    transform: translateY(50px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInleft {\n  0% {\n    transform: translateX(-50px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInright {\n  0% {\n    transform: translateX(50px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fliptop {\n  0% {\n\t  transform:rotate(0);\n\t}\n  100% { \n\t  transform:rotateX(360deg); }\n}\n\n@keyframes flipbottom {\n  0% {\n\t  transform:rotate(0);\n\t}\n  100% { \n\t transform:rotateX(-360deg); }\n}\n\n\n@keyframes flipright {\n  0% {\n\t  transform:rotate(0);\n\t}\n  100% { \n\t  transform:rotateY(360deg); }\n}\n\n@keyframes flipleft {\n  0% {\n\t  transform:rotate(0);\n\t}\n  100% { \n\t  transform:rotateY(-360deg); }\n}\n\n@keyframes blinkAnim {\n  0%,100% { \n\t  opacity: 1;\n\t}\n\t50% {\n\t  opacity: 0;\n\t}\n}\n\n@keyframes rotateAnimRight {\n\t0% {\n    transform: rotate(0);\n}\n\t100% {\n    transform: rotate(359deg);\n}\n}\n\n@keyframes rotateAnimLeft {\n\t0% {\n    transform: rotate(0);\n}\n\t100% {\n    transform: rotate(-359deg);\n}\n}\n\n@keyframes fuwafuwaAnim {\n\t0%,100% {\n    transform: translateY(0);\n}\n\t50% {\n    transform: translateY(-5px);\n}\n}\n\n@keyframes shivAnim {\n\t0%,100% {transform: translate(0px) rotateZ(0deg)}\n    25% {transform: translate(2px, 2px) rotateZ(1deg)}\n    50% {transform: translate(0px, 2px) rotateZ(0deg)}\n    75% {transform: translate(2px, 0px) rotateZ(-1deg)}\n\t}\n\n@keyframes blurAnim {\n  0% {\n\t  opacity: 0;\n\t  transform: scale(.92);\n\t  filter: blur(8px);\n  }\n  100% {\n\t  opacity: 1;\n\t  transform: scale(1);\n  }\n}\n\n\n:host.block-editor-block-list__layout:before {\n\tbackground: rgba(0,0,0,.1);\n    color: rgba(0,0,0,.4);\n    font-size: 10px;\n    line-height: 1.2;\n    padding: 3px 4px;\n    position: absolute;\n}\n\n\n\n.wp-block-group__inner-container {\n\tpadding: 30px 0;\n}\n\n:host.block-editor-block-list__layout::before {\ncontent: \u0022アニメーションブロック(旧版・非推奨)\u0022;\n    top: 0px;\n    left: 0px;\n\tbottom: unset;\n\tright: unset;\n}\n\n\n:host.block-editor-block-list__layout {\n\t border: 1px dashed rgba(0,0,0,.1);\n    border-left: 0;\n    border-right: 0;\n    padding: 30px 0;\n    position: relative;\n}","scopedCSS":"#id-d4be2c2e-e67e-42d3-91fd-30e417a3ecbc .block-editor-block-list__block,#id-d4be2c2e-e67e-42d3-91fd-30e417a3ecbc  .amt {\n    animation: var(\u002d\u002dsgb\u002d\u002dcustom\u002d\u002danimation-style);\n    animation-duration: calc(var(\u002d\u002dsgb\u002d\u002dcustom\u002d\u002danimation-speed) * 1s);\n    animation-delay: calc(var(\u002d\u002dsgb\u002d\u002dcustom\u002d\u002danimation-delay) * 1s);\n}\n\n@keyframes fadeInbottom {\n\t0% {\n\topacity: 0;\n\t-webkit-transform: translateY(-30px);\n    transform: translateY(-30px);\n}\n\t100% {\n\topacity: 1;\n}\n}\n\n@keyframes fadeInright {\n\t0% {\n\topacity: 0;\n\t-webkit-transform: translateX(30px);\n    transform: translatex(30px);\n}\n\t100% {\n\topacity: 1;\n}\n}\n\n@keyframes fadeInleft {\n0% {\n\topacity: 0;\n\t-webkit-transform: translateX(-30px);\n    transform: translateX(-30px);\n}\n\n100% {\n\topacity: 1;\n}\n}\n\n@keyframes zoomIn {\n  0% {\n\t  opacity: 0;\n\t  transform: scale(.9);\n  }\n  100% {\n\t  opacity: 1;\n\t  transform: scale(1);\n  }\n}\n\n@keyframes bounceAnim {\n0%, 40%, 60%, 80% {\n    transform: scale(1.0);\n  }\n  50%, 70% {\n    transform: scale(0.9);\n  }\n}\n\n@keyframes slideIntop {\n  0% {\n    transform: translateY(-50px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInbottom {\n  0% {\n    transform: translateY(50px);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideInleft {\n  0% {\n    transform: translateX(-50px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes slideInright {\n  0% {\n    transform: translateX(50px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes fliptop {\n  0% {\n\t  transform:rotate(0);\n\t}\n  100% { \n\t  transform:rotateX(360deg); }\n}\n\n@keyframes flipbottom {\n  0% {\n\t  transform:rotate(0);\n\t}\n  100% { \n\t transform:rotateX(-360deg); }\n}\n\n\n@keyframes flipright {\n  0% {\n\t  transform:rotate(0);\n\t}\n  100% { \n\t  transform:rotateY(360deg); }\n}\n\n@keyframes flipleft {\n  0% {\n\t  transform:rotate(0);\n\t}\n  100% { \n\t  transform:rotateY(-360deg); }\n}\n\n@keyframes blinkAnim {\n  0%,100% { \n\t  opacity: 1;\n\t}\n\t50% {\n\t  opacity: 0;\n\t}\n}\n\n@keyframes rotateAnimRight {\n\t0% {\n    transform: rotate(0);\n}\n\t100% {\n    transform: rotate(359deg);\n}\n}\n\n@keyframes rotateAnimLeft {\n\t0% {\n    transform: rotate(0);\n}\n\t100% {\n    transform: rotate(-359deg);\n}\n}\n\n@keyframes fuwafuwaAnim {\n\t0%,100% {\n    transform: translateY(0);\n}\n\t50% {\n    transform: translateY(-5px);\n}\n}\n\n@keyframes shivAnim {\n\t0%,100% {transform: translate(0px) rotateZ(0deg)}\n    25% {transform: translate(2px, 2px) rotateZ(1deg)}\n    50% {transform: translate(0px, 2px) rotateZ(0deg)}\n    75% {transform: translate(2px, 0px) rotateZ(-1deg)}\n\t}\n\n@keyframes blurAnim {\n  0% {\n\t  opacity: 0;\n\t  transform: scale(.92);\n\t  filter: blur(8px);\n  }\n  100% {\n\t  opacity: 1;\n\t  transform: scale(1);\n  }\n}\n\n\n#id-d4be2c2e-e67e-42d3-91fd-30e417a3ecbc.block-editor-block-list__layout:before {\n\tbackground: rgba(0,0,0,.1);\n    color: rgba(0,0,0,.4);\n    font-size: 10px;\n    line-height: 1.2;\n    padding: 3px 4px;\n    position: absolute;\n}\n\n\n\n#id-d4be2c2e-e67e-42d3-91fd-30e417a3ecbc .wp-block-group__inner-container {\n\tpadding: 30px 0;\n}\n\n#id-d4be2c2e-e67e-42d3-91fd-30e417a3ecbc.block-editor-block-list__layout::before {\ncontent: \u0022アニメーションブロック(旧版・非推奨)\u0022;\n    top: 0px;\n    left: 0px;\n\tbottom: unset;\n\tright: unset;\n}\n\n\n#id-d4be2c2e-e67e-42d3-91fd-30e417a3ecbc.block-editor-block-list__layout {\n\t border: 1px dashed rgba(0,0,0,.1);\n    border-left: 0;\n    border-right: 0;\n    padding: 30px 0;\n    position: relative;\n}","js":"const amt = block.querySelector('.wp-block-group');\n  if(controls.animationRepeat){\n      amt.style.animationIterationCount=\u0022infinite\u0022\n  } else {\n  }\n\nif(controls.animationDisplay ){\n\tconst options = {\n  threshold: [controls.customThreshold]\n\t}\n\t\t\nconst callback = function(entries, observer) {\n  entries.forEach(entry =\u003e { \n    if (entry.isIntersecting) {\n\t\tamt.classList.add('amt');\n        // observer.unobserve(entry.target);\n\t\t\n    } else {\n\t\tamt.classList.remove('amt');\n    }\n  })\n}\nconst io = new IntersectionObserver(callback, options);\nio.observe(amt);  \n}\n else {\n\t amt.classList.add('amt');\n  }","blockId":"id-d4be2c2e-e67e-42d3-91fd-30e417a3ecbc","customControls":[{"name":"アニメーション種類","variableName":"animationStyle","defaultValue":"","defaultType":"string","options":[{"label":"フェードイン(上から)","value":"fadeInbottom ease"},{"label":"フェードイン(下から)","value":"fadeIn ease"},{"label":"フェードイン(右から)","value":"fadeInright ease"},{"label":"フェードイン(左から)","value":"fadeInleft ease"},{"label":"スライド(上から)","value":"slideIntop ease"},{"label":"スライド(下から)","value":"slideInbottom ease"},{"label":"スライド(左から)","value":"slideInleft ease"},{"label":"スライド(右から)","value":"slideInright ease"},{"label":"フリップ(上)","value":"fliptop ease"},{"label":"フリップ(下)","value":"flipbottom ease"},{"label":"フリップ(右)","value":"flipright ease"},{"label":"フリップ(左)","value":"flipleft ease"},{"label":"回転(右)","value":"rotateAnimRight ease"},{"label":"回転(左)","value":"rotateAnimLeft ease"},{"label":"ふわふわ","value":"fuwafuwaAnim"},{"label":"震える","value":"shivAnim"},{"label":"ブラー(ぼかし)","value":"blurAnim ease"},{"label":"ズームイン","value":"zoomIn ease"},{"label":"跳ねる","value":"bounceAnim ease"},{"label":"点滅","value":"blinkAnim"}],"min":0,"max":0,"step":1,"variableType":"enum","value":"fadeInbottom ease","description":"アニメーションを選択します。","disableJS":true},{"name":"アニメーションスピード(s)","variableName":"animationSpeed","defaultValue":"","defaultType":"string","options":[],"min":0,"max":10,"step":0.1,"variableType":"number","value":0.8},{"name":"アニメーション遅延(s)","variableName":"animationDelay","defaultValue":"","defaultType":"string","options":[],"min":0,"max":10,"step":0.1,"variableType":"number","value":0},{"name":"詳細設定","variableName":"animationRepeat","defaultValue":"","defaultType":"string","options":[],"min":0,"max":0,"step":1,"variableType":"boolean","value":false,"description":"オンにすると無限にアニメーションを再生します。遅延を合わせて設定するのがおすすめです。","label":"アニメーションを繰り返す"},{"name":"詳細設定","variableName":"animationDisplay","defaultValue":"","defaultType":"string","options":[],"min":0,"max":0,"step":1,"variableType":"boolean","value":false,"description":"ブロックが画面に入るとアニメーションを再生します。","label":"画面内に入ってからアニメーションを再生"},{"name":"要素を表示するしきい値","variableName":"customThreshold","defaultValue":"","defaultType":"string","useTextarea":false,"useRadio":true,"useCheckbox":false,"options":[{"label":"0%(少しでも表示されてから)","value":"0"},{"label":"20%","value":"0.2"},{"label":"50%(半分表示されてから)","value":"0.5"},{"label":"80%","value":"0.8"},{"label":"100%(すべて表示されてから)","value":"1"}],"min":0,"max":0,"step":1,"label":"","description":"「画面内に入ってからアニメーションを再生」を有効化しているときに、どのくらいブロックが画面に入ってからアニメーションを再生開始するか指定します。\n0%がおすすめです。","variableType":"enum","disableJS":false,"disableCSS":true,"value":"0"}]} -->
<div class="wp-block-group"></div>
<!-- /wp:group -->

コメントを残す

コメント欄は記事内容の質問などにご活用ください。すべての質問にはお答えできませんので予めご了承ください。
テーマのリクエストや機能の質問はSANGOフォーラムに直接ご質問ください。