プロが教えるわが家の防犯対策術！

おしえて

スクリプト

解決済

  • 質問者：2021五郎蔵
  • 質問日時：
  • 回答数：11件

ホームページビルダーで落ち葉が落ちスクリップトを作ってみました。
ビルダーでプレビューを見ると上手く葉がゆらゆら揺れて落ちていますが
名前を付けてhtmlファイルとして保存しました。

落ち葉の画像も同じフォルダーにありますが、
htmlを起動させても添付　の画面の様な静止画面表示で
動きません・・・
動く様にするには何処を修正すればよろしいのでしょうか？

そのタグは
</HEAD>
<body><span id="img01" style="position:absolute; left : 90px; top : 10px; z-index : 8;"><IMG src="icho.gif"></span>
<span id="img02" style="position:absolute; left : 161px; top : 21px; z-index : 5;"><IMG src="icho2.gif"></span>
<span id="img03" style="position:absolute; left:30px; top:10px; z-index : 6;"></span>
<span id="img04" style="position:absolute; left:40px; top:10px; z-index : 7;"><IMG src="ha3.gif"></span>
<span id="img05" style="position:absolute; left : 172px; top : 147px; z-index : 2;"><IMG src="ha2.gif"></span>
<div style="width : 60px;height : 12px;top : -1px;left : -1px;
position : absolute;
z-index : 4;
" id="Layer1"><Script Language='JavaScript'>
<!--
//*********************************
//Miko & Mako yumemail(taterandam)
//*********************************
var dx0, xp0, yp0, iw0,ih0 ;
var am0, stx0,sty0,pxo0, pyo0;
var i0, dw = 0, dh = 0;
var kosu0=5;
dx0 = new Array();
xp0 = new Array();
yp0 = new Array();
am0 = new Array();
pxo0 = new Array();
pyo0 = new Array();
stx0 = new Array();
sty0 = new Array();
tow0 =0
bow0 =1
iw0 = new Array( 0, 29, 49, 29, 34, 46)
ih0 = new Array( 0, 30, 46, 30, 32, 46)
var sukudo0=100;
function startpos0() {
dw = document.body.clientWidth;
dh = document.body.clientHeight;
for (i0 = 1; i0 <= kosu0; ++ i0) {
name0='img0'+ i0;
dx0[i0] =0;
xp0[i0] = Math.random()*(dw*bow0-dw*tow0-iw0[i0])+(dw-iw0[i0])*tow0;
yp0[i0] = Math.random()*(dh-ih0[i0]);
am0[i0] = Math.random()*25;
stx0[i0] = 0.02 + Math.random()/10;
sty0[i0] = 0.7 + Math.random()*3;
moveto0(name0,xp0[i0],yp0[i0])
}
document.body.scroll = 'yes';
movegif0();
}
function moveto0(name,left,top){
document.all(name).style.pixelTop = top;
document.all(name).style.pixelLeft =left;
}

function movegif0(){
for ( i0=1;i0 <= kosu0;i0++) {
name0='img0'+ i0;
dw = document.body.clientWidth;
dh = document.body.clientHeight;
yp0[i0]+= sty0[i0];
//xp[i] = dw * 0.5;
if (yp0[i0] >(dh+document.body.scrollTop-ih0[i0])) {
xp0[i0] = Math.random()*(dw*bow0-dw*tow0-iw0[i0])+(dw-iw0[i0])*tow0;
stx0[i0] = 0.02 + Math.random()/3;
sty0[i0] = 0.7 + Math.random()*3;
yp0[i0] = 0+document.body.scrollTop;
}
yp0[i0]+= sty0[i0];
dx0[i0] += stx0[i0];
pxo0[i0]=xp0[i0] + am0[i0]*Math.sin(dx0[i0]);
moveto0(name0,pxo0[i0],yp0[i0])
}
setTimeout('movegif0()',sukudo0);
}
// End -->
</Script><Script Language='JavaScript'>
<!--
startpos0();
// End -->
</Script><IMG src="icho1.gif">
******************************以上************************
恐れ良いりますが、宜しくお願い致します。

「スクリプト」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (11件中1～10件)

参考程度に

No.1

jpg. jpge. gif


　ファイルでなくてはダメなのでは　？　　　　　　　


　
ふ
    • good
    • 0
    • 件
通報する

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



変数名がよくわからないので、動かしている計算ロジックを追いかけるのはあきらめましたが…
基本的に移動量や座標位置の計算で、計算ができていないようなので、そのあたりを再チェックなさった方が宜しそうです。

