質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1356閲覧

ループする複数画像のスライドショーとパララックスを併用する方法を教えていただきたいです

gorori182

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2023/06/01 05:22

実現したいこと

  • ループする複数画像のスライドショーと水平パララックスの併用

発生している問題

以下のサイトのトップページで行われている「複数の画像を横方向にスライドさせつつその画像を水平方向にパララックスさせる」動作をそっくりそのまま実装したいのですが(JavaScript?)、方法がわかりません。
どなたかご教授いただきたいです。
https://www.marketenterprise.co.jp/

該当のソースコード

HTML

1ソースコード 2 <div class="p-top-fv__slide"> 3 <div class="slide__wrap" style="transform: translate3d(XXXXXpx, 0px, 0px);"> 4 5 6 <div class="slide__group js-container"> 7 <div class="item js-item is-visible"> 8 <div class="item__img js-img-wrap" style="transform: translateX(XXXXXpx);"> 9 <img src="~~~" width="~~~" height="~~~"> 10 </div> 11 </div> 12 13 <!-- 画像要素(js-item)が合計6個ある --> 14 〜〜〜 15 </div> 16 17 <!-- スライド要素(js-container)が合計2個ある --> 18 <div class="slide__group js-container"> 19 〜〜〜 20 </div> 21 22 </div> 23 </div>

試したこと

・.slide__wrapクラスと.item__imgクラスのtranslateをJSで制御しているのだと思いますが、該当のファイルが見つけられませんでした。
・またスライドショープラグインであるSwiperのパララックス機能を使って再現しようとしましたが、同機能ではswiper-slide-activeクラスが付与される前後しかパララックスしないためうまくいきませんでした。
・「スライドショー パララックス」などでググりましたが、先述のサイトのような実装を解説しているページが見つけられませんでした。

loving👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

CSS Animation を使って、それらしいサンプルを作ってみました。ご参考に。

CSS Slide Show Parallax Sample

投稿2023/06/01 06:52

hatena19

総合スコア33715

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gorori182

2023/06/01 14:42

CSSでの対応は考えがまとまらず詰まっていたところでした…! ありがとうございます!
guest

0

ベストアンサー

コードを眺めてみた感じ、GSAP だと思います。
「carousel parallax」で軽くググってみたところ、参考になりそうなコードがあったのでご覧になってはいかがでしょうか。

Parallax Photo Carousel
Parallax math help - GSAP - GreenSock

投稿2023/06/01 06:56

Lhankor_Mhy

総合スコア36115

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gorori182

2023/06/01 14:43

GSAP、未知のライブラリでした…! ざっと見た感じ便利そうなのでこれを機に触ってみます、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問