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

No.1ベストアンサー
- 回答日時:
こんにちは
回答がつかないようですので・・・
>これがどのようなスクリプトを使っているのか知りたいのですが、~~
スクリプト自体はブラウザの開発タブなどを利用すれば見ることは可能です。
とは言っても、スクリプトだらけなので何が何なのかを調べるのが面倒です。
表示部分の大部分(HTML要素やSVG)をスクリプトから生成しているようですので・・
何かのライブラリ等を利用していることを期待してのご質問ではないかと推測しますが、どうやらそうではなさそうですね。
スライドショーの仕組み自体は、概略、以下のようになっています。
(通常のスライダーとほぼ同じですが、切替部分を波型にしている点が少し違いますね)
・全体を楕円形(=外枠)のclip-pathでクリップした中に、2枚の画像(一部は動画)を重ねて表示しておいて、以下のアニメーションを同時に行い、これを繰り返しています。
①上側の画像を微拡大、下側の画像を微縮小
②上側の画像をclip-pathで切り取り、表示範囲を縮小してゆく
この結果、下にあった画像に切り替わったように見えるという仕組みです。
①、②が終わったところで、画像を入れ替えて再度繰り返しているといったところでしょうか。
画像自体はdiv要素の背景画像として設定していて、外枠や②のクリップにはSVGのパスを利用しているようです。
アニメーションそのものはCSSでも実現できる内容なので、(多分)CSSアニメーションであろうと推測します。
もしも、調べてみる気がおありなら、ご質問の対象部分は、
#__nuxt > #__layout > .l-app > main .p-index-first__slider-container
内にありますので、そこを手始めの手掛かりになさると宜しいでしょう。
ただし、実際に処理を行っているスクリプトを探すとなると、順に解読してゆくしかありませんけれど、スクリプトの数が多すぎるのでかなり面倒であろうと推測します。
一方で、仕組みがわかれば、類似のものを自作してしまった方が遥かに簡単なのではないでしょうか。
その方が、自由な形状や好きなタイミングにすることもできますので。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- JavaScript イラストレーター、縦中横のショートカットをスクリプトを使って作成する方法 1 2023/04/19 11:15
- シューズ・ブーツ 以前見かけたレインブーツを探しています。 ・写真のように上部後方に革のタグがついている ・写真の物よ 3 2022/06/11 01:26
- WordPress(ワードプレス) ホームページの階層について 5 2022/11/21 14:48
- Google 翻訳 ネット上の数枚にわたるPDFの和訳 2 2022/11/05 21:25
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- SEO ホームページを作る際の質問です 1 2023/06/07 18:50
- その他(病気・怪我・症状) 各種の癌について全国の病院の手術件数の統計データを定期的に公開しているサイトはどこでしょうか。 1 2022/11/20 20:25
- YouTube youtubeのTOPページの動画紹介画面の並び方を変えたいです。 1 2023/03/18 09:25
- iPad ipadパワポ スライドショーのページジャンプについて 1 2022/10/18 06:37
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンを押したあとに画像を表...
-
スマホ上で、左右スワイプで次...
-
ラジオボタンを複数選択したと...
-
jsonテキストデータの並び替え...
-
Adobe acrobat proでフォームを...
-
画面に表示したらアニメーショ...
-
2025年相性がいい人のサイトの...
-
jQueryでのレスポンシブが綺麗...
-
jsで質問です。 formをsubmitし...
-
二次元配列を使って順位をだす...
-
【JS】selectでchangeした時の...
-
sessionStorageを調べています。
-
jsで質問です。 ボタンが二つ存...
-
ブックマークレットについて
-
タグを教えてください。
-
CookieをWebStoeageに変える
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
PowerShellでのエラー出力の読...
-
jQueryを使ってドラムロールを...
-
VBスクリプト---アプリの終了に...
-
レジストリの設定をすぐに反映...
-
ホームページにブラウザから書...
-
ブラウザの JavaScript 設定を...
-
エロゲにおける『スクリプト入...
-
サーバーからクライアントのMAC...
-
マウスオン&アウトで小画面を...
-
メールアドレス必須のCGI
-
携帯用の占いサイトを作成したい
-
日付表示
-
CGIの改造をしてくれるサイトを...
-
スクリプトで「タスクが終了」o...
-
イラストレーター、縦中横のシ...
-
FORMを使ってperlでファイルへ...
-
CGIの修正をHPビルダーで...
-
WindowsのPowerShellで SIGNAL...
-
掲示板を複数設置するには?
-
質問に答えて、その人のタイプ...
おすすめ情報

