Q&A
実現したいこと
①スクロールに応じて、コンテンツの拡大と縮小をしたいです。
参考サイト（https://realation.jp/）
トップページを少しスクロールをすると、右側から動画がスクロールに応じて、拡大と縮小されております。
このような動きは、HTML・CSS・JavaScriptで表現することは可能でしょうか？
②スクロールに応じて、スライダー画像の切り替え後に下のコンテンツに移動したいです。
参考サイト（https://reel-re.co.jp/）
トップページを少しスクロールをすると、スライダーが表示されております。
こちらもスクロールに応じてスライダーの画像が切り替わり、スライダーの表示が終わると下のコンテンツに移動します。
このような動きは、HTML・CSS・JavaScriptで表現することは可能でしょうか？
どちらも、HTML・CSS・JavaScriptで表現できない場合は、何の言語を使用すればよろしいでしょうか？
また、HTML・CSS・JavaScriptで表現できる場合はどのように対応すればよろしいでしょうか？
まずは、HTML・CSS・JavaScriptで対応可能かどうかをご教授いただけますと幸いです。
お忙しいところ恐れ入りますが、ご確認の程よろしくお願いいたします。
前提
現在、WordPressでコーディング中です。
発生している問題・エラーメッセージ
該当のソースコード
HTML
<div class="report__swiper swiper js-report-swiper">
<div class="report__wrapper swiper-wrapper">
<div class="report__slide report__slidePic swiper-slide">
<img src="画像のリンク" alt="タイトル">
</div>
<div class="report__slide report__slidePic swiper-slide">
<img src="画像のリンク" alt="タイトル">
</div>
<div class="report__slide report__slidePic swiper-slide">
<img src="画像のリンク" alt="タイトル">
</div>
<div class="report__slide report__slideArrow swiper-slide">
<a href="" class="report__slideArrow-link">
<img src="画像のリンク" alt="ボタン">
</a>
</div>
</div>
</div>
css
.report__swiper {
height: 100vh;
margin-top: rem(50);
}
.report__slide {
position: relative;
}
.report__slidePic img {
aspect-ratio: 1185/667;
object-fit: cover;
}
.report__slideArrow-link {
display: block;
width: 80%;
}
JavaScript
//swiper
var mySwiper = new Swiper ('.js-report-swiper', {
effect: 'slide',
slidesPerView: 1,
mousewheel: true,
freeMode: {
enabled: true,
sticky: true,
},
})
試したこと
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
①、②ともに可能です。
スクロールに応じてコンテンツの拡大・縮小を実現するためには、JavaScriptを使用してスクロール位置を検出し、それに基づいてコンテンツの拡大・縮小を制御することができます。例えば、window.scrollYを使用して現在のスクロール位置を取得し、それに応じてコンテンツの拡大・縮小を行うCSSプロパティを設定することができます。
また、CSSのtransformプロパティを使用しても実現可能です。
①のサイトはtransform、②のサイトはwindow.scrollYを使用しているようです。
投稿2023/04/17 13:10
総合スコア64
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/04/18 20:33
2023/04/19 04:13
2023/04/21 22:20