RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2011⁄12⁄19(Mon)
  • 18:50

CustomCategoryカスタマイズ【アニメーション(適用箇所・種類・速さ)】


CustomCategoryについてはこちら

ここではアニメーション(適用箇所・種類・速さ)について解説します。
子カテゴリーの展開アニメーションを柔軟にカスタマイズすることができます。
アニメーション適用箇所は2箇所、イージング(動き方)の種類は約30種類、速さは秒単位での指定が可能です。
サンプルは続きをどうぞ。
ダウンロードして頂いたプラグインの編集画面から【HTMLの編集】をクリックし、コードの下部から次の青字の部分を探してください。
//【アニメーションの設定】
// scrollは上下の開閉アニメ、popupは文字の透過アニメ
// それぞれ"on" と "off" から選択可能
animation = {'scroll':'on', 'popup':'on'};

//【イージングの設定】
// アニメーションのモーション(動き)の設定
easing = 'easeInOutCirc';

//【イージングのスピードの設定】
// アニメーションの速さの設定
// 単位は秒
duration = 0.7;


【アニメーションの設定】で適用箇所の変更ができます。
onにすることでアニメーションの適用が可能になり、offにすることで適用を解除します。
scrollをonにすると、開く・閉じるの上下展開がなめらかに表示されます。
popupをonにすると、子カテゴリーの文字がフワッと浮き上がるように表示されます。
【イージングの設定】で種類の変更ができます。
【イージングのスピードの設定】で速さが変更できます。


以下サンプル。

セレクトボックスを変更すると自動的に設定が反映されます。
【アニメーションの設定】

【イージングの設定】

【イージングのスピードの設定】

開く閉じるボタンを押して動作を確認してください。

反映後のHTMLテキスト(コピペしてお使い下さい)
//【アニメーションの設定】
// scrollは上下の開閉アニメ、popupは文字の透過アニメ
// それぞれ"on" と "off" から選択可能
animation = {'scroll':'', 'popup':''};

//【イージングの設定】
// アニメーションのモーション(動き)の設定
easing = '';

//【イージングのスピードの設定】
// アニメーションの速さの設定
// 単位は秒
duration = ;

以上です。
関連記事
スポンサーサイト
category
カスタマイズ > CustomCategory
tag
カスタマイズプラグインjQueryjavascriptアニメーションeasing
genre
ブログ
theme
FC2ブログ共有プラグイン

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/172-29ffd690

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
2602位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
21位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。