-1
これは私の最初の質問です！視差スクロールCSS
私は
background-attachment: fixed;もこのプロパティが割り当てられている<div>で発生することで問題を抱えてきた： -transform: translateZ(-1px) scale(2);。実際には最初のスライドでは、背景画像は正しく表示されますが、残りのスライドでは画像は表示されません。また、クリックまたはドラッグするとスクロールバーが機能しません。
私はGoogleで何度も試したことがありますが、それは2日間です。やっと私はStackoverflowを試しました。なぜなら、私が望む特定の答えを得ることができなかったからです。
私はいくつかのリンクを逃した場合は助けてください、私を許してください。
ここで私が作っているページです - http://mynk-9.github.io/test/
を[編集]今が、私はまた、コードを追加しました。
<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Parallax Scrolling Effect</title>
\t \t <style>
\t \t \t body {
\t \t \t \t margin: 0px;
\t \t \t \t padding: 0px;
\t \t \t }
\t \t \t div.parallax-page {
\t \t \t \t position: relative;
\t \t \t \t height: 100vh;
\t \t \t \t width: 100vw;
\t \t \t \t overflow-y: auto;
\t \t \t \t overflow-x: hidden;
\t \t \t \t perspective: 1px;
\t \t \t \t -webkit-perspective-origin-x: 50%;
\t \t \t \t perspective-origin-x: 50%;
\t \t \t }
\t \t \t div.parallax-page > div.group {
\t \t \t \t position: relative;
\t \t \t \t height: 100%;
\t \t \t \t width: 100%;
\t \t \t \t left: 0px;
\t \t \t \t top: 0px;
\t \t \t \t
\t \t \t \t -webkit-transform-style: preserve-3d;
\t \t \t \t transform-style: preserve-3d;
\t \t \t }
\t \t \t div.parallax-page > div.group {
\t \t \t \t margin-bottom: calc(100vh);
\t \t \t }
\t \t \t div.parallax-page > div.group:last-child {
\t \t \t \t margin-bottom: -25vh;
\t \t \t }
\t \t \t div.parallax-page > div.group > div.background {
\t \t \t \t transform: translateZ(-1px) scale(2);
\t \t \t \t position: fixed;
\t \t \t \t top: 0px;
\t \t \t \t left: 0px;
\t \t \t \t width: 100vw;
\t \t \t \t height: 100%;
\t \t \t \t /*background-attachment: fixed;*/
\t \t \t }
\t \t \t div.parallax-page > div.group > div.slide {
\t \t \t \t position: absolute;
\t \t \t \t width: 50%;
\t \t \t \t height: 50%;
\t \t \t \t top: 50%;
\t \t \t \t left: 50%;
\t \t \t \t transform: translate(-50%, -50%);
\t \t \t \t background-color: rgba(255,255,255,0.5);
\t \t \t }
\t \t \t
\t \t \t div.parallax-page::-webkit-scrollbar {
\t \t \t \t /*display: none;*/
\t \t \t }
\t \t \t /* using formula -> scale = 1 + (translateZ * -1)/perspective */
\t \t </style>
\t </head>
\t
\t <body> \t \t
\t \t <div class="parallax-page">
\t \t \t <div class="group">
\t \t \t \t <div class="background" style="background-image: url('sample-wallpaper.svg');"></div>
\t \t \t \t <div class="slide">
\t \t \t \t \t <h1 style="text-align: center;">A magical scroll!!</h1>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="group">
\t \t \t \t <div class="background" style="background-image: url('sample-wallpaper-2.svg');"></div>
\t \t \t \t <div class="slide">
\t \t \t \t \t <h1 style="text-align: center;">A magical scroll!!</h1>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="group">
\t \t \t \t <div class="background" style="background-image: url('sample-wallpaper-3.svg');"></div>
\t \t \t \t <div class="slide">
\t \t \t \t \t <h1 style="text-align: center;">A magical scroll!!</h1>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="group">
\t \t \t \t <div class="background" style="background-image: url('sample-wallpaper-5.svg');"></div>
\t \t \t \t <div class="slide">
\t \t \t \t \t <h1 style="text-align: center;">A magical scroll!!</h1>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </body>
</html>
div.parallax-ページ> div.group> div.background'あなたは '幅を持っている'の場合：スクロールバーの上に重なって100vw' *マウスから隠す*。 '100％'に変更すると、スクロールバーが機能します。それ以外の場合は、Chromeで背景が魅力的です。 – Octopus
こんにちはMayankさん、スタックオーバーフローへようこそ！質問に直接コードを追加できますか？または少なくとも、コードの "MCVE"ですか？ – TylerH
@Octopusあなたが言ったことを、私は100vwではなく100％にしましたが、今は小さなものです。 div.parallax-page> div.group> div.background'に 'left：-1％'のプロパティを与えようとしましたが、ギャップは消えましたが、今では –