文字列内より指定箇所のみ文字に色々な動き（ローテーション）をつけて表示してみます。 1．読込むCSSファイルとCSSの記述例 <style> body{ padding: 0; text-align: cen...
...jquery.simple-text-rotator.js：指定箇所の文字に色々な動き（ローテーション）で表示できるJs
jQueryを使用せず画像（img）のsrc要素を切替える方法
jQueryのプラグインで切替える方法は色々ありますが、jQueryプラグインの利用が多くなる前使ってた方法です。 JavaScriptのdocument.images.srcを使用して画像要素を切替えます。 1．C...
...jQueryを使用せずページ上部に固定バーを表示するJs
今回はjQueryを使用せずページ上部にJavaScriptを使用して固定バーを表示してみます。 1．CSSの記述 バーのスタイルを指定します、調整してみて下さい。 <style type="text/c...
...コンテンツエリアに収まりきれないテキストや画像を上下移動でスライド表示
ボックスエリア内に納まりきれてないテキストや画像情報を「↑」「↓」リンクにマウスオーバーでスライドして表示します。 1．CSSの記述 <style type="text/css"> <...
...exdate.jsを使ってDateオブジェクトの日時をフォーマット表示
exdate.jsを使ってDateオブジェクトを拡張し、日時（年月日時分秒）をフォーマット表示してみます。 1．CSSの記述例 以下は任意です。 <style> .clWrap{ width:700px; m...
...chartify.js：table要素をグラフ化表示できるJs
tableタグの要素（td、th等）をグラフ化します。 円・棒・帯グラフ等にできるっぽい。 1．CSSの記述例 以下は任意でです。 <style type="text/css"> <...
...reflection.js：画像を反射させ半透明の影を表示できるJs
jpg画像に半透明の反転した影を表示させてみます。（始めから影付きのjpg画像を表示作って表示させれば良いかもしれませんが） 1．読込むJsファイルとJavaScriptの記述例 <script type=&quo...
...bespoke.js：プレゼン用のパネルとテーマを表示するJs
画像のスライド系というよりプレゼンで紙芝居的に見せるためのパネルを幾つかのテーマで表示させてみます。 1．読込むCSSファイルとCSSの記述例 <link rel="stylesheet" ty...
...jquery.easing：アニメーションにイージングをつけて画像をチラッと表示
ページ表示時に画像をチラッと表示させ、かつ動きに緩急（easing）をつけて表示させてみました。 1．JavaScriptの記述 ロゴ画像を初期表示時はアニメーションでブラウザ内にチラッと表示させ、数秒後にブラウザ外に隠...
...animate-textshadow：テキストに影やグローを付けてアニメーション表示するJs
複数の1枚画像をサイコロの様に回転して表示します。 1．CSSの記述 <style type="text/css"> <!-- body{ margin: 2em; font-fam...
...