jQueryはウェブブラウザ用のjavascriptを簡単に記述できるようにするために使われるライブラリで、要素の操作が数行のコードで書けるのでWeb開発には欠かせないものになっています。

そしてWordPressでもあらゆる箇所でjQueryが使われていますが、これを使ってオリジナルのスクリプトを書きたいと思った場合はいくつか注意点を守らないとスクリプト自体が動作しません。

そこでここではjQueryが動かないときに特にありがちで気をつけなくてはならない４つの注意点について紹介します。

jQueryが動かないときに確認すべきこと

WordPressでオリジナルのjQueryコードを書いたけど動かないというときはまず次の４つの点を確認した方がいいです。

• 編集画面に直接スクリプトを書いていないか
• 正しいタイミングで呼び出しているか
• 関数呼び出しに「$」記号を使っていないか
• 子テーマから呼び出す場合、スクリプトファイルを呼び出す処理をしているか

この４つの確認点と動かすための解決策を順に紹介していきます。

編集画面にスクリプトを書いていないか

ありがちなのは記事の編集画面のエディタ内に直接スクリプトを書いてしまうことです。

例えば次のように編集画面で「テキスト」タブを開いてテキストエディタ内にjQueryコードを書いたとします。

テキストエディタを開いたままの状態で記事を保存すればスクリプトは問題なく動きます。

しかしテキストエディタからビジュアルエディタを開き、そのあともう一度テキストエディタを開くと次のように自動補完が働いて余計なタグが挿入されるため正常に動かなくなります。

このようなミスを防ぐためには編集画面に直接書かず、個別記事内でスクリプトを記述できる「Script n Styles」というプラグインを導入するといいです。このプラグインの導入と使い方については次の記事で解説してあります。

個別ページにJavaScriptを埋め込めるWPプラグイン"Scripts n Styles"の紹介

WordPressでは個別ページにscriptタグを設置してその中にスクリプトを書くと各行にbrタグが挿入されてしまい、スクリプトが実行できません。そこでここでは各ページの編集画面でJavascriptの記述ができる「Scripts n Styles」というプラグインの導入・使い方を解説します。スクリプトだけでなくCSSなども記述できるのでとても役立ちます。

fukuro-press.com

2019-01-01 15:07

このプラグインを使えば編集画面にスクリプトの入力欄が現れ、そこに入力したスクリプトが記事内のheadタグの終わりかbodyタグの終わりの直前に埋め込まれます。

正しいタイミングで呼び出しているか

jQueryで要素の書き換えなどを行う場合は正しいタイミングで呼び出さなければ期待した動作になりません。

例えばある要素を書き換えたい場合、次のようにその要素の前に直接それを書き換えるようなスクリプトを書くとブラウザで要素が読み込まれる前に実行されてしまいます。

<script type="text/javascript">
jQuery('#example').html('jQueryで書き換え');
</script>

<div id="example">書き換えられる要素</div>

なので期待通りに動かしたいならスクリプトをbody要素の終了直前に書くか、次のように全てのHTML文章が全て読み込まれスクリプトからアクセスできるようになってから要素の操作を実行する必要があります。

<script type="text/javascript">
jQuery(function(){
  jQuery('#example').html('jQueryで書き換え');
});
</script>

<div id="example">書き換えられる要素</div>

このように書いておけばどこにスクリプトを書いたとしても要素の操作が問題なくできます。

関数呼び出しに$を使っていないか

jQueryでは関数を呼び出したり、要素にアクセスするのに次のように$記号が使われています。

$(function(){
  $('btn_alert').on('click', function(){
    alert('Button is clicked.');
  });
});

この$記号は「jQuery」を省略したものですが、WordPressの編集画面やテーマのスクリプトファイル内では$記号を使って省略することはできません。

次のように全て「jQuery」に置き換える必要があります。

jQuery(function(){
  jQuery('btn_alert').on('click', function(){
    alert('Button is clicked.');
  });
});

$記号で関数呼び出ししてしまうというのはWordPressでjQueryを使うときに特にありがちなミスなので動かないときは真っ先に$記号を使っていないか疑った方がいいと思います。

子テーマで呼び出す時ファイルが読み込まれているか

これは子テーマなどを作ってその中で独自のスクリプトファイルを作成した場合に確認しなくてはならないことです。

子テーマで独自のスクリプトを実行するために子テーマのフォルダ内にjavascriptファイルを作成してもそれをfunctions.phpで呼び出す処理をしなければ実行されません。

独自スクリプトを子テーマで読み込む方法については次の記事で解説してあります。

子テーマにjavascriptファイルを追加してスクリプトを呼び出す方法

WordPressでは子テーマフォルダにjavascriptファイルをただ置くだけではスクリプトを実行できません。そこで作成した子テーマ内で独自のjavascriptファイルを追加してスクリプトを呼び出す方法についてまとめました。

fukuro-press.com

2019-07-24 17:55

子テーマで独自の機能をスクリプトを使って実装したいという場合はスクリプトファイルを読み込むという処理を忘れないようにしましょう。

まとめ

ここではスクリプトの動かないときに確認したいポイントとして次の４つを紹介しました。

• 編集画面に直接スクリプトを書いていないか
• 正しいタイミングで呼び出しているか
• 関数呼び出しに「$」記号を使っていないか
• 子テーマから呼び出す場合、スクリプトファイルが呼び出す処理をしているか

構文エラーがないにも関わらずスクリプトが動かなくて困った時はまずこの４点を確認してなぜ動かないかの原因を探して修正してください。

以上、WordPressでjQueryが動かないときの４つの確認ポイントについてでした。

The post WordPressでjQueryが動かないときに確認したい４つのポイント first appeared on Fukuro Press.

同じページ内で特定の場所にジャンプさせたい場合はページ内リンクを使います。

通常ならリンク先に一瞬で移動しますが、jQueryを使うと下から上あるいは上から下にスムーススクロールしながらリンク先に移動させることも可能です。

ここではjQueryを使ってそのようなページ内リンクをスムーススクロールさせる方法を解説します。

ページ内リンクのやり方

まずページ内リンクの置き方ですがまずジャンプしたい要素のタグ内にid属性でidを割り振ります。

<p id="jump">ジャンプ先の要素</p>

上の例では「jump」というのがidです。

そして次のようにページ内リンクを設置するとそのリンクをクリックしたときにidが割り振られている要素にジャンプします。

<a href="#jump">ジャンプする</a>

idの前に#をつけることでページ内リンクだとブラウザに知らせることができます。

これがページ内リンクですが、ブラウザの標準機能だと一瞬でリンク先まで飛んでしまいます。それでも動きが無くて面白くないのでjQueryを使ってスムーススクロールを実装します。

スムーススクロールの実装

jQueryを使うと簡単にページ内リンクのスムーススクロールが実装できます。

次のコードが実装例です。

HTML文章

<a href="#1" onclick='_scrollTo("#1")'>#1にジャンプ</a><br/>
<a href="#2">#2にジャンプ</a><br/>
<a href="#3">#3にジャンプ</a><br/>

<br><br>
<br><br>
<br><br>

<p id="1">ジャンプ先1</p>
<br><br>
<br><br>
<p id="2">ジャンプ先2</p>
<br><br>
<br><br>
<p id="3">ジャンプ先3</p>

Javascriptコード

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 1000;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    $("html, body").animate(
        {scrollTop: target.offset().top}, speed, "swing");
    return false;
  });
});

このコードではページ内リンクしている全てのリンクがクリックされたときにスクロールするように設定しています。

スクリプト内の「speed」にはスクロールするミリ秒を渡し100を渡すと0.1秒、1000を渡すと1秒でスクロールします。この値が大きければ大きいほどゆっくりとしたスクロールになります。

ブラウザ上では次のような動作になります。

See the Pen yKyzVZ by kaz1503 (@kaz1503) on CodePen.dark

WordPressでスムーススクロールを使うには...

WordPressでページ内リンクのスクロール処理を実装しようとした場合、直接個別のページにスクリプトを書くより関数化したほうが手間が省けます。

そこでプラグインを使ってスクロール処理を関数化します。

必要なプラグインは「Simple Custom CSS and JS」というプラグインです。まず「プラグイン」－＞「新規追加」と進みプラグイン名で検索すると次のように検索結果に表示されます。

以下のURLからダウンロードして使うこともできます。

https://ja.wordpress.org/plugins/custom-css-js/

インストールして有効化するとメニューにプラグインの項目が追加されるので、「Custom CSS & JS」ー＞「Add Custom JS」と進むと次のようなスクリプト入力画面が出てきます。

スクリプトのタイトルを入力したら、その下にあるスクリプト記入欄に次のようなコードをスクリプトの最後に追加してください。

function _scrollTo(href, speed)
{
  var target = jQuery(href == "#" || href == "" ? 'html' : href);
  jQuery("html, body").animate(
    {scrollTop: target.offset().top}, speed, "swing");
  return false;
}

_scrollToという関数を定義しました。ただしWordPressでは「jQuery」の省略記号として$記号は使えないので注意してください。

これを書いてオプションを何も変更せず「公開」を押すと全てのページのヘッダー部分にこのスクリプトが挿入されます。

この関数の使い方ですが、たとえばidが「sccroll_to_here」という次のような要素があるとします。

<p id="scroll_to_here">ここまでスクロール</p>

この要素までスムーススクロールするようなページ内リンクを作るには次のように書きます。

<a href="#scroll_to_here" onclick='_scrollTo("#scroll_to_here", 500)'>ジャンプする</a>

onclick属性からリンクがクリックされたときに_scrollTo関数を呼び出しています。_scrollTo関数の１つめの引数にはリンクタグのhref要素の値、２つめの引数にはスクロール速度(ミリ秒)を渡します。

これで目的の場所までスムーススクロールされます。引数などについては好きなようにカスタマイズしてください。

その他のリンクのカスタマイズ術も紹介

今紹介したテクニックの他にも・・・

次みたいな リンク関連のカスタマイズ術 もいろいろ紹介してます。

• CSSだけでキラキラ光るリンクボタンを作る方法
• リンク色をWordPressで変える方法【全テーマ共通】
• WordPressで外部リンクにアイコン表示する手順

基本CSSコピペでできるので是非お試しください！

ほんの少しの工夫をするだけでも、クリック率をかなり上げることができますよ。

以上、jQueryを使ったリンクをスムーススクロールさせる方法の解説でした。

The post jQueryでページ内リンクをクリック時にスクロールさせる方法 first appeared on Fukuro Press.

Google検索のように何か入力されたときに検索ボックスの下にサジェストを一覧表示したい場合に便利なのがjQueryの「AutoCompelte」というウィジェットです。

ウィジェットと言っても形のあるものではなく、既存の検索ボックスなどにGoogleのような自動補完機能を付け加えるためのものです。また実装するためのコードもそれほど複雑ではありません。

そこでここではそのAutoCompleteを使って検索ボックスに自動補完機能をつける方法について解説します。

AutoCompleteの導入手順

jQueryのAutoCompleteを使って検索ボックスに自動補完をつける手順は次の通りです。

検索ボックスのid確認

まず自動補完を実装したい検索ボックスに割り振られているidを確認してください。

例えば次のようにinputタグで作った検索ボックスの場合、検索ボックスのidは「autocomplete_search」になります。

<input id="autocomplete_search" type="search" placeholder="何か入力" size="100" maxlengh="50" />

このidがjQueryから検索ボックスに自動補完機能を実装する場合に必要なので必ず初めに確認しておきましょう。

必要なファイルのリンク

AutoCompleteを使うにはjQueryのスクリプトとcssファイルを次のような形で読み込む必要があります。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

この２つをページのヘッダー(<head>と</head>の間)に書くことでjQuery UIに含まれるAutoCompleteが使えるようになります。

自動補完の実装

検索ボックスに自動補完機能を実装するのに必要なのは次のようなコードです。

まずスクリプト内で自動補完対象にしたいデータリストを作成します。

var dataList = [
  'accept',
  'accrue',
  'acquire',
  'act',
  'add',
  'admit',
  'administer',
  'affect',
  'afford',
  'agree',
];

そして次に検索ボックスに対して次のようなautocomplete関数を呼び出します。

jQuery('#autocomplete_search').autocomplete({
  source: dataList,
  autoFocus: true,
  delay: 700
});

このautocomplete関数に指定可能なのは次の４つのオプションです。

• source
  自動補完で利用されるデータ配列
• autoFocus
  候補リストで自動的に先頭の項目にフォーカスするか。デフォルト値は「false」
• delay
  検索ボックスでキー入力してから自動補完が働くまでの遅延時間(ミリ秒)。デフォルト値は「300」
• minLnegth
  自動補完機能が働く最小文字数。デフォルト値は「1」
• position
  候補リストの位置。

全体のコードは次のようになっています。

<script type="text/javascript">

var dataList = [
 'accept',
 'accrue',
 'acquire',
 'act',
 'add',
 'admit',
 'administer',
 'affect',
 'afford',
 'agree',
];
jQuery(function(){
  jQuery('#autocomplete_search').autocomplete({
    source: dataList,
    autoFocus: true,
    delay: 300,
    minLength: 1
  });
});
</script>

たったこれだけのコードですが実際に動かしてみると次のようにキー入力しただけでGoogle検索のようにサジェスト一覧が検索ボックスの下に表示されるようになります。

以上がAutoCompleteの基本的な使い方です。

日本語入力にも対応させる

AutoCompleteでは日本語も検索対象に含めることができますが１つ問題があります。

それは例えば次のような漢字を含むデータリストを作った場合です。

var dataList = [
  '愛知県',
  '青森県',
  '秋田県',
  '石川県',
  '茨城県',
  '岩手県'
];

このように漢字を含むデータリストの場合は次のように「あ」などのひらがなを打っても候補リストは表示されません。

そこでひらがな入力時にも候補が表示されるようにするにはコードを次のように少し工夫する必要があります。

コード例

ではどのようにひらがな対応させるかというとまず次のような漢字とその読み方を１対１に対応させたデータ配列を作ります。

var dataList = [
  ['愛知県', 'あいちけん'],
  ['青森県', 'あおもりけん'],
  ['秋田県', 'あきたけん'],
  ['石川県', 'いしかわけん'],
  ['茨城県', 'いばらきけん'],
  ['岩手県', 'いわてけん']
];

そして検索ボックスに対して次のようにautocomplete関数を呼び出します。

jQuery('#autocomplete_search').autocomplete({
    source: function(request, response){
      var suggests = [];
      var regexp = new RegExp('(' + request.term + ')');
      
      jQuery.each(dataList, function(i, values){
        if(values[0].match(regexp) || values[1].match(regexp)){
          suggests.push(values[0]);
        }
      });
      
      response(suggests);
    },
    autoFocus: true,
    delay: 300
  });

検索候補のカスタマイズをするためにsourceプロパティに関数を渡しています。

ただし関数を渡す場合は次のような２つの条件を守る必要があります。

• 渡す関数では「request」と「response」の２つの引数をとること
• 候補リストは「response」オブジェクトから返すこと

入力された文字列は「request.term」から取得できるので入力語に当てはまるものを漢字とひらがなのデータ配列から探し、そのうちの漢字だけを検索候補として表示するようにしています。

全体のコードは次のようになります。

<script type="text/javascript">

var dataList = [
  ['愛知県', 'あいちけん'],
  ['青森県', 'あおもりけん'],
  ['秋田県', 'あきたけん'],
  ['石川県', 'いしかわけん'],
  ['茨城県', 'いばらきけん'],
  ['岩手県', 'いわてけん']
];

jQuery(function(){  
  jQuery('#autocomplete_search').autocomplete({
    source: function(request, response){
      var suggests = [];
      var regexp = new RegExp('(' + request.term + ')');
      
      jQuery.each(dataList, function(i, values){
        if(values[0].match(regexp) || values[1].match(regexp)){
          suggests.push(values[0]);
        }
      });
      
      response(suggests);
    },
    autoFocus: true,
    delay: 300,
    minLength: 1
  });
});
</script>

実際にこのコードを動かしてみると次のようにひらがなを打ってもその文字から始まる候補が表示されるようになりました。

漢字に対応させるのは難しく感じますが漢字とひらがなの１対１の対応リストを作り、autocomplete関数のsourceプロパティで入力されたひらがなに当てはまる漢字をフィルタリングして候補リストに表示すればそれほど複雑ではありません。

まとめ

検索ボックスに自動補完機能をつけるのは難しそうに感じますが、jQueryのAutoCompleteウィジェットを使えばわずか数十行のコードで簡単に実装できます。

またコードを少しだけ工夫すればひらがなを入力したときに漢字の候補リストを表示することも可能です。

以上ここではjQueryのAutoCompleteを使って検索ボックスに自動補完機能をつける方法について解説しました。

The post jQueryのAutoCompleteを使って自動補完される検索ボックスを作る方法 first appeared on Fukuro Press.

インタラクティブなサイトやWebサービスだとユーザーの入力した内容に誤りがあるときなどにボタンをガタガタ揺らすという演出をしているところがあります。

細かい演出ですが、ただエラーメッセージを出すよりもユーザーに対してエラーを伝えやすくなります。

ここではそのようなボタンをガタガタさせる演出をCSSのアニメーションプロパティとjQueryを実装する方法を解説します。

ガタガタするアニメーションの作り方

上下左右にガタガタ動くようなアニメーションを要素で実行するにはCSS3で追加されたanimation関係のプロパティを使います。

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

<button id="btn" class="shake_btn">ボタン</button>

このボタンに対してガタガタ動くようなアニメーションを作るには次のCSSを適用します。

.shake_btn
{
  animation-name: shake;
  animation-duration: 0.2s;
  animation-iteration-count: infinite;
    
  background-color: rgba(255, 0, 0, 0.7);
  border-radius: 6px;
  width: 150px;
  font-weight: bold;
}

@keyframes shake
{
  from{
    transform: translateX(-5px);
  }
  
  50%{
    transform: translateX(10px);
  }
  
  to{
    transform: translateX(-5px);
  }
}

このCSSを適用したボタンには次のように左右にガタガタ震えるアニメーションが付きます。

ボタン

まずこのCSS内でアニメーションを作っているのは@keyframesでfromブロックの中で開始時の要素のCSS、toブロックの中で終了時の要素のCSSを定義しています。fromとtoブロックの間には０％～１００%の範囲でいくらでもブロックを追加できます。

またこの例ではtransformプロパティで移動関数を渡すことで要素を移動させています。移動関数には左右に移動させるtranslateX関数と上下に移動させるtranslateY関数があります。例えば左に5px、上に10px動かしたい場合はtransformプロパティに次の関数を渡します。

transform: translateX(-5px) translateY(10px);

そして@keyframesで定義したアニメーションを要素に適用しているのが次の部分です。

animation-name: shake;
animation-duration: 0.2s;
animation-iteration-count: infinite;

各アニメーションプロパティは次のような役割を持ちます。

• animation-name
  要素で実行したい@keyframesで定義したアニメーション名を渡す
• animation-duration
  １回当たりのアニメーションの実行時間。0.2sは0.2秒を表す
• animation-iteration-count
  アニメーションを何回実行するかの回数を渡す。「infinite」を渡すとループする

この例ではshakeというアニメを１回当たり0.2秒で無制限に再生するという動作になります。

またアニメーションプロパティはブラウザのバージョンによっては対応していないものもあるので各プロパティの前に「-moz-」や「-webkit-」や「-o-」などのベンダープレフィックス(接頭辞)をつけておいた方が無難です。

-webkit-animation-name: shake;
-moz-animation-name: shake;
animation-name: shake;

クリック時にアニメーションさせる

アニメーションするだけならCSSだけでできますが、クリック時にアニメーションを実行するにはjQueryなどのスクリプトを使う必要があります。次はその方法を解説します。

まず先ほどと同じくボタン要素を用意します。

<button id="btn" class="shake_btn" >ボタン</button>

そして次のようにCSSを定義します。

.shake_btn
{   
  background-color: rgba(255, 0, 0, 0.7);
  border-radius: 6px;
  width: 150px;
  font-weight: bold;
}

@keyframes shake
{
  from{
    transform: translateX(-5px) translateY(0px);
  }
  
  20%{
    transform: translateX(5px) translateY(0px);
  }
  
  40%{
    transform: translateX(-10px) translateY(-3px);
  }
  
  60%{
    transform: translateX(10px) translateY(0px);
  }
  
   80%{
    transform: translateX(-10px) translateY(0px);
  }
  
  to{
    transform: translateX(-5px) translateY(0px);
  }
}

このCSS内ではボタン要素に対してアニメーションは適用していません。

代わりに次のようにスクリプト内でボタンがクリックされるたびにcss関数を使ってアニメーションプロパティを設定します。

$(function(){
  $("#btn").on("click", function(){
    /** アニメーションプロパティを設定 */
    $(this).css("animation", "shake 0.3s");
    
    /** ボタン要素をコピーして古いものと置き換え */
    var copied = $(this).clone(true);
    $(this).before(copied);
    $("." + $(this).attr("class") + ":last").remove();
  });
});

細かい説明はしませんがanimationプロパティの設定は一度アニメーションが実行された後の要素には無効なので、clone関数でボタンのコピーを作りクリックでアニメーションするたびに新しいボタン要素に置き換えています。

このように作った要素はブラウザ上では次のような動作をします。ボタンをクリックすると上下左右にガタガタ震えます。

See the Pen NYqYQP by kaz1503 (@kaz1503) on CodePen.dark

以上ガタガタするアニメーションをボタンにつける方法について解説しました。

The post クリック時にガタガタ揺れるボタンの作り方【jQuery+CSS】 first appeared on Fukuro Press.

インタラクティブなサイトだとユーザーが何か操作すると文章や画像などがアニメーションしながら表示される演出をしているところがあります。

そのような演出をするにはjQueryで要素に対してアニメーション関数を実行するとフェードインやスライドダウンの効果をつけることができます。

ただ複数の効果をつけようとした場合は少し工夫が必要です。ここでは画像などの要素の表示時にフェードインとスライドダウンの両方のアニメーション効果をつける方法について解説します。

jQueryでアニメーション効果をつける方法

jQueryで要素をアニメーションさせながら表示するには非表示(display:none)の要素に対してアニメーションさせる関数を呼び出します。

例えばボタンを押したら画像がフェードインして表示する場合を考えてみます。必要なのが次のような画像要素と画像を表示するためのボタン要素です。

<div id="image" style="display: none;">
<img class="alignnone size-medium wp-image-226" src="./wordpress.png" />
</div>
<button id="show_btn">画像を表示</button>

画像の含まれているdiv要素は「display:none」で非表示にしてあります。

そしてボタンを押したらフェードインで表示するようなスクリプトは次の通りです。

jQuery(function(){
  jQuery("#show_btn").on("click", function(){
    jQuery("#image").fadeIn(500);
  });
});

fadeIn関数は要素をフェードイン表示させる関数で次のような構文を持ちます。

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

第一引数でフェードインにかかる時間(ミリ秒)を指定し、ここでは省略していますが第二引数でアニメーション終了時に実行される関数を渡します。

上のスクリプトを実行するとボタンを押したときに画像がフェードインして表示されます。実際にどのように表示されるかは下のボタンを押してみてください。

画像を表示非表示

また要素を上から下にスライドして表示するにはslideDownという関数を使います。構文は次の通りです。

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

fadeInと同じくスライドにかかる時間(ミリ秒)と終了時に実行する関数を渡すだけです。

実際にスライドダウンがどのように動くかは下のボタンを押して確かめてください。

画像を表示非表示

２つの効果を同時につけた場合の問題

フェードインとスライドダウンの効果を同時につけようとすると問題があります。それは同時に２つの効果をつけられないということです。

例えば２つの効果をつけようと次のようなスクリプトを書いたとします。

jQuery(function(){
  jQuery("#btn").on("click", function(){
    jQuery("#image").fadeIn(500).slideDown(500);
  });
});

このように書けばフェードインしながらスライドダウンしてくるのではと期待してしまいますが、実際はそうはなりません。

どのように動作するかは下のボタンを押してみてください。

画像を表示非表示

スライドダウンの効果しかついていないと思います。

これはfadeInを実行したすぐ後にslideDownを実行しているので効果が上書きされるからです。この方法では同時に２つの効果をつけることはできません。

animate関数を使えばいい

そこで解決策としてfadeIn関数をanimate関数に置き換えます。

animate関数は独自のアニメーションを作るための関数でCSSプロパティを時間に沿って変化させることができ、次のような構文を持ちます。

animate([CSSプロパティ], [オプション])

例えば３秒かけて要素の幅を200px、高さを100pxにするアニメーションをかけたいなら次のスクリプトを書きます。

$("div.box").animate({
  width: "200px",
  height: "100px"
}, {duration: 3000});

１つめの引数には「CSSプロパティ名: 値」のような形式でプロパティと値を複数指定でき、２つめの引数でアニメーション時間などのオプションを指定します。

この時要素にアニメ効果を複数つけたい場合は２つめのオプションで「queue」に対してfalseを指定します。

これを使って要素にフェードイン効果とスライドダウン効果を同時につけます。

まず今まで通り次のように表示する要素とボタンを次のように定義します。

<div id="image" style="display: none; opacity: 0;">
<img src="./wordpress.png" />
</div>
<button id="show_btn" class="_btn">画像を表示</button>

表示する要素に対して「opacity: 0」で透過度を0にしていることに注意してください。

そして次のようなスクリプトを書きます。

jQuery("#show_btn").on("click", function(){
  jQuery("#image")
    .slideDown(500).animate(
      { opacity: 1 },
      { queue: false, duration: 500 }
    );
});

スライドダウンすると同時にanimate関数内で500ミリ秒かけてopacityプロパティを1(完全不透明)にすることでフェードイン効果をつけています。

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

画像を表示非表示

少しわかりにくいかもしれませんが、要素が透明から不透明になりながらスライドダウンして表示されているのが分かると思います。

まとめ

以上、フェードイン＆スライドダウンの２つのアニメ効果をつける方法でした。

これ以外の効果をつけたい場合もこの方法が使えます。

The post jQueryで画像のフェードインとスライドダウンを同時に行う方法 first appeared on Fukuro Press.

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

１つめは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.

jQueryではanimate関数を使うとCSSプロパティを変化させて要素をフェードインさせたりなどのアニメ効果をつけることができます。

しかしこの関数に要素の回転・移動・拡大・傾斜などを行うtransformプロパティを指定することはできないのでそのようなアニメ効果をつけたい場合は別の方法を考えなくてはなりません。

ここでは要素に対して移動・回転・拡大・傾斜アニメーションをつける方法について解説します。

transformプロパティはanimate関数で使えない

transformプロパティは要素を移動・回転・拡大・傾斜の４つの方法で変形させるプロパティのことです。

このプロパティに渡せるのは次の４つの関数です。

• translate(移動関数)
• rotate(回転関数)
• scale(拡大関数)
• skew(傾斜関数)

例えばX軸方向に100px、Y軸方向に50px、２倍の大きさに拡大したいなら次のようにtransformプロパティに関数を渡します。

transform: translateX(100px) translateY(50px) scale(2);

関数はスペースで区切ることで複数渡せます。

要素を簡単に変形できて便利ですが、このtranformプロパティはjQueryのanimate関数の中では使えません。

例えば次のような書き方は不可です。

$(".box").animate(
  {transform: "translateX(100px) translateY(50px) scale(2)"}, 
  {duration: 3000}
);

animate関数ではtransformプロパティを使えないので注意が必要です。

transitionプロパティを使う

animate関数は使えないので代わりにアニメさせたい要素に対してtransitionプロパティを指定する方法を使います。

transitionプロパティは要素のCSSプロパティの時間変化を指定するためのプロパティで、次のように変化させたいCSSプロパティと時間をまとめて指定できます。

#box{
  transition: width 3s;
}

このプロパティを指定した時点ではwidthに変化はありません。

次のようにホバーされたときに呼び出されるhover疑似クラス内などでwidthプロパティが指定されると3秒かけてその大きさまでアニメーションつきで変化します。

#box:hover
{
  width: 200px;
}

実際にどのように動くかは下の要素にマウスをホバー(スマホの場合は要素を長押し)してみてください。

このtransitionプロパティを使って要素のtransformプロパティを変化させてアニメーションさせます。

やり方ですがまず次のようなアニメさせる要素とボタン要素の２つを用意します。

<div id="box"></div>
<button id="show_btn"></button>

そしてアニメ表示させる要素に次のCSSを適用します。初期状態では「transform: scale(0)」と指定することで要素の大きさを０にしています。

#box
{
  transform: scale(0);
  transition: transform 3s;
	
  background-color: rgba(0, 255, 255, 0.5);
  width: 200px;
  height: 100px;
}

次がボタンがクリックされたときにtransformプロパティをcss関数で書き換えるスクリプトを書きます。

$(function(){
  $("#show_btn").on("click", function(){
    $("#box").css({transform: "scale(1)"});
  });
});

このようなコードを書くとボタンがクリックされたときに徐々に拡大しながら要素が表示されます。実際にどのような動きをするかは次のボタンをクリックしてみてください。

アニメ表示

このようにtransitionプロパティをうまく使えばanimate関数を使わず要素に変形アニメーションを適用できます。

変形アニメーションの種類

最後にtransformプロパティで移動・回転・拡大・傾斜の４種類のアニメ効果のつけ方と例を紹介します。

移動(translate)

要素の移動にはtranslate関数を使います。アニメーションのコード例は次の通りです。

CSSコード

#box{
  transform: translateX(200px);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: translateX(0) } );
});

下のボタンを押すと水色の要素が右から左に移動します。

アニメ開始

回転(rotate)

回転にはrotate関数を使い、関数に渡す値には「deg」という角度を表す単位をつけます。

次がアニメーションのコード例です。

CSSコード

#box{
  transform: rotate(360deg);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: "rotate(0deg)" } );
});

下のボタンを押すと要素が回転します。

アニメ開始

拡大・縮小

要素の拡大・縮小にはscale関数を使います。以下がコード例です。

CSSコード

#box{
  transform: scale(0);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: "scale(1)" } );
});

下のボタンを押すと水色の要素が徐々に拡大されながら表示されます。

アニメ開始

傾斜(skew)

要素を傾けて表示するにはskew関数を使います。関数に渡し値にはscale関数と同じく「deg」という単位をつけるのを忘れないでください。

以下がコード例です。

CSSコード

#box{
  transform: skew(0deg, 0deg);
  transition: transform 2s;
}

スクリプト

$("start_btn").on("click", function(){
  $("#box").css( { transform: "skew(20deg, 5deg)" } );
});

下のボタンを押すとX軸方向に20度、Y軸方向に5度だけ要素が傾きます。

アニメ開始

以上jQueryでtransformプロパティをアニメーションさせる方法について解説しました。

The post jQueryで要素を移動・回転・拡大・傾斜アニメーションさせる方法 first appeared on Fukuro Press.

jQueryで要素のアニメーションをするにはanimate関数が使われます。

しかしCSSで要素の移動・回転・拡大・傾斜を行うtransformプロパティを指定することはできません。

そこでtransitonプロパティを使ってanimate関数を使わずに要素をアニメーションさせる方法について紹介します。

animate関数にtransformプロパティは渡せない

jQueryのanimate関数は時間に沿ってCSSプロパティを変化させて要素をアニメーションさせるための関数です。

animate関数には次のように２つの引数を渡します。

$("セレクタ").animate({CSSプロパティ}, {オプション})

CSSプロパティには「プロパティ名: 値」の形式でアニメーション終了時のCSSプロパティを指定し、２つめのオプションには再生時間を指定できます。

例えば要素のwidthを200px、heightを100pxに５秒間かけて変化させたいなら次のように書きます。durationには再生時間をミリ秒で渡します。

$(".box").animate(
  {width: 200px, height: 100px}, 
  {duration: 3000}
);

ただしこのanimate関数にはtransformプロパティを渡すことはできません。

例えば以下の例は３秒間かけて透過度を1から0.5、transformプロパティにrotateY関数を渡して要素を回転させようとしたスクリプトです。

jQuery(".box").css({transform: "rotate(360deg)"});
jQuery(".box").animate(
  { transform: "rotate(0deg)", opacity: 0.5 },
  {duration: 3000}
);

こう書いた場合透過度(opacity)だけが変化し、要素は回転しません。

animate関数で複雑なアニメーションをするのにtransformプロパティを渡すのをやってしまいがちですが、こう書いても期待通りのアニメーションはしないので注意してください。

transformプロパティをアニメーションさせるには

そこでanimate関数の代わりにアニメーションさせる要素に対してtransitionプロパティを指定します。

まず次のようにアニメーションさせる要素とクリックしたらアニメを開始するボタンを定義します。

<div id="box"></div>
<button id="start_btn">アニメ表示</button>

そしてこの要素に対して次のようなCSSを指定します。

#box { 
  transform: rotate(360deg); 
  transition: transform 1s; 
  
  background-color: rgba(0, 255, 255, 0.5);
  width: 200px;
  height: 100px;	
}

transitionプロパティにはtransformプロパティが変化したら1.0秒かけて変化するように指定してあります。

