要素をアニメーションさせるには２つの方法があります。

１つめはjQueryのアニメーション関数を使う方法で２つめはCSSのみで要素にアニメーションプロパティを指定する方法です。

どちらでもアニメーションができますが、できることが若干異なります。

ここではその違いも踏まえてこの２つの方法で要素をアニメーションさせる方法について解説します。

jQueryのみでアニメーション

まず１つめはjQueryだけで要素をアニメ表示する方法です。

要素に対してアニメーションをかける関数はいくつかありますが、ここではfadeIn関数を使います。構文は次の通りです。

fadeIn([ミリ秒], [コールバック関数])

１つめの引数にアニメーション時間(ミリ秒)、２つめにはアニメーション終了時に実行する関数を渡します。２つめに関しては省略可能です。

ではこれを使って要素をアニメ表示する例を紹介します。ここでは表示する要素とクリックすると要素を表示するボタンを次のように定義します。

<div id="image_box">
  <img src="./wordpress.png" />
</div>
<button id="fadein_btn">画像を表示</button>

表示する要素は画像要素が入った「image_box」というidが割り振られた要素です。

そしてボタンを押すと要素を表示するスクリプトは次の通りです。

jQuery("#fadein_btn").on("click", function(){
  jQuery("#image_box").fadeIn(1000);
});

これで要素が１秒間フェードインしながら表示されます。実際にどのように動作するかは下のボタンを押して確かめてください。

画像を表示画像を隠す

この方法を使う利点は要素に対してアニメーション関数を実行するだけなので簡単なことです。

ただ細かい操作をしようとすると複雑なコードを書かなければならないのでフェードアウトなどの単純な処理をするときはこの方法が役立つと思います。

CSS+jQueryでアニメーション

次はCSSとjQueryを組み合わせて要素をアニメ表示する方法を紹介します。

CSSで要素をアニメーションするには次のようなanimation関係のプロパティを要素に指定します。

• animation-name
  要素で実行したアニメーション名を渡す
• animation-duration
  アニメーション１回当たりの実行時間。「2s」のように秒単位(s)をつけた値を渡す
• animation-delay
  アニメーションの遅延時間。「2s」を指定すると２秒後にアニメーションが開始する
• animation-iteration-count
  アニメーションの繰り返し回数。「inifinite」を指定すると無限ループする

他にもanimation関係のプロパティはありますが、基本的にはこれらのプロパティがよく使われます。

そしてanimation-nameプロパティに渡すアニメーションは@keyframesという@規則内で定義されます。

例えば要素の幅が100pxから200pxまで変形するようなアニメーションをさせたい場合は次のように@keyframesでアニメーションを作れます。

@keyframes anime
{
  from{
    width: 100px;
  }
  to{
    width: 200px;
  }
}

fromブロックにアニメ開始時の要素のCSS、toブロックにアニメ終了時の要素のCSSを書きます。fromとtoの間には0%～100%の範囲でいくらでもブロックを作れます。

そして要素にこのアニメーションを適用するには次のようにanimation-nameプロパティに対してアニメ名を渡します。

.box{
  animation-name: anime;
  animation-duration: 3s;
}

ではこれを使って要素を表示する例を紹介します。

まず次のように表示する要素とクリックすると要素を表示するボタンを定義します。

<div id="image_box">
  <img src="./wordpress.png" />
</div>
<button id="fadein_btn">画像を表示</button>

上の例では画像要素の入ったdiv要素を表示するものとします。

そしてCSSで次のようなアニメーションを定義します。

