のじはた
こんにちは、のじはた(@nojihata_com)です！
今回はSANGO Landで配布しているアニメーションブロックの使い方を解説していきます。
?アニメーションブロックの中に入れたブロックはすべてアニメーションするようになります。アニメーション種類は全20種。
スピードや遅延、繰り返し、画面に入ってからアニメーションを開始するオプションも用意しています。
[広告]CSSの勉強におすすめ
ブロックの使い方
まずはSANGO Landにアクセスしてブロックをコピーしましょう。
右上のコピーボタンをクリック！
右上のコピーボタンからブロックをコピーします。
使いたいページの編集画面で右クリックして貼り付け、もしくはCtrl + Vまたは⌘ + Vします。
＋ボタンを押して好きなブロックを追加していきましょう。
アニメーション種類やスピードや遅延は右メニューから設定します。
設定項目の解説
のじはた
ここからはブロックの設定項目を見ていきます。
全20種類のアニメーションを用意しています。
- フェードイン(上下左右)
- スライド(上下左右)
- フリップ(上下)
- フリップ(左右)
- 回転(左右)
- ふわふわ
- 震える
- ブラー(ぼかし)
- ズームイン
- 跳ねる
- 点滅
のじはた
ふわふわ～～～～～～
のじはた
見えたりみえなかったり
このように選択肢から選ぶだけで簡単にアニメーションが利用できます。
アニメーションの動きの設定です、ブロックによって適切な速さは違うので適宜調節してください。
遅延はアニメーションを始めるのを遅らせる機能です。通常は0でOKです。
オンにするとアニメーションを永遠に繰り返すようになります。ふわふわや点滅などでオンにしておくのがおすすめです！
通常であればアニメーションはページが読み込まれた段階で再生されてしまいます。ページの一番上えあれば問題ありませんが下のほうだとアニメーションがみられることはない….
そこでこのオプションをオンにすることでブロックが画面入ってきたときにアニメーションを再生することができます！
高度な設定要素を表示するしきい値
このオプションは画面内に入ってからアニメーションを再生をオンにしている場合のみ利用できます。
このオプションはどのくらいブロックが画面に入ってからアニメーションを再生開始するか指定できます。
例えば、50%に設定することでブロックの半分が見えたらアニメーションを再生する、なんてことができます！
よくわからない場合は0に設定しておくとよいです。
[広告]CSSの勉強におすすめ
まとめ
今回は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 FUNはWordPressテーマSANGOの魅力、使い方やカスタマイズを解説するサイトです。
この記事がお役に立ちましたら、ぜひほかのSANGOユーザーさんにも広めて頂けるととてもうれしいです。
Twitterでの拡散やフォローをお待ちしています！
めっちゃおすすめ
