あなたのウェブサイト上でFlashを使用してポートフォリオのページを行うと、時代遅れのようなものとなっています。 高速なマシンと新世代ブラウザで、これらの日は本当にJavascriptとCSSでいくつかのお尻を蹴ることができます。 jQueryは、いくつかの効果に対処するための非常に巧妙な方法があります。 すべてのアニメーションは "アニメーション"と呼ばれる基本メソッドに由来する。 それはアニメーションでは、DOM要素のプロパティをトゥイーン。 長い話を作るためには、短いこのを見てみましょう。
だから、あなたはすでにクリックした、右見ましたか? あなたはコードを見ればOK、それはかなり簡単です。
$(ドキュメント)の準備(関数(){ VAR hover_in_easing = "easeOutExpo"; VAR hover_out_easing = "easeOutBounce"; $( "info_container。")ショー(); $( "div.portfolio_div")。ホバー(関数(){ $(これは)( "。info_container")を見つけるアニメーション({上: "0px"}、{期間:400、緩和:hover_in_easing}); }は、関数(){ $(これは)( "。info_container")を見つけるアニメーション({上: "100pxに"}、{期間:500、緩和:hover_out_easing}); }); / / 100ピクセルマスクのサイズです。 });
それは相対的に配置することによって隠されて保持される画像の上にマスクをアニメーション化するアニメーション関数を使用しています。 とプラグインを緩和して、私たちは、あなたが画像からカーソルを移動したときにバウンスいくつかのクールな効果を実現しています。 それは国境を越えて行かない限り、info_containerのDIV要素内の任意のHTMLを置くことができます。 スタイルシートを見て、あなたは非常にgramaticalそれを見つけることができます。 あなたはdivのクラスを変更することにより、サイズをカスタマイズすることができます。
インスピレーション:http://dibusoft.com/portfolio











































最近のコメント