再帰呼び出しは指定時間ごとに実行されていますけれど、肝心の表示のところで表示できていません。
＞function moveto0(name,left,top){
＞document.all(name).style.pixelTop = top;
＞document.all(name).style.pixelLeft =left;
＞}
document.all()は通じるブラウザも多いとは思いますが、style.pixelTopは存在しない指定なので、CSSとしては解釈されません。（top, left などでないと無視されます）
ですので、表示に反映されることはないことになります。

以下のような感じにすれば、大抵のブラウザで動作すると思います。
const elm = document.getElementById(name);
elm.style.top = top + 'px';
elm.style.left = left + 'px';
とは言っても、moveto0に渡されるleft、topの値が毎回 NaNになっていますので、それだけでは表示に反映されることはありません。
また、上記関数でも、毎回要素を取得し直すことに意味がないので、初期に1回だけ取得しておけば済む話とは思いますが。

計算ロジックを追いかけ始めてあきらめましたが、配列内の初期値がNaNだったりUndefinedだったりしていますので、最初の初期値設定のあたりからすでに計算できていない可能性がありそうです。

※ 以下は、ご質問には直接関係ありませんけれど・・
＞document.body.scroll = 'yes';
document.bodyという記述もあまり好ましいとは思いませんけれど、.scroll = 'yes'ってまったく意味をなしていません。（何をなさりたいのか意味が不明）
また、ご提示のソースだと、body直下の要素が全てposition:absoluteになっているので、スクリプト内でbodyの高さを取得しようとしても、高さは0となりますけれど、それは認識なさっていますか？

ここまで作ってあるので今更ではありますけれど、葉っぱをオブジェクト化しておいて、1枚の動きができるものを作成すれば、後はインスタンスを増やすだけで済むので、全体のスクリプトもすっきりすると思いますけれど・・・


あと、勝手な感想を書かせていただけるなら、画像を多少回転させながら落とした方が「ゆらゆら感」が増すのではないかと想像してしまいました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

説明ありがとうございます。
70歳過ぎてからHP始めたので、中々理解できません・・・
色々ネットを見ても、CSSとやらを使った物がありますが
そのCSSの使い方も分からないので、とりあえずスクリプトになりましたが、
ここまでが限度に思えます。

もしも宜しかったら、サンプルタグを書いて頂けると
嬉しいのですが・・・
宜しくお願いします。

通報する
お礼日時：2021/11/10 18:14

No.3

きっとfujillin さんが、すっばらしいサンプルを書いていると思いますが・・・



<!DOCTYPE html>
<meta charset="UTF-8">
<title>Test</title>

<body>
<img id="a0" src="data:image/gif;base64,R0lGODlhLQAqAKIAAP7jRvTSMvfZO/veQuS8H+zFJ/DMLv///yH5BAEAAAcALAAAAAAtACoAAAP4eLrc/tCRGau1k97NTyZdWBWZaDaGQZ6sEqRFew7CK89CfYsAQO88HzDUEw43RYAEdGQkH59CbDioDqAkgrSQMtwCOQEks+0GzmBR6lzRltfosKB6cXvbbi4cnLMOng0fG3lmZ2F+SU8fTHVvBnF9VYlJgh2OkHOSk0lXIpeGkX+bgCGffJmioz0mpoeaqkqeUoWnqLCxpbO0rq+bJoR7coiTnSLAdwrCfsvFIW4PoLzLYkdotXLYR3uY2GxAXdvW4gFAjrTiXTt5uuDtXVMtZFvm4PM3E1nr8/tSjPGL8vZVAgKw4KImBhM2UZAQ4MIFDUs8DGSQRQIAOw==">


<script>

//数学関数の名前を短くする
const
　{ floor: INT, random: RND, sin: SIN, PI } = Math, DEG = PI / 180;

//指定値に移動する関数
function L (img, x = 0, y = 0) {
　if (img) {
　　img.style.top = (y |0) + 'px';
　　img.style.left = (x |0) + 'px';
　}
}

//整数乱数の数値を返す関数
function R (n = 100, offset = 0) {
　return INT (RND () * n) + offset;
}

//初期座標を定義する関数
function init () {
　let
　　x = R (wMax),//x座標
　　y = 0,//y座標
　　d = R (dMax, 2),//落下速度
　　s = R (sMax, 10),//枯葉の揺れ幅
　　q = R (qMax, 2),//角度
　　r = 0;//角度の積算値

　return [x, y, d, s, q, r];
}

//________

