3分でできる魔法!【STORK】で画像を動かしてブログの注目度をUP!

ストーク 動き wow
おかぴー

こんにちは!
WEBデザイナーのおかぴー(@blueokap)です。

当ブログについての詳しい内容はこちらです。

 

今回はちょっとブレイクタイム記事です。
STORKのテーマで、画像に動きをつけて遊んでみました^^

その名も「wow.js」

 

おかぴー

・・・わぁお。

・・・いや、ふざけてないです。ほんとにwowという名前の機能なんです笑

 

今回の記事は、これをコンセプトにしています↓

  • テーマ・STORKを使っている
  • 画像の記事への貼り付け方がわかる
  • 難しいカスタマイズをせず簡単に画像を動かす

あなたのブログの記事にアクセントとして動きをつけてあげると、より注目度が高まると思いますよ!

 


動きの仕組み

さて、具体的に画像がどうしたら動くのか?ですが、

画像に動きを付けるための「CSSのクラス」を指定するだけで簡単に動きを表現できます。
(詳しい適用方法は最後にまとめてます^^)

まずは、なんの変哲もない僕の画像↑

例えば、これにバウンドさせるような動きができる、
「bounce」という「クラス」名をつけてあげると・・・

【画像をクリックしてね↓】

動きのコード名

bounce

ボヨ〜ン、ボヨヨ〜ン。

ははは!楽しーーーい!!(笑)

という感じで、画像をボヨヨーンさせられます。

さらに、アニメーションを無限に繰り返すことも(笑)↓

 

「ひぃ〜(汗)」

具体的にどうやるかは後半にまとめていますので、

まずはこの記事の見方をお話ししますね^^

 

 

この記事の見方

今回の記事では、STORKでデフォルトで適用できる動きを全てまとめました。

1つずつクリックして動きを楽しんでみてください^^

 

動かし担当の「wow.js」は、
基本的に画面をスクロールして対象の部分が現れた時点で動かします。

ですが、この記事ではあえてクリックして動くようにしています。

理由はこの2つ↓

・1つずつの動きを見やすくするため
・このページでは上下の動きが他の画像のジャマにならないようにするため

 

 

なので、実際ブログで使うときは画面をスクロールして画像が出てきた瞬間に動き出すイメージになります。

2018/11/21時点でSTORKでは、パソコン画面のみスクロール時に動き、スマートフォンでは動作しない仕様になっているそうです。

ただ、あくまでスクロール時に合わせて動かないだけで、読み込んだときに最初に表示される範囲(ファーストビュー)では動きます。

僕のトップページのボタンがふわっと出てくるのもその一つです。

 

パソコン画面のみではありますが、phpとかの難しそうなファイルもいじらず、

簡単に自分の好きな場所(今回は画像)に、「これでもか!」っていうくらい動きをつけることができます。

それでは、さっそく様々な動きを見ていきましょうー!

 

独特な動き

flash

pulse

rubberBand

shake

tada

wobble

jello

rollIn

rollOut

hinge

 

 

bounce系

結構動きが速いです(笑)

 

bounceIn

bounceOut

bounceInLeft

bounceInRight

bounceInDown

bounceInUp

bounceOutUp

bounceOutDown

bounceOutLeft

bounceOutRight

 

 

fade系

ゆるふわ、ふぇーどいん。

 

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUpBig

fadeOutUp

 

 

flip系

クルリンパ!!

 

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

 

 

rotate系

まわる〜、ま〜わる〜よ画像は〜まわる〜。

 

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOut

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

 

 

zoom系

立体的な動きがすごいです!

 

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutUp

zoomOutRight

zoomOutLeft

 

 

slideIn系

スライドいたしま〜す。

 

slideInDown

slideInUp

slideInRight

slideInLeft

slideOutDown

slideOutUp

slideOutRight

slideOutLeft

 

 

まとめ

いかがでしたでしょうか?
あなたのお好きな動きは見つかりましたか?

ここで、なぜSTORKのテーマで動かせるのかですが、

これは、テーマを購入したときにデフォルトで素晴らしい機能が2つも備わっているからなんです。

それは、

  • Javascriptの「wow.js」
  • CSSの「animate.css」

この2つが、簡単に動きを付けてくれる立役者だったわけです!

 

JavaScript

ワードプレスの様々な動きを担当するプログラミング言語。

CSS

ブログのデザイン(色やレイアウトなど)を担当するプログラミング言語。

最近はJavascriptのようにCSSだけでも動きを付けることができるものもあります。

 

つまり、元からこれらの機能があるので、後は動かしたい箇所に対象のコードをコピペして動かすだけ!

では、具体的に動きをつける方法をご紹介します!

 

 

やり方はこちら

①まず、STORKのテーマの管理画面から「外観>カスタマイズ>グローバル設定」の中にある、

【全体】アニメーション機能をONにします。

 

②次に、いつも通りお好きな画像を記事に貼り付けます。
貼り付けた画像をクリックして、えんぴつマーク(編集ボタン)から以下の画面に進みましょう。

下の方にある上級者向け設定を開くと、「画像CSSクラス」に入力欄があるので、以下のコードを書き込みます。

ソースコード

wow

この指定がないと動きがつきません。

ちなみに上の画像だと、

動きのコード名

bounce

というのが追加されているのがわかると思いますが、

「bounce」は、動きの種類の1つで、こんな感じで加えたい動きを指定します。

→動きを紹介した画像に対象のコード名を書いていますので、そちらをコピペしてください。

 

さらに、無限ループの魔法があります。

infinite

「infinite」を付けると、動きが無限ループ再生されます。

※それぞれ半角スペースで間を空けて書き込んでください。

 

 

動かすメリット

ここまで様々な動きを見ていただいたと思いますが、
「動き」にもメリット・デメリットが存在します。

まず、動きがあるメリットとして、
冒頭にも書いたように記事にアクセントを付けられるという点です。

ただ新聞や本を読むように一枚の記事があるより、
せっかくのブログなので、もっと読んでいる人に楽しんでもらえたらいいと個人的には思っています。

それを可能にするのがブログだと思うので。

 

 

動かすデメリット

もちろん、全ての画像が動いているといいかというと、
そういうわけではないです。

「ここだ!」と思って、見てほしい・注目してほしい部分だけに動きを付けるのが効果的だと思います。

至る所でビュンビュン画像が動きすぎてると、
どこを見ていいのかわからなくなるので、逆に記事から離脱する確率が増える可能性があります。

よく使われるのは、ボタンに動きを付けるとかでしょうか。

 

実際、僕の現場でも動きのあるLP(ランディングページ)というのを作ったのですが、あまり成約にはつながらず、

結局ボタンだけ少し動いているものをベースに現在ブラッシュアップしています。

もちろん、対象となるものやユーザーの人が求めるものによって動きが「あった方がいい・ない方がいい」と分かれます。

 

やはり個人的にオススメなのは、
動かすのは2〜3箇所くらいにして読んでくれる方が少しワクワクするくらいがちょうどいいと思います。

あなたのブログでも使ってみると、より注目が集まって面白いブログになるかもしれませんね^^

ブログ作り、何から始めたらいいか迷っている人へ

WordPressの設定、記事作り、収益化も・・・ブログと一言で言ってもやることいっぱい、どれから手をつけたらいいか分からない・・・

実は、デザインを整えるのも、ブログの方向性が決まってから進めるのがおすすめ!

一度自分のブログを俯瞰して(全体を上から見る)どんな方向性にすればいいかを見直す機会を作ることの重要性を解説。

同時に、あなたのブログ作りを加速させる「リサーチ」「ターゲット理解」「考える力」を鍛えよう!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください