bb-anime-02

BeaverBuilder(ビーバービルダー)で画像やテキストにアニメーションをつける方法

Contents
    Add a header to begin generating the table of contents

    皆さんこんにちは!BeaverBuilder歴3年以上の神崎と申します。

    この記事では

    「BeaverBuilder入れてみたから、アニメーションつけてみたい」
    「公式サイトのようにアニメーションつけてみたいけどどこにあるか分からない」
    「ページの画像にシュワ~と画像が出てくるアニメーションつけたい」

    そんな方に向けて、GIFアニメ画像を交えてご説明していきます。

    BeaverBuilderのアニメーション設定する方法

    BeaverBuilderは基本的に行でも各モジュールの要素でも簡単にアニメーション機能をつけることができます。

    例えば画像にアニメーションをつけたい場合

    BeaverBuilderのビルダーを開いた状態で
    アニメーションをつけたい画像をクリックします。

    するとこのように画像の各設定画面が出てきます。
    1番右端にある「詳細」をクリックします。

    すると下の方に「アニメーション」という項目が出てきます。
    このアニメーションを選択すると、各要素にアニメーションがつけられます。

    アニメーションの種類は数が多いため、以下に全てのアニメーションの名称と
    おすすめのアニメーションのモーションを3つGIFアニメつきでご紹介致します。

    BeaverBuilderにある7ジャンルのアニメーション

    大きく分けてアニメーションの種類は7種類あります。

    Fade(フェード)

    • フェードイン
    • Fade Left
    • Fade Right
    • Fade UP
    • Fade Down

    Slide(スライド)

    • 左にスライド
    • 右にスライド
    • 上にスライド
    • 下にスライド

    ZOOM(ズーム)

    • Zoom In
    • Zoom Left
    • Zoom Right
    • Zoom Up
    • Zoom Down

    Bounce(バウンス・跳ねる)

    • Bounce In
    • Bounce Left
    • Bounce Right
    • Bounce Up
    • Bounce Down

    Rotate(回転)

    • Rotate In
    • Rotate Down Left
    • Rotate Down Right
    • Rotate Up Left
    • Rotate Up Right

    Flip(フリップ・裏返し)

    • Flip Vertical(垂直)
    • Flip Horizontal(水平)

    Fancy(ファンシー)

    • Flash
    • Pulse(パルス・脈拍数)
    • Rubber band(ゴムバンド)
    • Shack
    • Swing
    • Tada
    • Wobble(揺れる)
    • Jello
    • Light Speed
    • Jack in the Box
    • Roll In

    とこれだけのアニメーションがあります。

    おすすめのアニメーション

    画像でよく見られるアニメーション「Fade UP」

    1カラムページなどでスクロールした際によく見られるアニメーションです。

    吹き出し文字や目立たせたいタイトルなどに「Bounce In」

    目立たせたい商品などに「Zoom In」

    特にFade UPなどのFadeはかなり多用しているサイトも多いため、ページにアニメーションを加えたい場合はおすすめのアニメーションになります、

    BeaverBuilderでのアニメーション設定はとても簡単

    見て頂いた通り、BeaverBuilderでのアニメーションをつけることはとても簡単です。
    今回は画像で解説しておりますが、行やテキストでも同じようにアニメーションをつけることが可能です。

    ぜひ色々なアニメーションをつけて、ページに動きを出してみてくださいね。
    シュワッと爽やかに成果を上げるラムネラボの神崎でした!

    この記事を書いた人

    全体を通して

    「爽やか・キレイ・やわらかい・優しい」

    デザインを多く手掛けてきております。お客様のこうしたい!を一緒に形にするお手伝いができればと思っております。

    何かお力になれるかもしれません。ぜひお気軽にお声がけくださいね。

    コメントを残す





    ビーバービルダー(BeaverBuilder)

    についての最新記事はこちら

    bb-button

    BeaverBuilder(ビーバービルダー)でお申込みボタンを作る方法 ボタンのチュートリアル

    Beaver-addon-01

    BeaverBuilderのおすすめアドオン2選 Ultimate Addons&Power Packの違いとは?

    bb-01

    BeaverBuilderとは?ビーバービルダー歴3年以上のWEBデザイナーが画像つきでお伝えします

    bb-sumaho-01

    たった2クリックでスマホページ編集できるBeaverBuilderの使い方

    bb-uabb

    BeaverBuilder(ビーバービルダー)のアドオンUltimate Addons(UABB)とは?

    Googleスライド

    についての最新記事はこちら

    ""

    Googleスライドをワードプレスの記事に埋め込み、スライドショー表示にする方法

    ""

    たった3ステップでGoogleスライドを画像保存しワードプレスの記事に挿入する方法

    slide-font

    Googleスライドのフォントの変更方法

    slide-back

    Googleスライドの背景色の変え方とすぐできる色選びのコツ

    slide-graf

    【Googleスライド】グラフの編集方法

    ラムネラボとは

    書いている人の紹介など

    神崎香奈恵のイラストです

    ラボブログへようこそ!ラムネのようにシュワッと爽やかな「デザイン」×「システム」×「コンサルティング」をあなたへお届けるサービスです。