无法摆脱css视差页面

时间：2016-02-28 08:22:27

标签： html css parallax

我似乎无法摆脱本页底部的空白区域。我尝试过常规填充/保证金解决方案。我认为这可能与我使用css透视值的事实有关。有人能想出来吗？

对不起，这是我第一次在这里发帖，所以我分享了网站和代码。 http://jesseellingson.com/Reflections_Test/ 

<body>
<div class="parallax">
    <div class="parallax__layer parallax__layer--back">
        <img src="img/site111.png">
    </div>

    <div class="parallax__layer parallax__layer--base">
        <img src="img/site222.png">
    </div>
    <div class="parallax__layer parallax__layer--text">
        <p class="title">REFLECTIONS</p>
        <p class="year">2016</p>
        <p class="info3">March 22-28</p>
        <p class="info4">Ferry Building Gallery</p>
        <p class="info5">1414 Argyle Ave</p>
        <p class="info6">West Vancouver</p>
        <p class="info7">BC V7T 1C2</p>
    </div>
    <div class="parallax__layer parallax__layer--3">
        <img src="img/site333.png">
    </div>
    <div class="parallax__layer parallax__layer--text2">
        <p class="about">
            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
    </div>
    <div class="parallax__layer parallax__layer--4">
        <img src="img/site444.png">
    </div>
    <div class="parallax__layer parallax__layer--sm">
        <div class="icons">
            <ul class="soc">
                <li><a class="soc-facebook" href="https://www.facebook.com/CapReflections/?fref=ts"></a></li>
                <li><a class="soc-twitter" href="#"></a></li>
                <li><a class="soc-instagram soc-icon-last" href="#"></a></li>
            </ul>
        </div>  
    </div>
</div>


    body, html {
    width: 100%;
    margin: 0 auto;
}

img {
    width: 100%;
}

p {
    font-family: 'Roboto', sans-serif;
    color: black;
    background: white;
    font-size: 90px;
    text-align: center;
    align-content: center;
    margin: 0 auto;

}

.title {
    margin-top: 2%;
    width: 49%;
    font-weight: 900;
    letter-spacing: .5vw;
    font-size: 6.3vw;
}

.year {
    margin-top: 1%;
    width: 8%;
    font-size: 3vw;
    font-weight: 100;
    font-style: italic;
    padding: .2%;
    padding-right: .5vw;
}

.info {
    padding: 2%;
    margin-top: 4%;
    width: 40%;
    font-size: 4vw;
    line-height: 130%;
}

.info3, .info4, .info5, .info6, .info7 {
    padding: 1%;
    margin-top: 1%;
    font-size: 3.5vw;
    white-space: nowrap;
}

.info3 {
    margin-top: 4%;
    width: 20%;
}

.info4 {
    width: 34%;
}

.info5 {
    width: 26%;
}

.info6 {
    width: 26%;
}

.info7 {
    width: 19%;
}

.about {
    margin-top: 63%;
    width: 45%;
    padding: 4%;
    font-size: 2vw;
    text-align: left;
    line-height: 135%;
}


/*///////////////SOCIAL MEDIA ICONS////////////////*/
.icons {
    margin: 0 auto;
    text-align: center;
    width: 80%;
    margin-top: 175%;
    padding-top: 3%;
}

@font-face {
    font-family: 'si';
    src: url('../img/socicon.eot');
    src: url('../img/socicon.eot?#iefix') format('embedded-opentype'),
         url('../img/socicon.woff') format('woff'),
         url('../img/socicon.ttf') format('truetype'),
         url('../img/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(../img/socicon.svg) format(svg);
    }
}

.soc {
/*    overflow:hidden;*/
    margin:0; padding:0;
    list-style:none;
}

.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.soc li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 13vw;
    height: 13vw;
    line-height: 13vw;
    font-size: 6vw;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    margin-right: 40px;
    color: none;
    background-color: none;
}



.soc a:hover {
    z-index: 2;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.soc-icon-last{
    margin:0 !important;
}

.soc-facebook {
    color: #3e5b98;
    background-color: #ffffff;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}

.soc-facebook:hover {
    color: #ffffff;
    background-color: #3e5b98;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
.soc-facebook:before {
    content:'b';
}
.soc-twitter {
    color: #4da7de;
    background-color: #ffffff;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.5s;
}
.soc-twitter:hover {
    color: #ffffff;
    background-color: #4da7de;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.5s;
}
.soc-twitter:before {
    content:'a';
}
.soc-instagram {
    color: #9c7c6e;
    background-color: #ffffff;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.5s;
}
.soc-instagram:hover {
    color: #ffffff;
    background-color: #9c7c6e;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
.soc-instagram:before {
    content:'x';
}

/*///////////////PARALLAX///////////////*/
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
  /* ... parallax styles ... */

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer--4 {
    transform: translateZ(-.5px) scale(1.5);
/*    position: relative; top: -6150px;*/
    margin-top: 195%;
/*    top: -26%;*/
}

.parallax__layer--3 {
    transform: translateZ(-1px) scale(2);
/*    position: relative; top: -2190px;*/
    margin-top: 69%;
}

.parallax__layer--base {
    transform: translateZ(-1.5px) scale(2.5);
/*    position: relative; top: 2280px;*/
    margin-top: 45%;

}
.parallax__layer--back {
  transform: translateZ(-2px) scale(3);
}

.parallax__layer--text {
    transform: translateZ(-2px) scale(3);
}

.parallax__layer--text2 {
    transform: translateZ(-1.3px) scale(2.3);
    }

    .parallax__layer--sm {
        transform: translateZ(-.5px) scale(1.5);
    }

4 个答案:

答案 0 :(得分：0)

删除

transform: translateZ(-.5px) scale(1.5);

来自 parallax__layer parallax__layer - 4 图层

答案 1 :(得分：0)

  • 上课 .parallax__layer parallax__layer - 4 不定义转换
  • 。img .parallax__layer parallax__layer - 4 设置位置：绝对值;

你还必须做第二个，否则你底部的间隙仍然很小（在铬合金中）。

答案 2 :(得分：0)

我在Firefox和Chrome浏览器中检查过您的网站，Firefox似乎没有空白问题。该问题仅发生在Chrome中。

要解决此问题，请删除或覆盖以下CSS：

/* This is your current CSS style that cause the problems*/

.parallax__layer.parallax__layer--4 {
    transform: translateZ(-.5px) scale(1.5);
}

/* You can remove above or override with this CSS */

.parallax__layer.parallax__layer--4 {
    transform: none;
}

虽然这会导致您的图层从原始位置略微下降。它可以解决你的空白问题。希望这可以帮助你：）

答案 3 :(得分：0)

我的视差页面也遇到了同样的问题。 （我的影片具有视频背景。）

我偶然发现了一个非常有用的链接：https://www.proteusthemes.com/help/remove-white-space-header-footer/

我尝试减小页面几部分的margin-bottom。但是有效的方法是将其添加到视频代码的.css的ID中。我使用了多个值，最后将其设置为更大的负数：margin-bottom: -25rem;

现在我底部的白边消失了！

相关问题
最新问题