そしてボタンがクリックされたときにスクリプト側でcss関数を使い、次のようにtransformプロパティを変化させます。

jQuery(function(){
  jQuery("#start_btn").on("click", function(){
    jQuery("#box").css({transform: 'rotate(0deg)'});
  });
});

実際にどのように動くかは下のボタンを押して確かめてください。

スタート

「スタート」ボタンを押すと右に一回転して元に戻ります。もう一度アニメを見る場合はページをリロードしてください。

以上、jQueryでtransformプロパティをアニメーションさせる方法について解説しました。

The post jQueryでanimate関数を使わずtransformプロパティをアニメーションさせる方法 first appeared on Fukuro Press.

フォームの入力途中でページ離脱時にアラートを表示するのはユーザーの利便性を高めるのに必要です。

間違ってページを離脱されてしまい、面倒だからやめとこうとなるとサイト運営側も損失なので防がなくてはなりません。

ここではWordPressでページ離脱時にアラートを出す方法について解説します。

Scripts n Stylesプラグインの導入

まずWordPressの個別ページや固定ページなどではjQueryなどのスクリプトは直接編集画面には書けません。

もし編集画面に直接スクリプトを入力し、ビジュアルエディターを開いた後にもう一度HTMLエディターに戻ると自動補完で不要なタグなどが挿入されてしまいます。

そこで各ページの編集画面でスクリプトを扱うために「Scripts n Styles」というプラグインをインストールします。

「プラグイン」ー＞「新規追加」と進んでプラグイン名で検索すると検索結果に次のようなプラグインが出てくると思うので「今すぐインストール」をクリックしてインストールしてください。

以下のURLからダウンロードして使うことも可能です。

https://ja.wordpress.org/plugins/scripts-n-styles/

インストールして有効化すると各ページの編集画面の下に次のようなスクリプトの入力欄が現れます。

スクリプトを入力できる箇所は次の２か所です。

• headタグ内
• bodyタグ内

なるべく記事の内容とは関係ないスクリプトは本文とは切り離した方が良いので基本的にスクリプトはheadタグ内に書くのが良いと思います。

スクリプトを入力して「Update Scripts」ボタンを押すとスクリプトが保存され、headタグ内で実行することができます。

このプラグインを使えばjQueryが使えるのですが１つ注意点があります。

それはWordPressでjQueryで使う場合は次のように$(ドル)記号は使えないということです。

$(function(){
  $(".btn").on("click", function(){
    alert("clicked!");
  });
});

この$記号はjQuery関数の呼び出しを省略しているだけなので「$(".btn")」と「jQUery(".btn")」は同じ意味になります。

しかしWordPressではこの$記号は使えないので次のように省略せずに書く必要があります。

jQuery(function(){
  jQuery(".btn").on("click", function(){
    alert("clicked!");
  });
});

ページ離脱アラートを表示するには

ページ離脱アラートを表示するにはウィンドウで「beforeunload」というイベントが起こった時にイベント処理を追加する次のようなコードを書きます。

jQuery(function(){
  jQuery(window).on('beforeunload', function(){
    return "";
  });
});

このスクリプトを実行した状態で他のページに行こうとしたりウィンドウを閉じようとすると次のようなアラートダイアログが表示されます。(Chromeの場合)

使用が変わる前は次のようにアラートに表示するメッセージを指定することも出来たようです。

jQuery(window).on('beforeunload', function(){
  return "このページを離れてもいいですね？";
});

しかし今はIEでしかオリジナルメッセージが表示できず、その他のブラウザでは固定のメッセージダイアログが表示されるようです。

入力途中の離脱でアラートを表示するには

フォームの入力途中でユーザーがページを離れようとした場合にアラートを表示するかどうかはフラグ(真偽値)で管理します。

例えば次のようなフォームがあるとします。

<form>
  <input type="text" placeholder="何か入力"><br />
  <button type="submit">送信</button><br />
</form>

そしてページ離脱時にアラートを表示するために次のようなスクリプトを書きます。

jQuery(function(){
  var isChanged = false;
	
  jQuery(window).on('beforeunload', function(){
    if(isChanged){
      return "";
    }
  });
	
  jQuery("form input, form textarea, form select").change(function(){
    isChanged = true;
  });
  jQuery("button[type=submit]").on("click", function(){
    isChanged = false;
  });
});

このスクリプトでは「isChanged」というフラグ変数でフォームへの入力があったかどうか判断します。

まずフォームの中のinput要素(１行テキストやチェックボックス)、textarea要素、select要素(セレクトボックス)がユーザーの操作で変化したときにフラグをtrueにしています。

jQuery("form input, form textarea, form select").change(function(){
    isChanged = true; 
});

ただこれだと送信ボタンを押したときもアラートが表示されてしまうので「type="submit"」を指定してあるボタンがクリックされた場合は次のようにフラグをfalseにしています。

jQuery("button[type=submit]").on("click", function(){
    isChanged = false;
});

実際にどのように動作するかは以下のフォームに何か入力してリロードなどすると分かると思います。

以上WordPressでページ離脱時にアラートを出す方法について解説しました。フォームを作るときなどに役立つと思います。

The post WordPressでページ離脱時にアラートを出す方法【jQuery】 first appeared on Fukuro Press.

CSS3では要素に対してアニメーションを追加するアニメーションプロパティが追加されました。

このプロパティを使うと要素を動かしたり回転させたり移動させるなどの従来はスクリプトなどを使わなければできなかったことがCSSのみでできます。

そこでここではそのアニメーションプロパティとjQueryを組み合わせてさらに複雑な１つ１つの文字を上下に揺らすアニメ効果をつける方法について解説します。

