Shortcodes Ultimateプラグイン|アニメーション61種。文字が動くよ~♪ | 【暮らしの音】kurashi-*note

Shortcodes Ultimateプラグイン|アニメーション61種。文字が動くよ~♪

シェアボタンを押して情報を共有しましょう。

Sponsored Link

プラグインの「Shortcodes Ultimate」のアニメーションのリストです。

このブログもワードプレスを利用しており、時々文字で遊びたくなったときに使っております。(お気づきでしょうか??)

このアニメーション実に61種類あります。

今回はこの61種類、すべてどんなふうに動くのかリストを作ってみました。

(長いです、とても)

ゆっくりスクロールしてみていってくださいませ。

では、はじめまーす。

いってらっしゃーい!

Sponsored Link
Sponsored Link

「Shortcodes Ultimate」アニメーション全61種類すべて公開

ショートコードを挿入→アニメーション

「Shortcodes Ultimate」のインストールから有効化、その他の多彩な機能の使い方についてはここでは省略します。

詳しくはこちらの記事で
使い方を知りたい方はこちらの記事を参考にして下さい。
Shortcodes Ultimateの多彩な機能の使い方29選【WordPressプラグイン】
当ブログは、ワードプレスで無料テーマを利用しています。さまざまなプラグインを導入することによってブログがどんどんカスタマイズされていきます。...

この記事では、アニメーションにのみ焦点を絞りご紹介します。

見るときのコツは、一つ一つゆっくりとスクロールしていってください。ザーっとスクロールすると、同時に展開するため見づらいです。

また一度展開した文字はもう動かないので、もう一度確認する場合、いったん閉じて入りなおしてください。(面倒くさいですね…)

それでは始めます。

1.flash

【暮らしの音】kurashi-*note

2.bounce

【暮らしの音】kurashi-*note

3.shake

【暮らしの音】kurashi-*note

4.tada

【暮らしの音】kurashi-*note

5.swing

【暮らしの音】kurashi-*note

6.wobble

【暮らしの音】kurashi-*note

7.pulse

【暮らしの音】kurashi-*note

8.flip

【暮らしの音】kurashi-*note

9.flipInX

【暮らしの音】kurashi-*note

10.flipOutX

【暮らしの音】kurashi-*note

11.flipInY

【暮らしの音】kurashi-*note

12.flipOutY

【暮らしの音】kurashi-*note

13.fadeIn

【暮らしの音】kurashi-*note

14.fadeInUp

【暮らしの音】kurashi-*note

15.fadeInDown

【暮らしの音】kurashi-*note

16.fadeInLeft

【暮らしの音】kurashi-*note

17.fadeInRight

【暮らしの音】kurashi-*note

18.fadeInUpBig

【暮らしの音】kurashi-*note

19.fadeInDownBig

【暮らしの音】kurashi-*note

20.fadeInLeftBig

【暮らしの音】kurashi-*note

21.fadeInRightBig

【暮らしの音】kurashi-*note

22.fadeOut

【暮らしの音】kurashi-*note

23.fadeOutUp

【暮らしの音】kurashi-*note

24.fadeOutDown

【暮らしの音】kurashi-*note

25.fadeOutLeft

【暮らしの音】kurashi-*note

26.fadeOutRight

【暮らしの音】kurashi-*note

27.fadeOutUpBig

【暮らしの音】kurashi-*note

28.fadeOutDownBig

【暮らしの音】kurashi-*note

29.fadeOutLeftBig

【暮らしの音】kurashi-*note

30.fadeOutRightBig

【暮らしの音】kurashi-*note

31.slideInDown

【暮らしの音】kurashi-*note

32.slideInLeft

【暮らしの音】kurashi-*note

33.slideInRight

【暮らしの音】kurashi-*note

34.slideOutUp

【暮らしの音】kurashi-*note

35.slideOutLeft

【暮らしの音】kurashi-*note

36.slideOutRight

【暮らしの音】kurashi-*note

37.bouncein

【暮らしの音】kurashi-*note

38.bounceInDown

【暮らしの音】kurashi-*note

39.bounceInUp

【暮らしの音】kurashi-*note

40.bounceInLeft

【暮らしの音】kurashi-*note

41.bounceInRight

【暮らしの音】kurashi-*note

42.bounceOut

【暮らしの音】kurashi-*note

43.bounceOutDown

【暮らしの音】kurashi-*note

44.bounceOutUp

【暮らしの音】kurashi-*note

45.bounceOutLeft

【暮らしの音】kurashi-*note

46.bounceOutRight

【暮らしの音】kurashi-*note

47.rotateIn

【暮らしの音】kurashi-*note