const
　img = document.querySelector ('#a0'), //画像の要素を集める
　wMax = 640,//表示幅の最大
　hMax = 800,//表示高さの最大
　dMax = 5, //枯葉の落ちる速度
　sMax = 100, //枯葉の振れ幅
　qMax = 10, //角度（SIN関数用の元値）
　time = 50; //ms 更新スピード


//CSS初期化
img.style.cssText = `
　position: absolute;
　top: 0;
　left: 0;
`;


//初期化して変数に代入する
let [x, y, d, s, q, r] = init ();

function loop () {
　y += d;
　r += q;

　if (hMax < y) {
　　[x, y, d, s, r] = init ();
　}

　let
　　px = x + SIN (r * DEG) * s,
　　py = y;

　L (img, px, py);
}

setInterval (loop, time);

</script>
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます。
こちらの技量が悪いのかも知れませんが
このタグをこのままビルダーにコピーして試みましたが
銀杏の葉が1枚現れただけで動きませんでした。

通報する
お礼日時：2021/11/11 08:10

No.4

  • 回答者： sukitaro
  • 回答日時：

No3さんの回答は、全角スペースを消すと動くと思います。



教えてgooの仕様上、行頭の半角スペースが消されてしまうので、
見やすくするために全角スペースを入れられているのだと思います。

すでに素晴らしい回答が出ているので、
cssアニメーションを使う案を考えてみました。
ブラウザによりけりのようですが、たぶん動くと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ochiba</title>
<style>
body{ position:relative;}
#ochiba{
position:absolute;
top:300px;
left: 100px;
animation: fall 3s linear 0s 1 normal none,
swing 1s ease-in-out 0s 3 alternate none;
}
@keyframes fall{
from{ top: -30px; }
to{ top: 300px; }
}
@keyframes swing{
from{ left: 150px; }
to{ left:100px; }
}
</style>
</head>
<body>
<img id="ochiba" src="./icho.gif" alt="落ち葉" />
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
イチョウ葉が1枚ヒラヒラ落ちてます。
複数種の落ち葉がランダムに途切れないでで落ちる様にするには
何処をどうすれば良いのでしょうか？

現在落ち葉のposition:absolute;000

@keyframes fall{
from{ top: -30px; }
to{ top: 1000px; }

animation: fall 10s linear 0s 1 normal none
にアレンジしています。

宜しくお願いします。

通報する
お礼日時：2021/11/11 18:46

No.5

#3です


すべての全角空白は半角空白に置換してください。

最初に提示されたサンプルコードはもう古典です。
参考にするべきではない。
落ち葉１個だけのサンプルを基本形として書きました。

ところで、プログラムを理解したいのですか？
落ち葉が落ちるところを眺めていたいのですか？

それにより、動くサンプルを密かに作っている人のモチベーションが違う。
（とくにあの人の・・・オブジェクト指向的な・・・複数の・・・）
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： sukitaro
  • 回答日時：

No4です。



>複数種の落ち葉がランダムに途切れないでで落ちる様にするには
>何処をどうすれば良いのでしょうか？

すみませんが、わたしの回答はCSSだけを使った例なので、
「ランダムに」は実現できません。

なので、できることは、
あらかじめ、複数種の画像を用意して、
それらに対応するスタイルを画像枚数分書き込むことで、
いつも同じ場所に、同じ順番で落ちていくところまでです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ochiba</title>
<style>
body{ position:relative;}
.ochiba{
position:absolute;
top:-30px;
}
#ochiba0{
left: 100px;
animation: fall 3s linear 0s 1 normal forwards ,
swing0 1s ease-in-out 0s 3 alternate none ;
}
#ochiba1{
left: 200px;
animation: fall 3s linear 1s 1 normal forwards ,
swing1 1s ease-in-out 1s 3 alternate none;
}
#ochiba2{
left: 300px;
animation: fall 3s linear 2s 1 normal forwards,
swing2 1s ease-in-out 2s 3 alternate none;
}
#ochiba3{
left: 400px;
animation: fall 3s linear 3s 1 normal forwards,
swing3 1s ease-in-out 3s 3 alternate none;
}
#ochiba4{
left: 500px;
animation: fall 3s linear 4s 1 normal forwards,
swing4 1s ease-in-out 4s 3 alternate none;
}
@keyframes fall{
from{ top: -30px; }
to{ top: 300px; }
}
@keyframes swing0{
from{ left: 150px; }
to{ left:100px; }
}
@keyframes swing1{
from{ left: 250px; }
to{ left:200px; }
}
@keyframes swing2{
from{ left: 350px; }
to{ left:300px; }
}
@keyframes swing3{
from{ left: 450px; }
to{ left:400px; }
}
@keyframes swing4{
from{ left: 550px; }
to{ left:500px; }
}
</style>
</head>
<body>
<img id="ochiba0" class="ochiba" src="./icho.gif" alt="落ち葉" />
<img id="ochiba1" class="ochiba" src="./icho2.gif" alt="落ち葉" />
<img id="ochiba2" class="ochiba" src="./ha3.gif" alt="落ち葉" />
<img id="ochiba3" class="ochiba" src="./ha2.gif" alt="落ち葉" />
<img id="ochiba4" class="ochiba" src="./icho.gif" alt="落ち葉" />
</body>
</html>

