CSS X溢叶白Space
CSS X Overflow Leaves White Space
我目前正在创建一个在线作品集,并尝试使用视差 CSS 来获得漂亮的滚动效果。我有一个 class,它将某些样式和格式应用于不同部分的 div。
长话短说,为了避免视差溢出使页面太宽,我隐藏了 x 溢出,以便将其缩短为视口宽度。但是,这会在屏幕左侧留下一些空白,这真的很烦人。
* {
padding: 0;
margin: 0;
}
body {
font: 100% / 1.5;
}
#homeSplash {
background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
background-size: cover;
color: white;
text-align: center;
}
#title {
background: rgba(255, 255, 255, 0.75);
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3,
h4,
h1 {
padding: 10px;
}
.parallax {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 500px;
/* fallback for older browsers */
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
#group2 {
z-index: 3;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">
<div id="title">
<h1>Welcome</h1>
<h3>I am Luca Passariello</h3>
<h4>Welcome to my Portfolio</h4>
</div>
</div>
</div>
<div id="homeSplash" class="parallax__layer parallax__layer--back">
</div>
</div>
</div>
我试过使用 width: 100vw
,但对解决问题没有任何帮助。任何帮助将不胜感激。
注意 - 实时站点是 here
将 width:100vw
添加到 .parallax__group
解决了问题。
*{
padding: 0;
margin: 0;
}
body{
font: 100% / 1.5;
margin: 0;
}
#homeSplash {
background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
background-size: cover;
color: white;
text-align: center;
}
#title{
background: rgba(255, 255, 255, 0.75);
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3, h4, h1{
padding: 10px;
}
.parallax {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 500px; /* fallback for older browsers */
height: 100vh;
width: 100vw;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
#group2 {
z-index: 3;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">
<div id="title">
<h1>Welcome</h1>
<h3>I am Luca Passariello</h3>
<h4>Welcome to my Portfolio</h4>
</div>
</div>
</div>
<div id="homeSplash" class="parallax__layer parallax__layer--back"
</div>
</div>
</div>
</div>
我目前正在创建一个在线作品集,并尝试使用视差 CSS 来获得漂亮的滚动效果。我有一个 class,它将某些样式和格式应用于不同部分的 div。
长话短说,为了避免视差溢出使页面太宽,我隐藏了 x 溢出,以便将其缩短为视口宽度。但是,这会在屏幕左侧留下一些空白,这真的很烦人。
* {
padding: 0;
margin: 0;
}
body {
font: 100% / 1.5;
}
#homeSplash {
background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
background-size: cover;
color: white;
text-align: center;
}
#title {
background: rgba(255, 255, 255, 0.75);
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3,
h4,
h1 {
padding: 10px;
}
.parallax {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 500px;
/* fallback for older browsers */
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
#group2 {
z-index: 3;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">
<div id="title">
<h1>Welcome</h1>
<h3>I am Luca Passariello</h3>
<h4>Welcome to my Portfolio</h4>
</div>
</div>
</div>
<div id="homeSplash" class="parallax__layer parallax__layer--back">
</div>
</div>
</div>
我试过使用 width: 100vw
,但对解决问题没有任何帮助。任何帮助将不胜感激。
注意 - 实时站点是 here
将 width:100vw
添加到 .parallax__group
解决了问题。
*{
padding: 0;
margin: 0;
}
body{
font: 100% / 1.5;
margin: 0;
}
#homeSplash {
background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
background-size: cover;
color: white;
text-align: center;
}
#title{
background: rgba(255, 255, 255, 0.75);
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3, h4, h1{
padding: 10px;
}
.parallax {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 500px; /* fallback for older browsers */
height: 100vh;
width: 100vw;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
#group2 {
z-index: 3;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">
<div id="title">
<h1>Welcome</h1>
<h3>I am Luca Passariello</h3>
<h4>Welcome to my Portfolio</h4>
</div>
</div>
</div>
<div id="homeSplash" class="parallax__layer parallax__layer--back"
</div>
</div>
</div>
</div>