☆きまぐれ日記☆

スクロールで動く静止画像：猫

http://(http://blogs.c.yimg.jp/res/blog-78-13/hikaru_h_2007/folder/1760606/80/69244980/img_0_m?1459409300

静止画像に　 縞模様の画像を重ねると　 錯覚で　 画像が動いてるように　 見える画像を作ってみました。　 ゆっくりスクロールして　 縞模様を重ねていくと　 猫が走ってるように見えます。

ど う か な 〜

前進してるように作成したが　 早く動きすぎて　 前進してるのか後進してるのか　 よく分からないな〜　 ゆっくりスクロールすると、ん〜〜　 後進してるように見えるな〜　 回転系の画像のほうがいいのかな　 皆さんのＰＣでは　 画像が動いて　 前進してるように見えますか？

久しぶりの投稿

すっかり　 ご沙汰いたしまして　 申し訳ありません。　 元気にしておりました。　 永い眠りから覚め　 ようやく　 投稿することができました。　 たまにしか投稿しませんので　 寝ているのと変わりませんが　 これからも　 よろしくお願いします。

簡モ：スクロールの回り込み

 

 

　かんたんモード　http://x7.jougennotuki.com/bin/ll?09494681w

 

【 スクロールの回り込み 】

 

 

 

 

　　文字・画像の左側に、スクロールを設置する。　　　　　　　　　　　　　　　

 

 

 

ここにも文字や画像を設置することが出来ます。

 

スクロールの大きさを

変更しない場合は、

巾２３０ｐｘ以内の画像を

設置してください。

コレより大きいと

横スクロールが表示されます。

 

 

 

 

 

 

 

いろいろ

 

設置できます。

 

 

スクロールの周りに

 

１０ｐｘのスペースを

 

作っています。

 

 

 

ここにも文字や画像を設置することが出来ます。

 

 

 

 

　　 　　　　　　 

 

　　文字・画像の右側に、スクロールを設置する。　　　　　　　　　　　　　　　

　

 

 

ここにも

 

文字

 

や

 

画像を

 

設置

 

出来ます。

 

 

 

 

 

 

 

　ここにも文字や画像を設置することが　　出来ます。

 

　

 

 

 

 

 

 

 

 

    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   　　　　　　　　　　　　

 

 

 

 

■　サンプル：スクロールの回り込み　　（コピペで使用できます。）

　※　スクロール大きさ　２５０ x ２５０  ｐｘ　

　※　スクロールの大きさの変更は、□をドラッグして調整してください。

 

 

・左側スクロール

 

▼

文章

文章

▲

 

 

・右側スクロール

 

▼

文章

文章

▲

 

■　おまけ

・左右スクロール

 

▼

文章

文章

▲

 

 

再配布行為・無断使用は、ご遠慮ください。

簡モ：便箋風ライン

 

　かんたんモードhttp://x7.jougennotuki.com/bin/ll?09494681u　

 

＜　便箋風ライン　＞

 

 

　

　くみさんから、便箋風のアイデアを頂きました。

 

　下記ラインを ▼ カラ ▲ マデ を「コピー」して、かんたんモードの投稿画面へ

　「貼り付け」て使用してください。

　このラインは、改行(Enter)キーを押すと自動的に　ライン行が増えます。

　背景画像・スクロールバー・重ねファイル、にも貼り付けて使用できます。

 

　

　【　画像添付も行えます。　】

　　　

画像ボタンより配置しました。

左寄せ・右寄せで配置した場合は、

画像の横にもラインは表示されます。

 

（中央配置）

　　　　これは、　（挿入配置）

中央・挿入で配置した場合は、画像の横にはライン表示されません。

 

 

 

 

 

 

　背景画像へ設置　

 

 

 

背景画像にも貼り付けて使用できます。

 

　←　　　　　　　左右に余白ありを使用した場合は、　　　　　　　　→　

画像等を添付する際は、巾を通常時より３０ｐｘ狭くして

添付してください。

 

 

 

 

このラインは、余白なしのタイプです。

 

 

 

 

 

 

 

　スクロールバーへ設置　

 

 

 

ここにも

貼り付けできます。

余白ありのタイプです。

 

 

 

 

 

 