なお、CSSアニメーションの書き方については、
このサイトで調べました。
https://developer.mozilla.org/ja/docs/Web/CSS/CS …

もし、
こんなに何度も同じことを書きたくない
とか、
ランダムを実現したい
といった場合は、
No3さんの回答のように、JavaScriptを使わないといけないと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

上手く落ち葉が落ちます。
私も以前やったのはこの様な感じだったんですが・・・
基本的に何枚かの同じ物を書きました。
でもCSSの書き方が分かりません。
教えて頂いたアドレス開いてみました。
参考になりそうです。

通報する
お礼日時：2021/11/11 21:00

参考程度に

No.7

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞もしも宜しかったら、サンプルタグを書いて頂けると嬉しいのですが・・・
すでにNo3様がサンプルを作成してくださっているし、そちらの方がわかり易いのではないかと思います。

No3様の例では、スクリプトでアニメーションを行う例になっていますが、別案として動きは全てCSSアニメーションで行う方法で考えてみました。
初期設定さえすれば、あとはCSSが自動的にアニメーションしてくれます。
ただ、CSSだと単調なアニメーションになり易いので、いくつかの動きを組み合わせることで、多少複雑な動きになるようにしてみました。

「葉っぱ」には画像を使いたいところですが、ここの掲示板では画像を使いにくいので（No3様はお使いになっていますけれど(笑)、角を丸めたdiv要素で代替しています。
ですので、あまり葉っぱらしく見えない点に関してはご愛嬌というところで、ご容赦願います。

動きの種類は、
　・fall　単純な垂直落下
　・swing　横揺れと角度の揺れ
　・spin　奥行き方向の動きを模して、divの高さを変えています
の3種類で、繰り返しがある関係から、いずれもCSS animationによるアニメーションにしてあります。
これで作成してみたら、イマイチだった（CSSだと揺れ幅が一定なので）ので、若干斜めに落とすことを考えて、X方向の移動だけはCSS transitionによるアニメーションにしてあります。（animationだとランダムにしにくいので）

出現位置を少し右寄りにして下方へランダムに落下するようにしてありますので、右から左へごく弱い風が吹いているようなイメージです。
上でも述べましたように、動きは全てCSS任せになっていますので、スクリプトでは初期値だけをランダムに設定するのと、落下し終わったら削除して新たに追加する処理だけを行っています。
最初にごく簡単なものを作ったら面白くなかったので、順次付け足し付けたししたりしましたので、あまり整理された形にはなっていませんけれどご勘弁を。

※ 初期設定のランダムな値や速度（時間）を適当に変更することで、動きの雰囲気は変わってきます。
※ ちなみに、要素を作成したら後は自動で動くので、オブジェクト化はしていません。
（No2の回答とは違いますが悪しからず）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body { height: 100%; }
body { position: relative; overflow: hidden; }
#leaves div::after {
content: "";
display: block;
width: 100%; height: 100%;
background-image: linear-gradient(to right top,
transparent 49%, silver 49%,
lightgray 51%, transparent 51%);
}

@keyframes fall { to { top: 110vh; }}
@keyframes swing { to { transform: translateX(0px) rotate(5deg); }}
@keyframes spin { to { height: 15px; }}
</style>
</head>
<body>
<div id="leaves"></div>

<script>
const leavesCount = 10; // 出現する葉の枚数

const
ww = document.querySelector('body').clientWidth,
RBR = (a, b) =>((Math.random()*(b-a) + a) * 10 | 0) / 10,
RBtwn = (a, b) => RBR(a, b)|0,
leaves = document.querySelector('#leaves');

for( let i = 0; i<leavesCount; i++){
setTimeout(leaveCreate, i*500 + 1);
}


