急いでいます！

ホームページ

解決済

質問者：2021五郎蔵
質問日時：2024/12/28 20:20
回答数：1件

来年正月のホームページをホームページビルダーで作成中です。（初心者）
エフェクトで右から左にフェードアウトする様に「本年も宜しくお願いします.png」のメッセージを挿入し”繰り返し”で”遅い”で設定しましたが、それっでも流れるのが早すぎるので、それをもっとゆっくり流れる様にしたいのです。
何処を変えれば遅く流れる様になりますか？
またホームページビルダーのタグでは変えられないのであれば、どの様なタグで何処を操作すれば速度を調整出来るか教えてください。

通報する

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

質問の本文を隠す

回答 (1件)

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

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2025/01/02 00:42

こんばんは。

回答がつかないようですので・・・

ホームページビルダーがどのように実現しているのかは知りませんけれど、ご質問の動作がイマイチよくわかりません。

＞画像をエフェクトで右から左にフェードアウトする
ということのようですが、通常「フェードアウト」は段々薄くなって消えてゆく動作をいうと思います。
対象が画像なので、全体を一律にフェードアウトするなら、透明度（=opacity）をアニメーションするだけで良いので簡単です。
（「画像フェードアウト CSS」あたりをキーに検索すれば見つかります）

一方で、ご質問では「右から左に」とあるので、一律ではなく右側から順に消えてゆくような動作を意図しているものと推測しました。
対象画像の背景が単色であれば、フェードアウトとは逆の発想になりますが、背景色と同色のカバーを右から左へスライドして覆うようにしてあげる方法を取る方が簡単です。
（こちらの場合は、「スライドアニメーション CSS」あたりで検索すれば見つかるでしょう）

対象画像の背後に画像などの単色でないものがある場合には、上記のような方法も使えないので、対象画像を「不均一に透明化してゆく」ようなことをしなければなりません。
それなりに複雑になると考えられますが、一例としてグラデーションのマスクをかけ、「マスクを移動する」アニメーションを行う方法で考えてみました。

原理としては、マスク用の図形として
　白白白白灰灰黒黒黒黒
のようなものを作成しておき、初期状態では対象画像が白（＝全面表示）の部分に納まるようにしておいて、マスクを左へ移動することで黒（＝非表示＝透明）となるように変化するという考え方です。
上記の図形で「灰」と表示した部分をグラデーションにしておくことで、徐々に消えてゆくように見えるので、フェードアウトの効果が得られます。

＞それをもっとゆっくり流れる様にしたいのです。
以下の簡単な例では、アニメーション全体の時間を自由に設定可能です。
（下例では10秒（=dur:10s）を1サイクルとし繰り返す設定にしています）
時間配分を変えたければ、マスク用の図形の灰色部分の長さや位置を調節することで全体の雰囲気を変えることが可能です。

「繰り返し」とのことですが、次に表示する際にどうするのか不明なので、以下の例ではフェードアウトはしますが、再表示の際にはいきなり画像全体が表示されます。
原理は上記のような方法なので、いろいろ変えればそれなりのことはできるでしょう。
（chrome および fx にて確認）

※ 画像のurlはご自身の環境に合わせて変更してください。

<!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>
#wrap {
display: inline-block;
padding: 20px 80px 100px;
/* 背景画像 */
background-image: url("./img/bgimage.jpg");
background-size: cover;
}

#target {
mask: url(#mask);
}
</style>
</head>
<body>

<div id="wrap">
<img src="./img/sample.png" id="target" alt="fadeout画像">
</div>

<svg>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" offset="0.85"/>
<stop stop-color="black" offset="1" />
</linearGradient>
<g id="rect">
<animateTransform
attributeName="transform" type="translate"
from="0 0" to="-3 0" dur="10s" repeatCount="indefinite" />
<rect x="0" y="0" width="2" height="1" fill="url(#gradient)" />
<g>
</defs>

<mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<use href="#rect" />
</mask>
</svg>
</body>
</html>