余白なしのタイプです。

 

 

 

 

 

 

 

 

 

 

 

■　点線　サイズ３ｐｘ　：　左右に余白あり (15px x 2)

 

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

 

 

■　点線　サイズ１ｐｘ　：　左右に余白あり (15px x 2)

 

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

 

 

■　二重線　サイズ４ｐｘ　：左右に余白あり (15px x 2)

 

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

 

 

■　点線　サイズ３ｐｘ　：　余白なし　

 

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

 

 

■　点線　サイズ１ｐｘ　：　余白なし　

 

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

 

 

■　二重線　サイズ４ｐｘ　：　余白なし

 

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

▼

 

文章

▲

 

 

 

 

再配布行為・無断使用は、ご遠慮ください。

 

簡モ：スクロールバーの応用

 

 

 

　簡単モード　

 

 

スクロールバーの応用

 

 

 

・下記サンプルの▼カラ▲マデを「コピー」して、

　簡単モードの投稿画面に「貼り付け」てから文章入力してください。

 

・スクロール枠のサイズ調整も行えます。（ □ をドラッグして調整します。）

 

＜　注意　＞

　　ＩＥ以外のブラウザには、反映しません。

 

 

■　スクロールバー　透明指定

※　サンプル　（コピーで使用可能です。）

 

 ▼

文章

 

 

 

 

 

▲

 

※　HTML　入力例

▼
<div style="overflow:auto;

scrollbar-arrow-color: none ;
scrollbar-face-color:  #eeeeee;
scrollbar-track-color: #eeeeee;
filter:chroma(color=#eeeeee);
border:solid 1px #999999;
width:450px;height:150px;
font-size:12pt;color:#663333;
font-family:ＭＳ Ｐゴシック;">
<div align="center">

<br>
文章

<br><br>
</div></div>
▲

scrollbar-arrow-color:     none   ;　　矢印（▼）の色を指定する。
scrollbar-face-color:      #eeeeee;　　透明指定により透明になる。
scrollbar-track-color:     #eeeeee;　　透明指定により透明になる。　　

filter:chroma(color=#eeeeee);　   　　　　透明にする色を指定する。

【注意】

文字や画像に透明指定と同じ色（#eeeeee）色が使用されていた場合は、文字や画像も透過処理されます。（画像は虫食い状態になります。）

 

 

 

■　スクロールバー　半透明指定

※　サンプル　：　不透明度70％　　（コピーで使用可能です。）

 

    ▼

文章

▲

 

※　HTML　入力例

▼
<div style="overflow:auto;
scrollbar-arrow-color: #ff0000;
scrollbar-face-color:  #ffcccc;
scrollbar-track-color: #eeeeee;
filter:chroma(color=#eeeeee)alpha(opacity=70);
border:solid 1px #ffaaaa;
width:450px;height:150px;
font-size:12pt;color:#663333;
font-family:ＭＳ Ｐゴシック;">
<div align="center">

<br>
文章

<br><br>
</div></div>
▲ 

scrollbar-arrow-color:　   #ff0000;　 矢印（▼）の色を指定する。
scrollbar-face-color:　　　#ffcccc;　 スクロールバーの表面の色を指定する。

scrollbar-track-color:　　 #eeeeee;   透明指定により透明になる。

filter:chroma(color=#eeeeee)alpha(opacity=70);　透明にする色を指定する。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　不透明度(%)を指定する。(0〜100）

 

スクロールバーだけの半透明ができなかったー

 

 

【注意】

文字や画像に透明指定と同じ色（#eeeeee）が使用されていた場合は、文字や画像も透過処理されます。（画像は虫食い状態になります。）

スクロールバー内の文字や画像、全てが半透明になります。

 

 

 

ＨＴＭＬの作成方法

 

Ｆｉｌｔｅｒの機能説明

 

無断使用は、ご遠慮ください。

 

既に使用されている方もおられますが、記事に上げておきます。

 

Chｒｏｍａの別の使い方を試していますが、上手くいってません。

スクロールバーでは上手く反映しているのに、

別の場所に指定した場合、反映しないのはなぜだ〜〜〜。

指定方法が間違っているのかなー？

出来そう思えたのに出来ないよ〜〜〜〜。