@keyframes fadein
{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

透過度が0(透明)から1(完全不透明)に変化するようなアニメーションです。

そしてボタンがクリックされたときに要素を表示するために次のスクリプトを書きます。

jQuery("#fadein_btn").on("click", function(){
  jQuery("#image_box")
        .css("display","block")
        .css("animation-name", "fadein")
        .css("animation-duration", "3s");
});

このスクリプトではcss関数を使ってボタンクリック時にCSSプロパティを設定しています。つまりボタンクリック時に要素に次のCSSを適用するのと同じです。

animation-name: fadein;
animation-duration: 1s;
display: block;

これでjQueryでfadeIn関数を使った場合と同じように要素がフェードインしながら表示されます。実際にどう表示されるかは下のボタンを押して確かめてください。

画像を表示画像を隠す

この方法の利点はCSSが使えるので複雑なアニメーション効果をつけたい場合でも複雑なコードを書かなくて済むという事です。

例えば次のようなアニメーションを定義すれば要素をフェードイン＆回転しながら表示といった複雑なアニメ効果もつけることが可能です。

@keyframes fadein
{
  from{
    opacity: 0;
    transform: rotateX(180deg);
  }
  to{
    opacity: 1;
    transform: rotateX(360deg);
  }
}

transformプロパティにrotateX関数を渡すことでX軸方向に180度画像を回転させています。

実際にどう表示されるかは下のボタンをクリックしてください。

画像を表示画像を隠す

以上jQueryのみとCSSとjQueryを組み合わせて要素をアニメ表示する２つの方法について紹介しました。簡単なアニメ表示ならjQueryのみ、複雑なアニメ表示ならCSSも利用といった感じで使い分けるといいと思います。

The post CSSやjQueryで要素をアニメーションさせて表示する２つの方法 first appeared on Fukuro Press.

ボタンにホバー・クリックしたり、あるいは何か動作をしたときに回転やスライドなどアニメーションがついているサイトなどを見たことはありませんか？

個人サイトやブログではあまり見かけませんが、Webサービスなどではサイト内でそのような演出を見ることが多いです。

ああいう効果がさりげなくついているとユーザーにとっても楽しいサイトになりますよね。

ではどうやってあのような演出をしているかというと大抵はjQueryというjavascriptライブラリが使われています。しかも簡単な数行のコードで複雑なアニメーションを要素につけることができるのでとても便利です。

そこでここではjQueryを使った要素のアニメーション表示の方法と表示例をいくつか紹介します。

要素のアニメ表示のさせ方

まずアニメーション例を紹介する前に要素をどのようにアニメ表示させるのかを解説します。

ここでは解説例として要素を回転させながら表示させる例を紹介します。

まず次のように要素をクリックしたときにアニメ表示するボタンとアニメ表示される要素を用意します。

<button id="btn_show">要素をアニメ表示</button>

<div id="example"></div>

そして回転させながらアニメ表示させる要素に次のCSSを適用します。

#example{
  transition: transform 2s;
  transform: rotateY(360deg);
  display: none;
}

まず要素をアニメ表示させるので最初は「display: none」で要素を非表示にしています。

そして「transition: transform 2s」と指定することでtransformプロパティが変化したときに２秒かけてアニメーション変化させることができます。

またこの例では要素を回転表示させるのでtransformプロパティに「rotateY(360deg)」という回転関数を渡します。このプロパティには回転の他に移動・傾斜・拡大縮小などの関数を渡すことが可能です。

次にボタンを押されたときに要素をアニメ表示するスクリプトを書きます。

$(function(){
  $("#btn_show").on("click", function(){
    $("#example").fadeIn(1500);
    $("#example").css({
      "transform": "rotateY(0deg)"
    });
  });
}

まずfadeIn関数を呼び出すことで要素をフェードインさせながら表示します。

そしてアニメ表示に重要なのは要素のtransformプロパティを書き換えている次のスクリプトです。

$("#example").css({
  "transform": "rotateY(0deg)"
});

事前にtransitionプロパティを指定していたのでこのようにcss関数でtransformプロパティを書き換えるとその状態までアニメーションされるようになります。

実際にどのように動くかは次のコードと実行例を見てください。

See the Pen 要素表示(クルクル回転) by kaz1503 (@kaz1503) on CodePen.dark

いろいろなアニメ表示

要素のアニメーション効果をいくつか紹介します。要素のid名などは自分のサイトに合った適切なものに書き換えてください。

要素を拡大しながら表示

transformプロパティのscale関数を使うと要素を拡大・縮小させられるのでそれを使って要素を徐々にでかくしながら表示できます。

以下はそのコード&スクリプト例です。

HTMLコード

<button id="btn_scale">拡大しながら表示</button>
<div id="scale"></div>

CSSコード

#scale{
  transition: transform 1.5s;
  transform: scale(0);
  display: none;
}

