Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

初心者のための

スクロールすると文字や画像が動くようにしたい!

2018/12/08
 

 

 

 

 

他の人のブログを見ていたら、スクロールした時に蛍光マーカーが引かれるようなブログがあって、どうやってやるんだろうって思ってました。

 

一生懸命蛍光マーカーの引き方で探してみたけど見つからず・・・

 

別件でShortcodes Ultimateのことについて調べていたら、あっアニメーション使ってたんだって思いました。

 

Shortcodes Ultimate

 

Shortcodes Ultimateって以前に画像を横に並べたいなぁって記事でご紹介しました。

 

関連記事
 
 
その時にご紹介した機能以外使ったことないんですよね~・・・・
 
 
 
 
 
こんなにたくさんの機能があるんですね。
 
そして何ができるのか知らなかったりする・・・
 
いわゆる宝の持ち腐れってやつかも~・・・
 
 
色々調べて自分に合った使いやすいものがあれば、使おうかなって思って調べてて、アニメーションって機能を見つけました!
 
まだ試してみてないけど、スクロールすると蛍光マーカーが引かれたのってこの機能だと思うなぁ!
 
 

プラグインのインストール

 

Shortcodes Ultimateのインストールがまだだったらインストールして有効化しておいてくださいね!

 

私は既にインストールしてあるので、インストール方法はご紹介できないので、プラグインのインストール方法については、下記の記事を参考にしてくださいね。

 

プラグインの名前をShortcodes Ultimateに変えるだけで、インストール方法は同じですので!

 

関連記事
 
 
 

アニメーションを使ってみよう

 

では実際にアニメーションを使ってみましょう!

 

 

「ショートコード挿入」から「アニメーション」を選びます。

 

 

 

 

 

 

アニメーション

 

 

アニメーションの種類がたくさんあるみたいです。

とりあえず初期設定のままにしました。色々試して好みのものを選ぶと良いですね!

 

持続期間

 

 

アニメーションの持続期間が調節できます。長すぎても短すぎても面白くないので、ちょうどいい長さが良いんだけど、試行錯誤しないとですね。

1.5ぐらいがいいのかな?

 

遅延

 

 

スクロールされてからどのくらいで表示させるか調節できます。

あんまり遅いとスクロールされてしまって気が付かないので0.5ぐらいがいいのかな?

 

ショートコードの挿入

 

 

あとは「ショートコードを挿入」をクリックでショートコードが挿入されます。

 

 

「アニメーションコンテンツ」の部分に文字や画像を入れると動きますよ!

 

できあがり例

  ↓

 

 

あっ文字が動いた!

だけど、私が探していたのは、文字は動かず、マーカーが引かれるんだったんだけど・・

ちょっとだけ近づいたかも?

 

まとめ

 

アニメーションを効果的に使えると楽しいブログになりそうですね!

 

色々試してお好きなアニメーションを使ってみてくださいね!

 

 

 

 

 

 

 

 

 

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© ワードプレスお困りごと講座 , 2018 All Rights Reserved.