さりげなくカッコイイ。全てBiNDのニュースBiNDの基礎BiNDの応用さりげなくカッコイイ。ブロックアニメーションの設定トップBiNDの使い方さりげなくカッコイイ。フクオカ情報は揃っているのに、デザインは完成したのに、何か足りない、、、そんなウェブサイトにも動きが加わることで、サイトをもっと見やすく、華やかにしてくれる。それが、ブロックアニメーション機能です。ブロックアニメーションの種類。ブロックアニメーションは11パターンの動きがあります。・ローテートイン回転しながら拡大して現れる・サイドイン両サイドのカラムが左右からフェードイン、2カラムの時は左右から、2カラム以上の場合は両サイド以外のカラムはフェードで現れます11種類のアニメーションサンプルを見るブロックアニメーションの設定方法。ブロックエディタの「設定」画面の左側で設定できます。4種類のブロックレイアウト時に使用可能です。スマホでは読みやすさを重視してアニメーション「なし」を選択するなどの設定ができます。PC表示時とスマホ表示時のどちらも初期設定は「なし」が選択されているので、違うデバイスでも同じ動きにしたい場合は双方とも設定をしてください。サイトの動きにルールを決め、メリハリをつける。ブロックごとに設定が可能なのでスクロールするたびに、右から上から下からと、どんどん動かすことができますが、ランダムに仕掛けると、サイト閲覧者を疲れさせてしまうことになります。フェード系のゆったりしたものとその他のアクティブな動きをするものの組み合わせがオススメです。動かさないブロックを途中に入れることで、動きが活きてくることもあります。フリップインなどは、カラムが多いところに使用するとパラパラとカードのように現れて綺麗な表現をすることができます。バウンスウィング・シェイク・フリップイン・ローテートインの4種はなかなか大きな動きになるので、目立たせたいところに絞ってアイキャッチとして使うと効果的です。動いてます!BiNDクラウドを使って製作されたようです。見やすく可愛らしいデザインに、動きが加わることでとてもリッチな印象のサイトに仕上げられています。本当に上手にBiNDクラウドを使いこなしていただいて嬉しい限りです。jackrise.jpを見る特に、ゴーストヘッダーに「サイドイン」のブロックアニメーションを組み合わせている部分がとても効果的だと思います。vol.20でも採用している技法です。ゴーストヘッダーについてはこちらのページ「固定ヘッダーの進化形。ゴーストヘッダーの演出ノウハウ。」にて解説しています。ついて詳しくはこちらサンプルデータ、配布します。先程ご紹介したブロックアニメーションのサンプルページを配布します。設定は動きを選ぶだけなので色々アレンジしたり組み合わせてみてください。サイトデータは下のダウンロードボタンからダウンロードできます。※BiND9もしくはBiNDクラウド、BiNDクライアントでお使い頂けます。続きを読む記事のポイント11種類のブロックアニメーションを組み合わせてウェブサイトにも動きをつけよう!設定方法は簡単。CAMPで最も読まれた記事は?コンセプト。