48.rotateInUpLeft

【暮らしの音】kurashi-*note

49.rotateInDownRight

【暮らしの音】kurashi-*note

50.rotateInUpLeft

【暮らしの音】kurashi-*note

51.rotateInUpRight

【暮らしの音】kurashi-*note

52.rotateOut

【暮らしの音】kurashi-*note

53.rotateOutDownLeft

【暮らしの音】kurashi-*note

54.rotateOutDownRight

【暮らしの音】kurashi-*note

55.rotateOutUpLeft

【暮らしの音】kurashi-*note

56.rotateOutUpRight

【暮らしの音】kurashi-*note

57.lightSpeedIn

【暮らしの音】kurashi-*note

58.lightSpeedOut

【暮らしの音】kurashi-*note

59.hinge

【暮らしの音】kurashi-*note

60.rollIn

【暮らしの音】kurashi-*note

61.rollOut

【暮らしの音】kurashi-*note

お疲れさまでした~。いかがだったでしょうか?

では、設定のしかたです。

Shortcodes Ultimateアニメーションの使い方

プラグインをインストールして有効化します。

投稿画面をみると、「ショートコードを挿入」というボタンが追加されています。

ショートコードを挿入

ここをクリックします。

メニュー画面

「アニメーション」を選択します。

リスト

リストが表示されます。

アニメーションの窓枠の▼をクリックすると…

リスト

リストが出てきます。

ここから好みのタグを選択します。

ちなみにアニメーションの持続時間と遅延も自由に選択することができます。サンプルは、時続時間3秒、遅延0.5秒で設定しました。

設定画面

持続時間の検証

持続時間をみてみましょう。

「flip」でためしてみました。遅延は0.5で設定しています。

持続時間:1

持続時間1

持続時間:1.5

持続時間1.5

持続時間:2

持続時間2

持続時間:2.5

持続時間2.5

持続時間:3

持続時間3

持続時間:3.5

持続時間3.5

持続時間:4

持続時間4

持続時間:4.5

持続時間4.5

持続時間:5

持続時間5

持続時間:5.5

持続時間5.5

持続時間:7

持続時間7

持続時間:10

持続時間10

持続時間:15

持続時間15

持続時間:17

持続時間17

持続時間:20

持続時間20

いかがでしたか?最初は全部表示させようと思ったのですが、0、0.5、1、1.5、2、2.5…20まで実に40パターンあるので、最後のほうはさすがに端折りました。

イメージはつかめたかと思います。20秒は長すぎですね(笑)

私はいろいろやってみて、3秒に落ち着きました。

でも、スマホではまだ上を読んでいる最中に下にスクロールして出てきた文字が動いてしまい、読むころには静止している…という意味のない状態もままあります(汗)

遅延

遅延とは、最初に文字がでるまでの時間です。ここでは「shake」で持続時間「1」で設定しています。

遅延0.5

遅延0.5

遅延1

遅延1

遅延2

遅延2

遅延3

遅延3

遅延5

遅延5

遅延10

遅延10

遅延15

遅延15

遅延20

遅延20

遅延を検証しましたが、遅すぎると読む気が失せてしまいます。(個人の感想)

個人的には、「0.5」くらいがちょうどいいように思います。

(これはサンプル出す必要なかったかな…。きっとここを読んでいる最中でもまだ遅延20は表示されていない可能性大…。イライラさせてすみません。)

画像だって動く

クマ

こちらの画像、テキスト画面で見ると、

HTML

このようにHTMLのイメージタグを埋め込むだけ。

あらかじめ動かしたい画像を「メディアを追加」しておきましょう。

ショートコードを挿入⇒アニメーション

HTML

コンテンツに画像のタグを貼りつけます。

ここでは「swing」、持続時間:3、遅延:0.5に設定しました。

Check!

クマ

文字の大きさ

文字の大きさも変えれます。

文字の大きさ

文字を選択し、フォントサイズを好きな大きさに変える。

文字の大きさの変更

こんな感じ。

Check!

【28px】

【暮らしの音】kurashi-*note

【20px】

【暮らしの音】kurashi-*note

【14px】

【暮らしの音】kurashi-*note

どうですか?自由自在でしょう?長いお付き合い、ありがとうございました。

関連エントリーはこちら

人気ブログランキング

お役に立てたなら、ぽちっと応援クリックお願いします☆

人気ブログランキング
いつもありがとうございます!

Sponsored Link
Sponsored Link

シェアボタンを押して情報を共有しましょう。

RECOMMEND こちらの記事も人気です。



Sponsored Link
Sponsored Link
Sponsored Link
トップへ戻る