１文字だけを揺らす方法

アニメーションプロパティを文字に対して適用すると次のように上下にゆらゆらする文字を作れます。

１つ１つの文字を別々に揺らす方法を解説する前にこのように上下に揺れる文字をCSSで作る方法を解説します。

上の例のように上下にゆらゆらしている文字を作るには次のようなspan要素を作成します。

<span class="swing">あ</span>

「swing」というクラスを割り振ってあります。

この要素に対して次のようなCSSを適用すると上下に揺れるアニメ効果が付きます。

.swing
{
  animation-name: anime;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  transform : translateY(-20px);
  color: red;
}

@keyframes anime
{
  from{ transform : translateY(-20px); }
 
  50%{ transform : translateY(40px); }
  
  to{ transform : translateY(-20px); }
}

上のCSSコードに@keyframesという@規則がありますが、この中でアニメーションを定義しています。@keyframesは次のような書式を持ちます。

@keyframes アニメーション名
{
  from{
    /** 開始時のCSS */
  }

  to{
    /** 終了時のCSS */
  }
}

fromブロックに開始時、toブロックに終了時の要素のCSSを定義します。この２つのブロックの間には0%～100%の間で細かくアニメーションのためのCSSを設定することが可能です。

そして上下に揺らしたい要素に対して次のアニメーションプロパティを設定しています。

• animation-name
  @keyframesで定義されたアニメーションを渡す
• animation-duration
  １つのアニメーションの実行時間。2sは2秒を表す
• animation-iteration-count
  アニメーションを繰り返す回数。「infinite」を指定するとループする

この他にもアニメーションプロパティはありますが文字を上下に揺らすならこれらのプロパティを指定するだけで十分です。

またここではコードが長くなりすぎるので省略しますが対応していないブラウザにも対応させたい場合は次のようにベンダー接頭辞をつけます。

-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;

１つ１つの文字をばらばらに揺らす方法

１つの文字を揺らすだけならCSSで十分ですが文字を別々に揺らしたいといった場合はjQueryを使うと要素に動的にCSSプロパティを設定できるので楽です。

まず次のように揺らしたい文字１つ１つをspan要素として定義します。

<div id="swing_text" style="margin-top: 30px;">
<span>ゆ</span><span>ら</span><span>ゆ</span><span>ら</span>
</div>

span要素の入ったdiv要素には「swing_text」などの分かりやすいid名をつけてください。

そしてそのdiv要素の１つ１つのspan要素に対して次のCSSを指定します。

#swing_text span
{
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  transform : translateY(-20px);
  color: red;
}

@keyframes anime
{
  from { transform : translateY(-20px); }
  
  50% {  transform : translateY(40px); }
  
  to { transform : translateY(-20px); }
}

@keyframesでアニメーションの定義をしていますが、このCSS内では要素に対してアニメーションを指定しません。

代わりに次のようにjQueryを使ってdiv要素内の全てのspanに対してアニメーションプロパティを動的に追加します。

$(function(){
  /** div#swing_textの子要素をすべて取得 */
  var spans = $("#swing_text").children();

  /** 子要素に対して個別にアニメーション指定 */
  for(var i = 0; i < spans.length; i++){
    e = spans[i];
    $(e).css("animation-name", "anime");
    $(e).css("animation-duration", "1.7s");
    $(e).css("animation-iteration-count", "infinite");
    $(e).css("animation-direction", "aleternate");
    $(e).css("alternate-timing-function", "ease");
    $(e).css("animation-delay", "" + (i / 5) + "s");
  }
});

ここでcss関数を使ってanimation-nameなどのCSSプロパティに値をセットしています。

全ての要素に同じプロパティを設定するならCSSでも可能ですが、このスクリプト内では次のように文字ごとにアニメーションの開始時間をずらしています。

$(e).css("animation-delay", "" + (i / 5) + "s");

animation-delayプロパティはアニメーションの遅延時間を設定するプロパティでここではインデックスがi番目のspan要素に対して(i / 5)秒だけ遅らせることで各要素の開始時間を別々に指定しています。

例えば2番目の要素ならインデックス番号は i=1 となるので0.2秒だけ遅れると考えてください。

ブラウザでは次のように文字が波打ってアニメーションします。

See the Pen ゆらゆら文字(標準) by kaz1503 (@kaz1503) on CodePen.dark

アニメーション時間や遅延時間をずらすと揺れる速さや波の大きさが変わります。

ゆらゆらする文字の応用例

最後に他のアニメーション効果と組み合わせるとこんな面白いこともできるという応用例をいくつか紹介します。

大きさが変わりながらゆらゆらする文字

@keyframesのなかでtransformプロパティに要素の大きさを変えるscale関数を渡すと揺れながら上に浮かび上がってくるようなアニメーション効果もつけられます。

次が実行例とコードです。

See the Pen ゆらゆら文字(大きさ変化) by kaz1503 (@kaz1503) on CodePen.dark

回転しながらゆらゆらする文字

@keyframesで中のtransformプロパティに要素をxyz方向に回転させるrotate関数を渡すと回転しながらゆらゆらする文字も作れます。

以下の実行例とコードではrotateX関数とrotateY関数を使うことで横軸と縦軸に回転させながら文字を揺らしています。

See the Pen ゆらゆら文字(回転) by kaz1503 (@kaz1503) on CodePen.dark

以上アニメーションプロパティとjQueryを使って文字をゆらゆら揺らすアニメ効果をつける方法について解説しました。プロパティの値を変えればオリジナリティのある面白いアニメが作れるので色々試してみてください。

The post jQuery+CSSで文字をゆらゆら揺らすアニメ効果をつける方法 first appeared on Fukuro Press.