説明 ◆ふわふわ◆
◇ぱーぷりんの溜まり場 ◆ふわふわ・メニュー ◆ぱーぷりん・メニュー ◆Kurt Grigg・メニュー ◆花火・メニュー ◆中心点・メニュー
『降る上る』と『ふわふわ』のJavaScriptは、どう違うのか？
速度が違う？
いえいえ、画像（文字）が往復運動をするかどうかということです。
風船はふわふわ漂いますが、最後は空のかなたに上って消えます。でも雲は、ふわふわ漂いながらの往復運動で、上ることも落下することもありません。このサイトでは、雲のような動きが『ふわふわ』なのです。
さらに、『降る上る』に該当しないような動く画像も『ふわふわ』としています。
なお、ドキュメント宣言が<!DOCTYPE html>では動かないモノにはHTML5が付いてます。
■画像（文字）の動きが中心点を基準に、広がったり、噴き出したり、クリックで弾けたり、回転したりする「中心点メニュー」新設（2015/04/09）
■「中心点メニュー」以外のKurt Grigg名義の「Kurt Grigg・メニュー」新設（2015/11/29）
■「ふわふわメニュー」から独立して、「ぱーぷりん・メニュー」のコーナー新設（2017/07/15）
説明 ◇ぱーぷりんの溜まり場◇
『降る上る』のJavaScriptでも紹介した「ぱーぷりんの溜まり場」は、現在では京栄一級建築士事務所テンプレートの「総合メニュー」コーナーに置いてあります。動く画像のJavaScriptの宝庫です。// ブラウザ等のサイズを調べる
の箇所を全部削除して、↓下記に変更。
//ブラウザのサイズを調べる★新2017/06/25修正★
function brSize(){
if(document.getElementById){
doc_x=window.innerWidth-18;/*●18はスクロールバー分*/
doc_y=window.innerHeight-18;/*●18はスクロールバー分*/
off_w=window.pageXOffset;
off_h=window.pageYOffset }
if(srl < 0){ off_w=0; off_h=0 } }
それから
// 画像を移動する
の箇所の行の最後のxxとyyを、それぞれ
xx+"px" と yy+"px" に変更して下さい。
それでIE11とHTML5でも動作するようになります。(動作しないものもあります。)
このページに飛んでるゴーストも、この(ぱーぷりんの溜まり場）のJavaScriptです。
修正 : 2014/06/12→再修正 : 2014/09/20→再々修正 : 2017/07/15
◇ぱーぷりんの溜まり場 ◆ふわふわ・メニュー ◆ぱーぷりん・メニュー ◆Kurt Grigg・メニュー ◆花火・メニュー ◆中心点・メニュー
◆ふわふわ・メニュー◆
『ふわふわ』のJavaScriptのサンプルです。| 流れ星 | ランダムに流れ星が流れます。流れ星は「文字」か「画像」かを選択可能。GIFアニメ画像を使用するときれいです。 |
| ふわふわ天使 | 前回のJavaScript作成分は削除して、CSSのみで作成。画像がふわふわと浮かんでいます。画像マウスオーバーで停止。リンクも可。 |
| キラキラ星（文字） | 複数種類の文字(フォント)の星が好みの場所で、発生したり消滅したり。文字の角度、透過、サイズのランダム指定を追加しました。 |
| キラキラ星（画像） | 上記のキラキラ星(文字)を画像に変更。季節に応じて紅葉、雪などを使ったり、お気に入りの写真にキラキラ画像を付けても楽しい。 |
| 散らばる画像 -GF作品- | ふわふわ漂う花がマウスの停止位置で集結し、マウスを動かすと散らばります。とても不思議な動き。2016/07/07：スクロール対応へ。 |
| 散らばる画像(IE用)-GF作- | 上記に改造すると、ブラウザIEでは極端に速度が遅くなります。こちらはIE用に速度が遅くならない代わりに、スクロールすると画像がマウス停止位置で集結しません。 |
| 跳回る大量ボール-GF作品- | 大量のボールが、画面いっぱいに跳ね回る。マウスで突くと、いつまでも豪快に跳ね続けます。今回はハロウィン仕様で作成。 |
| 背景画像１個ふわふわ | 『動く背景』関連のJavaScriptですが、１個の画像が宙に浮いてゆらゆらしているように見えるので、こちらでご紹介。 |
| サンタの直線移動 | １つの画像が斜めに直線的に動作します。下に消えたら、上から再度登場。古いブラウザ対応分を削除して、HTML5用に改造、簡略化。 |
◇ぱーぷりんの溜まり場 ◆ふわふわ・メニュー ◆ぱーぷりん・メニュー ◆Kurt Grigg・メニュー ◆花火・メニュー ◆中心点・メニュー
◆ぱーぷりん・メニュー◆
「ぱーぷりんの溜まり場」は、現在では京栄一級建築士事務所テンプレートの「総合メニュー」のコーナーに置いてあります。「ぱーぷりん」のJavaScriptの特徴は、ふわふわ動く画像の１個１個に、個別に動作の指定と表示位置指定ができる点です。
さらに画像の複数表示を、途中で１個表示に変更することもできるJavaScriptも多いです。
■原本は画像を不規則に移動させる 使用例：羊の牧場です。
ランダムに動作させる場合、画像の個別指定が逆に面倒な場合もあります。なので、JavaScriptを４個用意しました。
メニューをクリックすると画像の全面一括指定版へ、となりの範囲一括をクリックすると、画像の範囲一括指定版へ、さらにとなりの全面個別 をクリックすると、画像の全面個別指定版へ、さらにとなりの範囲個別 をクリックすると、画像の範囲個別指定版へ、画像指定の方法の違いで各指定版のページになります。
★「ぱーぷりん」の原本に一番近い指定方法は、３番目の「全面個別」になります。★
全件グローバル変数を削除済み：2017/07/15
| 画像が踊る・全面一括 | 範囲一括 | 全面個別 | 範囲個別 | １番目の『全面一括』がこのページでも使っているJavaScriptです。複数の画像がランダムに動きます。 |
| 文字が踊る・全面一括 | 範囲一括 | 全面個別 | 範囲個別 | 上記のJavaScriptを改造。画像ではなく、複数の文字がランダムに動きます。色、サイズ、透過がランダムに指定可。 |
◇ぱーぷりんの溜まり場 ◆ふわふわ・メニュー ◆ぱーぷりん・メニュー ◆Kurt Grigg・メニュー ◆花火・メニュー ◆中心点・メニュー
◆Kurt Grigg・メニュー◆
「Kurt Grigg名義」のJavaScriptは「マウスストーカー」「降る上る」等、たくさんあります。そして「ふわふわ」関連もたくさんあります。
その中の「中心点・メニュー」は別にまとめましたが、それ以外の「Kurt Grigg名義」の「ふわふわ」です。
全件グローバル変数を削除済み：2017/06/25
| 蝶が舞う | １匹の蝶が、所狭しと激しいランダム移動。サイトのマスコットみたいなモノをを飛ばしてもいいかも。原本へのリンク有り。 |
| CSSアニメの魔女が舞う | 上記を改造。「舞う」画像に、CSSアニメの透過、回転、サイズ変化等を付けてみました。変化の指定はCSSの中で指定。 |
| サンタが飛ぶ(範囲指定) | 上記「蝶が舞う」を改造し、範囲指定ができるようにしました。修正：2015/12/16 |
| 複数の蝶が舞う | 複数画像が、回転したり反射運動したりランダム浮遊します。古いブラウザ対応分を削除して、HTML5用に改造。 |
| 複数のキラキラ踊る(範囲) | 上記「複数の蝶が舞う」を改造し、範囲指定ができるようにしました。修正：2016/01/26 |
| スライド苺が踊る | １個の苺が、所狭しとランダム移動して蝶になる。GIFアニメ画像ではなく高速のスライドショー使用でGIFアニメっぽく見せてます。 |
| CSSアニメ怪物スライドで会話 | 上記のスライド速度を遅くし、ハロウィンの怪物たちが次々登場、CSSアニメの透過、回転、サイズ変化有り。スライドショーはコメント付き。 |
| youtubeに文字が飛ぶ（範囲） | １個の文章（文字）が、スライドショーをしながら枠線で囲まれた領域の中を踊る、範囲指定です。 |
◇ぱーぷりんの溜まり場 ◆ふわふわ・メニュー ◆ぱーぷりん・メニュー ◆Kurt Grigg・メニュー ◆花火・メニュー ◆中心点・メニュー
◆花火・メニュー◆
花火関連のJavaScriptです。最近のJavaScriptの花火と言えば、「canvas」を使用したプログラミングを楽しむ花火が有名です。
しかしコピペがモットーの当サイトで御紹介するのは、あくまでもサイト閲覧を楽しんでもらうための花火のJavaScriptです。
動画ではない、この手作り感が楽しいです。
全件グローバル変数を削除済み：2016/06/07
| 打上げ花火(画像) | 画像使用の打ち上げ花火。複数画像が同時に表示されます。ブラウザIE専用だった原本を、他のブラウザでも動作するよう改造。今回はアニメGIF画像を使用。 |
| 打上げ花火(画像)１回毎変化 | 上記の打ち上げ花火の画像が、１回毎に変化します。 |
| 連発花火(div)kurt.grigg | 花火が立て続けに上がります。光点のサイズ指定を追加。新ソースです。原本リンク有り。 |
| 連発花模様(div)kurt.grigg | 上記を改造。花火というよりも、花弁の透き通った花が連続で開いているように見えるJavaScript。 |
| 複数の連発花火(div)kurt | 上記の「連発花火」を外部jsにして、同ページで複数使用。原本リンク有り。 |
| 同時発射花火(画像) | 複数の画像の花火が同時に発射される、とても美しいJavaScriptです。原本を最新ブラウザ対応へ。 |
| 同時発射花火ランダム(画像) | 上記を改造しました。同時発射の花火をランダムで選択し、多くの種類の花火を楽しむことができます。 |
| 同時発射花火(文字) | 上記の「同時発射花火(画像)」の画像を文字に変更しました。複数の文字の花火が同時に発射される、JavaScriptです。 |
| 同時発射花火ランダム(文字) | 上記を改造しました。同時発射の文字種類をランダムで選択し、多くの種類の花火を楽しむことができます。 |
| 打上げ花火(div) | 原本にCSSの角丸指定を追加して、丸い粒子の虹色の花火が上がります。円形以外に傾いた楕円も打上げ。原本サイトへのリンク有り。 |
| 打上げ花模様(div) | 上記を改造。花火というよりも、花弁の透き通った花が連続で開いているように見える打上げ花火のJavaScript。 |
◇ぱーぷりんの溜まり場 ◆ふわふわ・メニュー ◆ぱーぷりん・メニュー ◆Kurt Grigg・メニュー ◆花火・メニュー ◆中心点・メニュー
◆中心点・メニュー◆
画像の動きが中心点を基準に、広がったり、噴き出したり、クリックで弾けたり、回転したりするJavaScriptです。花火（花火は別コーナー有り）や、円運動や、噴水のような動作をします。 コーナー作成日 : 2015/04/09
| ひまわり娘 -ぱーぷりん- | 画像１個の楕円運動です。複数設定もできます。 |
| 光（文字）が噴き出す１ | 指定した場所から、自動で大量の文字が噴き出すJavaScript。文字の色、種類、サイズが複数指定可能で、透過、CSSの影指定によるボカシの指定で、とても綺麗です。 |
| 画像が噴き出す１ | 上記のJavaScriptを文字から複数の画像へ変更。今回は噴き出し位置の固定指定を選択しました。 |
| シャボン玉吹き出し | シャボン玉のように１点から画像が吹き出します。IE専用を他ブラウザ対応に改造。位置指定、重ね方、透過指定追加。 |
| 音符の文字吹き出し | 上記を改造、画像ではなく文字が吹き出します。文字にはサイズ、色、傾き、影等のランダムな装飾が可能。 |
| 音符の文字吹出し・div領域 | 上記を改造。bodyの直の画面上ではなくbodyに指定したdiv領域の中での表示。 |
| シャボン玉 -雛形倶楽部- | シャボン玉のように１点から画像が吹き出し。IE専用を他ブラウザ対応に改造。HTML5対応、複数画像、位置指定、重ね方、透過指定追加。JavaScriptのソースの中で向き変更が可能。 |
| シャボン停止開始付-雛形倶楽部- | 上記のシャボン玉吹き出しに「停止」と「開始」のボタンを付けました。 |
| 星の文字吹出 -雛形倶楽部- | 上記を改造、画像ではなく文字が吹き出します。文字にはサイズ、色、傾き、影等のランダムな装飾が可能。 |
| 光輪踊る(背景色)kurt.grigg | 背景色の色変化による光点のリングが飛び回ります。以前『その他』で掲載していた分を移動。古いブラウザ対応分を削除し、いろいろ指定可能へ。 |
| 光輪踊る(文字色)kurt.grigg | 上記の背景色の色変化を文字の色の変化に変更。文字なので文字種類を指定できます。 |
| 光輪踊る(字CSS)kurt.grigg | 上記の光点の自動で色変化を削除し、文字のCSS変化に変更。いろいろな複数変化を指定できます。 |
| 文字の輪踊る-kurt.grigg- | 元々の光点の自動で色変化を削除し、回転する文章に変更。視認性のために、変化指定はあまり多くできません。別作成の、拡大縮小の動作追加の JavaScript もありません。 |
| 画像の輪踊る-kurt.grigg- | 元々の光点の自動で色変化を削除し、回転する画像に変更。画像実寸が少し大きめの時は、調整可能です。 |
| 光輪踊る(背景色)拡大縮小 | 光輪踊る(背景色)kurt.grigg に、拡大縮小の動作を追加。 |
| 光輪踊る(文字色)拡大縮小 | 光輪踊る(文字色)kurt.grigg に、拡大縮小の動作を追加。 |
| 光輪踊る(文字CSS)拡大縮小 | 光輪踊る(文字CSS)kurt.grigg に、拡大縮小の動作を追加。 |
| 画像の輪踊る(拡大縮小)並ぶ | 画像の輪踊る-kurt.grigg- に、拡大縮小の動作を追加。一つの輪に複数の画像を並んで表示します。2015/05/14：width指定のミスを修正 |
| 画像の輪踊る(拡大縮小)変化 | 画像の輪踊る-kurt.grigg- に、拡大縮小の動作を追加。一つの輪は同じ画像で、縮小するたびに違う画像に変化します。 |
| ブラックホール遠ぱーぷりん | 画像が回転しながら、奥の方に遠去かっていきます。ブラックホールに吸い込まれるような感じです。入力事項を変えれば、逆に奥の方から近づくことも可能です。 |
| ハートの渦が近-ぱーぷりん- | 上記を改造。画像を文字に変更。色、透過、傾きなどをランダムに指定可能。 |