HP構築での波線アニメーション区切りの実現について

実現したいこと

HP構築の際、画像のスライダーと背景画像が入っている部分の区切りを波線にし、
さらに波打つようアニメーションにしたいです。

前提

上記の画像で説明させていただきます。
灰色部分に画像のスライダーを設置し、その下にニュースを設置しています。

スライダーはslickを使用して動かしています。
ニュースがある黄色部分には背景画像が入っています。

この２つの間にある赤色部分の区切りを波線アニメーションにして波打つようにし、
かつスライダー画像もニュースの背景画像もアニメーションに合わせて波打つようにしたいです。
（分かりやすいよう区切りに赤色を入れていますが、実際は色なしです）

コード

index.html
1<main>
2<div class="slider">
3<div>
4<img src="sample.jpg" alt="画像01">
5</div>
6<div>
7<img src="sample.jpg" alt="画像02">
8</div>
9<div>
10<img src="sample.jpg" alt="画像03">
11</div>
12</div>
13<div class="news">
14<p>★ニュース</p>
15<ul>
16<li>2025/2/17　ここに最新のニュースが入ります。</li>
17<li>2025/2/17　ここに最新のニュースが入ります。</li>
18</ul>
19</div>
20</div>
21</main>

style.css
1.news{
2background-image: url(background.png);
3background-size: cover;
4}

試したこと

mask-imageでのアニメーションなし波線マスクと、色付きの波線アニメーションをすることは出来ました。
ただ、上記ですと望む表現ではないので、何か方法がないか投稿させていただきました。

補足情報（FW/ツールのバージョンなど）

WordPress 6.8.1
PHP 8.2.29

よろしくお願いいたします。

yambejp

2025/12/18 00:03

「なみうつ」のイメージは人によって異なります。具体的に参考にされるサイトはありますか？

south-kuro

2025/12/18 01:55

コメントありがとうございます。こちらのサイトが一番イメージに近いです。 https://janohire.co.jp よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

mask-positionをアニメーションさせるのはどうでしょうか。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/vubj82ta/

css
1.news {
2    translate: 0 -50px;
3    background-image: url(http://placehold.jp/150x150.png?text=background.png);
4    background-size: cover;
5    mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 97 600 9999"><path d="M 0,100 Q 50,95 100,100 t 100,0 100,0 100,0 100,0 100,0 v 9999 h -600 Z"></path></svg>');
6    mask-repeat: no-repeat;
7    mask-size: 300%;
8    animation: test 3s infinite linear;
9}
10
11@keyframes test {
12    from {
13        mask-position: 0% 0;
14    }
15
16    to {
17        mask-position: 100% 0;
18    }
19}