ページ上部のスライドショーのスクリプトが何か知りたいのですが教えていただけないでしょうか？

こちらのサイト「https://snaq.me/」ですが、TOPページの上部にスライドショーがあります。これがどのようなスクリプトを使っているのか知りたいのですが、ご存じでしたら教えていただけないでしょうか？あれこれ調べてはいますが、見当がつきません。
宜しくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2022/01/08 11:09

こんにちは

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

＞これがどのようなスクリプトを使っているのか知りたいのですが、～～
スクリプト自体はブラウザの開発タブなどを利用すれば見ることは可能です。
とは言っても、スクリプトだらけなので何が何なのかを調べるのが面倒です。
表示部分の大部分（HTML要素やSVG)をスクリプトから生成しているようですので・・

何かのライブラリ等を利用していることを期待してのご質問ではないかと推測しますが、どうやらそうではなさそうですね。
スライドショーの仕組み自体は、概略、以下のようになっています。
（通常のスライダーとほぼ同じですが、切替部分を波型にしている点が少し違いますね）

・全体を楕円形（＝外枠）のclip-pathでクリップした中に、2枚の画像（一部は動画）を重ねて表示しておいて、以下のアニメーションを同時に行い、これを繰り返しています。
　①上側の画像を微拡大、下側の画像を微縮小
　②上側の画像をclip-pathで切り取り、表示範囲を縮小してゆく
この結果、下にあった画像に切り替わったように見えるという仕組みです。
①、②が終わったところで、画像を入れ替えて再度繰り返しているといったところでしょうか。
画像自体はdiv要素の背景画像として設定していて、外枠や②のクリップにはSVGのパスを利用しているようです。
アニメーションそのものはCSSでも実現できる内容なので、（多分）CSSアニメーションであろうと推測します。


もしも、調べてみる気がおありなら、ご質問の対象部分は、
　#__nuxt > #__layout > .l-app > main .p-index-first__slider-container
内にありますので、そこを手始めの手掛かりになさると宜しいでしょう。
ただし、実際に処理を行っているスクリプトを探すとなると、順に解読してゆくしかありませんけれど、スクリプトの数が多すぎるのでかなり面倒であろうと推測します。
一方で、仕組みがわかれば、類似のものを自作してしまった方が遥かに簡単なのではないでしょうか。
その方が、自由な形状や好きなタイミングにすることもできますので。

この回答へのお礼

＞何かのライブラリ等を利用していることを期待して
おっしゃる通りです。
少し考えてみます。
ありがとうございました。

お礼日時：2022/01/08 14:39