スクリプト

$(function(){
  $("#btn_scale").on("click", function(){
    $("#scale").fadeIn(1500);
    $("#scale").css({
      "transform": "scale(1)"
    });
  });
});

実際にどのように動くか確かめるには以下のデモ内のボタンをクリックしてください。

See the Pen 要素アニメ表示(拡大) by kaz1503 (@kaz1503) on CodePen.dark

要素を左からスライド表示

jQueryにはslideDownという要素をスライドダウンする関数がありますが、transformプロパティのtranslate関数を使うと左からスライドさせて表示させることも可能です。

以下はそのコード＆スクリプト例です。

HTMLコード

<button id="btn_slideleft">左からスライド表示</button> <button id="btn_hide">隠す</button>

<div id="slideleft"></div>

CSSコード

#slideleft{
  transition: transform 1.5s;
  transform: translateX(-100%);
  display: none;
  
  width: 250px;
  height: 150px;
  margin: 12px;
  background-color: #58F;
}

スクリプト

$(function(){
  $("#btn_slideleft").on("click", function(){
    $("#slideleft").fadeIn(1500);
    $("#slideleft").css({
      "transform": "translateX(0)"
    });
  });
});

実際にどのように動くか確かめるには次のデモ内のボタンをクリックしてください。

See the Pen 要素アニメ表示(左からスライド) by kaz1503 (@kaz1503) on CodePen.dark

回転&拡大しながら要素表示

transformプロパティには複数の変形関数を渡せるので複数の効果をつけて回転させながら拡大表示といったことも可能です。

以下はそのコード＆スクリプト例です。

HTMLコード

<button id="btn_rotate_scale">左からスライド表示</button> <button id="btn_hide">隠す</button>

<div id="rotate_scale"></div>

CSSコード

#rotate_scale{
  transition: transform 1.5s;
  transform: rotateY(360deg) scale(0);
  display: none;
}

スクリプト

$(function(){
  $("#btn_rotate_scale").on("click", function(){
    $("#rotate_scale").fadeIn(1000);
    $("#rotate_scale").css({
      "transform": "rotateY(0deg) scale(1)"
    });
  });
});

実際の動作を確かめるには次のデモ内のボタンをクリックしてください。

See the Pen 要素アニメ表示(回転&拡大) by kaz1503 (@kaz1503) on CodePen.dark

以上jQueryで要素を変形させてアニメ表示させる方法について解説しました。複数の変形効果を組み合わせると面白いアニメーション効果が作れると思います。

The post 要素表示時に回転・拡大・スライドしてアニメ表示する方法とアニメーション例 first appeared on Fukuro Press.

jQueryはjavascriptコードを簡潔・簡単に扱えるようにしたjavascriptライブラリで、WordPressを始め多くのWebサイトで使われています。

jQueryを使った場合、要素の内容(テキストやHTML)や要素に適用されているCSSを簡単なスクリプトで書き換えすることが可能です。

ここではjQueryを使った要素内容の取得・書き換えの方法についてまとめて解説します。

jQueryの基本

jQueryではこのライブラリに属する関数を呼び出すのに$記号から始まる「$関数」を使います。

例えば空白を除去するtrim関数を呼び出すには次のように記述します。

$.trim(" JQUERY ");

$記号はjQueryという名前空間の代用なので「$」を「jQuery」に置き換えた次の書き方も可能です。

jQuery.trim(" JQUERY ");