function leaveCreate(){
const
elm = leaves.appendChild(document.createElement('div')),
s = elm.style;

s.width = `${RBtwn(35, 55)}px`; // サイズ幅
s.height = `${RBtwn(20, 35)}px`; // サイズ高さ
s.left = `${RBtwn(ww / 3, ww - 100)}px`; // スタート X座標
s.top = `-${RBtwn(50, 200)}px`; // スタートY座標
s.backgroundColor = `hsl(${RBtwn(30, 60)}, 85%, 55%)`; // 葉の色合い
s.borderRadius = '0% 65%';
s.position = 'absolute';

const
t = RBR(6, 9), d = RBR(0, 3), // 落下時間、落下遅延時間
a1 = `fall ${t}s linear ${d}s,`,
a2 = `swing ${RBR(1, 3)}s ease-in-out infinite alternate,`, // 揺れの速度
a3 = `spin ${RBR(3, 6)}s linear infinite alternate`; // 表示(細さ)の変化速度

s.transform = `translateX(${RBtwn(20, 80)}px) rotate(-45deg)`; // 振れ幅
s.animation = a1 + a2 + a3;
s.transition = `left ${t}s ${d}s, top ${t}s linear ${d}s`;
setTimeout(()=>{s.left = `${RBtwn(0, ww - 50)}px`;}, 1); // 落下地点のX座標
elm.addEventListener('animationend', leaveReset);
}

function leaveReset(e){
e.target.remove();
leaveCreate();
}
</script>
</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

見事に四角の物がヒラヒラ落ちる画像が見れました。
実際は落ち葉で作りたいのですが、
例えばochiba01,gif ochiba02.gif ochiba03.gifと云うように落ち葉を表現したいのですが、何処をどの様に変えたら良いのでしょうか？

通報する
お礼日時：2021/11/11 20:26

No.8ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No7です。



＞実際は落ち葉で作りたいのですが、～
「何かサンプルが欲しい」というご要望だったので、No7は適当に作成してみただけのものです。
ですので、いろいろな使い方に対応できるような汎用性を持って作成したものではありません。
むしろ、付け足しながら作ったりしたので、整理されていなくてわかりにくくなっているかも知れません。
とは言え、No7でも説明しましたように、div要素を動かすだけの仕組みになっているので、画像を同じように動かすことだけなら、対象をimg要素に変えれば簡単に実現できます。

今、No7の回答を見直したら、間違えを発見してしまいました。
（いろいろ試していたので、修正忘れです。スミマセン）
落下のアニメーションを、animationとtransitionでダブって設定していました。
animationのつもりで作成したので、以下を修正してください。
transitionの設定部分です。
　誤： s.transition = `left ${t}s ${d}s, top ${t}s linear ${d}s`;
　正： s.transition = `left ${t}s ${d}s`;
です。


さて、画像に変更する場合ですが、
＞document.createElement('div')
で、div要素を生成していますので、単純にこれをimg要素に変えれば、画像が同様の動きをするようになります。
あるいは、div要素はそのままで、背景画像として画像を指定する方法でも同様の結果になるでしょう。
（使用する画像によっては、それにマッチした動きになっているかどうかは不明ですけれど…）

その際には、divを「葉っぱ」に見せようとしているCSSは不要になるので、削除する必要があるでしょう。
例えば、backgroundColor、borderRadiusなどがそれに該当します。
また、葉脈を模した、#leaves div::after も不要になると考えられます。
（これらの指定は、削除しておかないと、画像の邪魔になる可能性があります）

サイズ等に関してはどうなさりたいのか不明なので、削除するのかスクリプトでランダムに定義したいのかがわかりません。
一応、スクリプトで設定しているCSS部分には、簡単な内容のコメントを忘備録的に付してありますので、それを参照しながらそれぞれの要否を判断してください。
No7でも説明した通り、基本的にCSSによるアニメーションなので、スクリプトでは初期値を（ランダムに）設定するだけの仕組みになっています。
CSSアニメーションの原理を理解できれば、ご自身の好みに合わせて作り直した方が宜しいかもしれません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お付き合い頂いてありがとうございました。
中々皆様の貴重ご意見を頂きましたが、
何せこちらは70後半の年寄で中々理解できませんで
皆様ははまどろっかしさを感じたと思います。

最後に今はWeb上では使えなくなった
Flashを使いそれをMP4に変換して
こんな画面になりました。
http://newnankuri.web.fc2.com/

色々ありがとうございました。
ベストアンサーに選ばして頂きます。

