最近ゴリゴリにダイナミックにアニメーションさせる案件が多く、昔の知識だけだとパフォーマンス的に厳しい状況が出て来ました。
なのでこちらを実戦で利用してみようと思います。
ベンダープレフィックス等も対応しており、cssでキーフレーム書いたりなどするより早いし管理しやすそうです。
http://ricostacruz.com/jquery.transit/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.transit.min.js">
星がきらめくようなプラグインです。
別に星じゃなくてもいいんですが、フェードインしてまたフェードアウトするような
オプションをとっていないので適当に調整する必要がありますが。
$("#star img").star();//フェードあり
$("#star img").star2();//明滅のみ
(function($) {
/*初期設定*/
$.fn.star=function(options){
this.each(function(){
var $this=$(this);
$this.starFadeIn();
});
return this;
};
$.fn.starFadeIn=function(){
p_obj=makePoint();
$(this).css({"left":p_obj.x+"px","top":p_obj.y+"px"}).fadeIn(100).delay(p_obj.d).fadeOut(300,starFadeIn);
}
function starFadeIn(){
$(this).starFadeIn();
}
$.fn.star2=function(){
this.each(function(){
var $this=$(this);
$this.starShow();
});
return this;
}
$.fn.starShow=function(){
// alert("s");
p_obj=makePoint();
// alert(p_obj);
$(this).css({"left":p_obj.x+"px","top":p_obj.y+"px"}).delay(p_obj.d).show().delay(p_obj.d).hide(0,starShow);
// delete p_obj;
}
function starShow(){
$(this).starShow();
}
function makePoint(){
var x=Math.floor(Math.random()*1000)-200;
var y=Math.floor(Math.random()*400);
var d=Math.floor(Math.random()*1000)+300;
obj={};
obj.x=x;
obj.y=y;
obj.d=d;
return obj;
}
})(jQuery);
Word PressでjQueryを利用したい場合noConflict();が入っているので
以下のように修正しました。
$(function(){
$('a.blank').attr("target","_blank");
});
を
jQuery(function(){
jQuery('a.blank').attr("target","_blank");
});
・・・面倒だなあ。
simplyscrollのサンプルがありました。
というか、simplyscroll知りませんでした。
そんなに有名なんでしょうか？
あとgoogleコードでホスティングされてるのが
探すの下手くそです。
動くはずなんだけどなーとおもいつつ
はまってしまいましたのでメモします。
以下の記述がないと駄目だったんですね。
.ui-tabs .ui-tabs-hide {
display: none;
}
雰囲気でやるとダメってことです。
気をつけます。
jHtmlAreaのデフォルトのツールバー
デフォルトであるサイズを変更するボタンとか追加したいなと思ったのですが
いまいちどこにあるのかわかりませんでしたので。
["html"], ["bold", "italic", "underline", "strikethrough", "|", "subscript", "superscript"], ["increasefontsize", "decreasefontsize"], ["orderedlist", "unorderedlist"], ["indent", "outdent"], ["justifyleft", "justifycenter", "justifyright"], ["link", "unlink", "image", "horizontalrule"], ["p", "h1", "h2", "h3", "h4", "h5", "h6"], ["cut", "copy", "paste"]
そしてツールバーの項目を変更する際のスクリプト
$(function(){
$("textarea#content").htmlarea({
toolbar: [
["html","|", "bold", "italic", "underline", "|", "forecolor"],
["increasefontsize", "decreasefontsize"],
["link", "unlink", "|", "image"],
["cut", "copy", "paste"]
]
});
});
良くレイアウトをCSSで組む際に
リストが複数ある状態をシミュレーションするためにわざわざli要素をコピーとかするんですが
このスクリプトを制作のときに入れておけば楽でした。
li要素を変更したときにも役立ちます。
list='<li>'+$("#sample_list li:first").html()+'</li>';
for(i=0;i<10;i++){
$("#sample_list ul").append(list);
}
テスト用なので、稼働時には外しますが。