おしえて

HPビルダーのワイプについて

解決済

質問者：2021五郎蔵
質問日時：2021/12/02 23:40
回答数：1件

HPビルで”属性の変更””イフェクト”→”ワイプ（現れる）”
画像santa.gifを使って試したら確かに左からsanta.gifの画面が徐々に出て全画面表示になりました。
その時のタグが以下です・・・
非常に長い・・・

画面表示開始時間は何処なんでしょう？
非常に面倒かと思いますが、初心者を助けてください！
尚もっと簡単に出来るのなら、その方法も教えてください。

タグをコピーして貼り付けたら文字オーバーになってしまいました・・・
タグがなくとも、分かる方お願いします。

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2021/12/03 15:43

こんにちは

HPビルダーは知りません。
ですので、ソースが無ければまったくわかりようがないのですけれど・・・

＞画面表示開始時間は何処なんでしょう？
どのような方法でアニメーションを実現しているのかによります。
多分、CSSによるか、スクリプトによるかのどちらかと思われます。
（両方組み合わせている場合もあるかも知れません）
◇CSSで行っている場合
animationかtransitionで指定していると想像しますので、そこの数値が時間や速度を意味しています。

◇スクリプトで行っている場合
対象の値を変数化しているのか固定値で記されているのかで違ってきますけれど、スクリプトを読み解いて探すしかありません。
基本的には、setIntervalやsetTimeout等で繰り返しを設定している可能性が高いと思います。
その繰り返しのintervalが速度を、そのスクリプトの実行タイミングが開始時間になっているはずです。
何らかの汎用的なルーチン関数を利用しているのなら、その呼び出し引数で設定できるようになっているかも知れません。

と言っても、さっぱりわからない可能性があるので、ご説明文にある、
＞左からsanta.gifの画面が徐々に出て全画面表示になりました。
だけを元に、CSSで似た様なものを実現するごく簡単な例を作成してみました。
（当然、質問者様が行っている方法とは異なると思いますが‥）

開始時刻、実行時間は、CSSの
　animation: 15s ease 0.5s forwards hoge;
で設定しています。
開始までの遅延時間を0.5s、実行時間を15sという意味です。
各動きの所要時間は、全体の実行時間に対する時間配分で、@keyframes内の％で指定しています。

※ なお、ここの掲示板ではurlをそのまま記述するとリンクに変更されてしまうため、スクリプトから再設定するようにしてありますが、直接記入すればスクリプトの必要はありません。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Santa</title>
<style>
html, body { height:100%; margin: 0; }
#hoge img {
position: absolute;
width: 68vmin; height: 71vmin;
top: 50%; left: 0;
transform: translate(-100%, -50%) scale(0.25);
animation: 15s ease 0.5s forwards fuga;
}

@keyframes fuga{
0%{ top: 10%; left:0; transform: translate(-100%, -50%) scale(0.25); }
60%{top: 70%; left: 80%; transform: translate(-50%, -50%) scale(0.25); }
65%{top: 70%; left: 20%; transform: translate(-50%, -50%) scale(0.25) rotate(-360deg); }
75%{top: 50%; left: 40%; transform: translate(-50%, -50%) scale(0.25); }
100%{top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); }
}
</style>
</head>
<body>

<div id="hoge">
<img src="oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/7/543127283_61a8d9481d789/M.gif" alt="" />
</div>

<script>
const e = document.querySelector('#hoge img');
e.src = 'h' + 'ttp://' + e.getAttribute('src');
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
ビルダーの内容を字数を超えない様に分割して書き込みますので検討願います。
<title></title>
<script>

</script>
<script type="text/javascript" language="JavaScript">
<!--HPB_SCRIPT_VFX_40
//
// (C) 2010 株式会社ジャストシステム
//
var layerId = 0; var func = 1; var effectPattern = 2;
var startTime = 3; var nextLayerIdx = 4; var nextStartTime = 5;
var intervalTime = 6; var repeat = 7; var endVisibility = 8;
var posX = 9; var posY = 10; var posStartX = 11;
var posStartY = 12; var posEndX = 13; var posEndY = 14;
var stepX = 15; var stepY = 16; var frame = 17;
var accelerationX = 18; var accelerationY = 19; var angle = 20;
var fixedX = 21; var fixedY = 22;