通報する
お礼日時：2021/11/15 13:55

No.9

  • 回答者： fujillin
  • 回答日時：

No8です。



＞例えばochiba01,gif ochiba02.gif ochiba03.gifと云うように落ち葉を表現したいのです
画像に変えるのはNo7の通りですが、動きをどのようにしたいのか全くわからないので、ごく単純化したものを作成してみました。
仕組みはNo7と全く同じままなので説明はしませんが、可変の項目を極力省きました。
スクリプトで設定している項目は、「画像の種類」と「落ち始めのX座標」だけにしてあります。
（多分、こちらならおわかりになるかと…）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body { height: 100%; }
body { position: relative; overflow: hidden; }
#leaves img {
position: absolute;
top: -10vh;
transform: translateX(-20px) rotate(15deg);
animation: fall 8s linear, swing .8s ease-in-out infinite alternate;
}
@keyframes fall { to { top: 110vh; }}
@keyframes swing { to { transform: translateX(20px) rotate(-15deg); }}
</style>
</head>
<body>
<div id="leaves"></div>

<script>
const leavesCount = 10; // 出現する葉の枚数
const imgSrcs = ['ochiba01.gif', 'ochiba02.gif', 'ochiba03.gif'];

const ww = document.querySelector('body').clientWidth;
const leaves = document.querySelector('#leaves');
for( let i = 0; i<leavesCount; i++){
setTimeout(leaveCreate, i * 700 + 1);
}

function leaveCreate(){
const elm = leaves.appendChild(document.createElement('img'));
elm.src = imgSrcs[Math.random() * imgSrcs.length | 0];
elm.style.left = (Math.random() * (ww - 40) + 20 | 0) + 'px';
elm.addEventListener('animationend', leaveReset);
}

function leaveReset(e){
e.target.remove();
leaveCreate();
}
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

確かのブロックでなく葉で落ちています。
やり取りでかなり説明不足がありました。
単に落ち葉をヒラヒラ落とせる様になればあらかじめのソースに加えれば
OKかと思いました。

MP4の動画（Music入りの銀杏並木の動画）に落ち葉を落とそうと考えました。
現在の状態だとMP4を最前線にすると、落ち葉が落ちるのが隠れてしまいます。
かといってMP4を最背面にすると、落ち葉はOKなんですが
MP4が動作しません。

少し違う方向に向かってしまいましたが、
良い対処はありますか？

それと落ち葉の落ちる位置ですが、平面的でなく
銀杏並木の奥の位置から落とす様な事は出来るんでしょうか？

今になってこんな説明をして大変申し訳ございませんが
検討して頂けたら幸いです。

通報する
お礼日時：2021/11/12 14:28

No.10

  • 回答者： fujillin
  • 回答日時：

No9です。



＞かといってMP4を最背面にすると、落ち葉はOKなんですがMP4が動作しません。
そちらで何をどうしているのか、サッパリわかりませんけれど・・・

落ち葉より前面に動画を置けば、落ち葉が見えなくなるのは当然です。
落ち葉は、position:abosluteで個々に前面に出る形になっているので、それ以外の部分は問題なく操作できるはずです。
（画像がよほど大きかったり、数が超大量だと邪魔になりますけれど）
試しに、No7、No8にMP4を追加して再生してみましたが、何の問題もなく操作が可能です。
（厳密に言えば、落ち葉がコントローラにかかった瞬間だけは、落ち葉が優先されますけれど、ほとんど問題にはならないですね。）
HTMLとCSSの仕組みを、お勉強なさってください。


＞銀杏並木の奥の位置から落とす様な事は出来るんでしょうか
何をどうしたいのかよくわかりませんけれど・・・

もしも、落下開始位置のX座標をコントロールしたいのであれば、
elm.style.left = (Math.random() * (ww - 40) + 20 | 0) + 'px';
の位置をお好みの位置になるようにすればよいでしょう。
固定値でもよいのならランダムにする必要もないので、スクリプトの上記の部分は削除して、CSS側に記述してしまえばばよいでしょう。
ほぼ中央で良いのなら
　left: 50vw;
とか。
（正確には画像の左側がほぼ中央になります。bodyのデフォルトmarginなども関係してきますので、そのあたりとの調整も必要になりますが）
そのままスクリプトで指定するのなら、
elm.style.left = '50vw';
などとしても同じことになります。
Y座標はCSSに記述してありますが、変更すれば、こちらも変えることが可能です。

・・・というか、関係する部分を調整すれば、いずれの部分であっても調整することが可能です。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報