この２つのどちらの書き方でも正しいです。

ただしWordPressの場合は「$」は使えず「jQuery」と略さず書く必要があるので注意してください。WordPressでjQueryでスクリプトが動かない場合は気を付けてください。

そして要素にアクセスするには次のように「$」または「jQuery」のカッコ内にCSSセレクタを書きます。

「box」というクラス名(class="box")の要素にアクセス

$(".box")

div要素の内で「box」というクラス名(class="box")の要素にアクセス

$("div.box")

「example」というID名(id="example")の要素にアクセス

$("#example")

このようにアクセスした要素に対して操作関数を呼び出すことで書き換えや内容の取得ができます。

要素内容の取得・書き換え方法

次の関数を要素に対して使用すると要素内容の取得や書き換えができます。

text関数

text関数で要素のHTMLタグを含まないテキストの取得・書き換えを行えます。

例えば次の要素があるとします。

<div id="example"><strong>jQuery</strong>でテキスト書き換え</div>

この要素のタグに含まれるテキストは「jQueryでテキスト書き換え」になります。strongタグなどのHTMLタグは含まれません。

この要素のテキストを取得するには要素に対してtext関数を実行するだけです。

var text = $("#example").text();

そしてテキストを設定したい場合はtext関数に書き換えたいテキストを渡してください。

$("#example").text("書き換えられたテキスト");

このように書くと要素の内容が「書き換えられたテキスト」で書き換えられます。

html関数

これはHTMLタグも含めた内容を取得・書き換えする関数です。

例えば次の要素があるとします。

<div id="example"><strong>jQuery</strong>でHTML書き換え</div>

この要素はブラウザでは次のように表示されます。

この要素でHTMLも含めた内容を取得するには要素に対してhtml関数を呼び出します。

var html = $("#example").html();

この場合html関数から返されるのは「<strong>jQuery</strong>でHTML書き換え」という文字列です。

また要素にHTMLをセットするには次のようにhtml関数にタグを含んだ文字列を渡します。

$("#example").html("書き換えられた<strong>HTML</strong>");

このように書くとタグは文字列でなくHTMLタグとして認識されて書き換えされるのでブラウザ上での表示は次のようになります。

css関数

css関数は要素のstyle属性や外部のCSSファイルにより適用されたCSSプロパティの取得や書き換えを行う関数です。

例えば次のような要素があるとします。

<div id="example" style="background-color: gray">jQueryでCSS書き換え</div>

style属性で背景色を灰色にしているのでブラウザ上では次のように表示されます。

この要素のbackgroundプロパティの値を取得するには要素に対して次のcss関数を呼び出します。

var bgcolor = $("#example").css("background-color");

この場合は「gray」という値が返ってきます。

次に要素にbackground-colorプロパティを書き換える場合は次のようにcss関数を呼び出します。

$("#example").css("background-color", "white");

このように書くのはCSSで「background-color: white;」と書くのと同じです。

また「"CSSプロパティ名": "値"」のペアを複数持つ連想配列をcss関数に渡すとまとめてスタイルを指定できます。例えば文字色と背景色を同時に換えたい場合は次のように書けます。

$("#example").css({ 
  "color": "red", 
  "background-color": "gray"
});

これは要素に対して「color: red; background-color: gray」というスタイルを適用するのと同じです。

まとめ

ここまでで紹介した要素の内容の取得・書き換えを行うのは次の３つの関数です。

• text関数
  要素のHTMLタグを含まないテキストの取得・書き換え
• html関数
  要素のHTMLタグを含めた内容の取得・書き換え
• css関数
  要素のCSSを取得・書き換え

以上jQeuryで要素の内容を取得・書き換えする方法について解説しました。実際はこれ単体で使うという事は少なくボタンクリックなどのイベントとともに使われることが多いです。

The post jQueryでの要素の内容やCSSの書き換え・取得方法まとめ first appeared on Fukuro Press.