Question

我正在使用此处完成的效果在我的网站上工作：http://keithclark.co.uk/articles/pure-css-parallax-websites/除了chrome之外，一切正常，我不知道为什么。有人可以告诉我问题在哪里吗？这是我的网页：http://emmanuelmelendez.com.mx/home.html谢谢！

HTML
<header>
<!-- !Menu -->
    <ul>
        <li><a href="home.html"> Inicio</a></li>
        <li><a href="about.html">Acerca de</a></li>
        <li><a href="#">Portafolio</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>

</header> <!--end Menu-->

<div class="parallax">
<!-- !Demo reel-->
    <div class="parallax__group">
        <div class="parallax__layer parallax__back">
            <video autoplay loop poster="img/bg/Logo.jpg" class="background">
                <source src="video/bg/IntroReel.webm" type="video/webm">
                <source src="video/bg/IntroReel.mp4" type="video/mpeg">
            </video>
        </div>      
        <div id="reel" class="parallax__layer parallax__base">
            <h1>Bienvenidos a mi sitio</h1>
            <a href="#">Ver Demo Reel</a>
            </div>              
    </div><!--end Demo Reel-->

<!-- !Servicios -->
    <div class="parallax__group">
        <div class="parallax__layer parallax__base" id="servicio">
            <h1>Producciones</h1>
        </div>
    </div><!--end Servicios-->

<!-- !Video --> 
    <div class="parallax__group">
        <div class="parallax__layer parallax__back">
            <video autoplay loop poster="img/bg/video.jpg" class="background">
                <source src="video/bg/fondoVideo.webm" type="video/webm" >
                <source src="video/bg/fondoVideo.mp4" type="video/mpeg">                    
            </video>
        </div>

        <div class="parallax__layer parallax__base" >               
            <h2>Audiovisual</h2>            
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed odio eget facilisis. Aliquam diam eros, posuere et hendrerit sed, pharetra pretium lorem. Praesent sodales risus neque, a vulputate libero pretium sit amet. Donec sapien nunc, eleifend vitae pellentesque ac, lobortis a eros. Aenean fringilla odio sit amet laoreet semper. Donec ut dapibus magna. Sed eu porta purus. Duis lorem mauris, elementum semper sodales in, tincidunt vel nibh.</p>
        </div>              
    </div><!--end Video-->

<!-- !Web -->
    <div class="parallax__group" id="web">
        <div class="parallax__layer parallax__base">                
            <h2>Desarrollo Web</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed odio eget facilisis. Aliquam diam eros, posuere et hendrerit sed, pharetra pretium lorem. Praesent sodales risus neque, a vulputate libero pretium sit amet. Donec sapien nunc, eleifend vitae pellentesque ac, lobortis a eros. Aenean fringilla odio sit amet laoreet semper. Donec ut dapibus magna. Sed eu porta purus. Duis lorem mauris, elementum semper sodales in, tincidunt vel nibh.</p>
        </div>              
    </div><!--end Web-->

<!-- !Fotografia -->
    <div class="parallax__group">
        <div class="parallax__layer parallax__back">
            <img class="background" src="img/bg/foto.jpg" alt="Fondo Foto">
        </div>      
        <div class="parallax__layer parallax__base">                
            <h2>Fotografía</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta sed odio eget facilisis. Aliquam diam eros, posuere et hendrerit sed, pharetra pretium lorem. Praesent sodales risus neque, a vulputate libero pretium sit amet. Donec sapien nunc, eleifend vitae pellentesque ac, lobortis a eros. Aenean fringilla odio sit amet laoreet semper. Donec ut dapibus magna. Sed eu porta purus. Duis lorem mauris, elementum semper sodales in, tincidunt vel nibh.</p>
        </div>              
    </div><!--end Fotografia-->

<!-- !Redes -->
    <div class="parallax__group" id="redes">    
        <div class="parallax__layer parallax__base">
        <h3>Sígueme en mis redes sociales</h3>
        <a href="https://www.instagram.com/emmanu_stuff/">Instagram</a>
        <br>
        <!-- SnapWidget -->
        <iframe src="http://snapwidget.com/sc/?u=ZW1tYW51X3N0dWZmfGlufDE1MHwzfDN8fHllc3wyMHxub25lfG9uU3RhcnR8eWVzfG5v&ve=271115" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:960px; height:150px"></iframe>
        <br>
        <br>
        <a href="https://500px.com/emmanuelmelendz">500px</a>

        <br>
        <!-- 500pxWidget -->
        <iframe src="http://500pxwidget.com/in/?u=ZW1tYW51ZWxtZWxlbmR6fGlufDEyMHw2fDF8fG5vfDV8" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:750px; height: 125px" ></iframe>             
        </div>              
    </div><!--end Redes-->

<!-- Copyright-->   
    <div class="parallax__base">            
        <div id="Copyright"> Emmanuel Melendez ©<script type="text/javascript">
                var d = new Date()
                document.write(d.getFullYear())
            </script>
        </div>  
    </div><!-- end copyright-->     
</div><!-- end parallax-->

CSS

body{
    background: white;
    font-family: Light, Fallback, helvetica;
    color: white;
    font-size: 21px;
    overflow: hidden;
    text-align: center;
}
    h1{
        margin-top: 35vh;
        background: rgba(0,0,0,.6);
        padding: 10px;
        font-family: Titulo,Fallback, helvetica;
        font-size: 90px;
    }

    h2{
        margin-top: 25vh;
        background: rgba(0,0,0,.6);
        padding: 10px;
        font-family: Titulo,Fallback, helvetica;
        font-size: 90px;
    }

    h3{
        margin-top: 15vh;
        background: rgba(0,0,0,.6);
        padding: 10px;
        font-family: Titulo,Fallback, helvetica;
        font-size: 60px;
    }

    p{
        width: 960px;
        margin: 0 auto;
        padding: 16px;
        text-align: justify;
        background: rgba(0,0,0,0.6);
    }

/* !PC */    
@media all and (min-width:600px) {    
/* Menu */    
    header{
        background: white;
        height: 44px;
        font-family: Menu, Fallback, Helvetica;
        width: 100%;
        border-bottom: 1px solid #b31219;
    }

    header ul{
        width: 960px;
        padding-left: 20px;
        margin: 0 auto;
        list-style-type: none;
        color: black;
    }

    header li{
        display: table-cell;
        vertical-align: middle;
        padding-top: 11px;
    }

    header li a{
        padding: 12px 40px;
        text-decoration: none;
        color: black;
    }

    header li a:hover{
        background: black;
        color: white;
    }

/* Parallax */ 
    .parallax {
        height: 500px; /* fallback for older browsers */
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-perspective: 300px;
        perspective: 300px;
     }

    .parallax__group {
        position: relative;
        height: 100vh;
        width: 100vw;
        -webkit-transform-style: -webkit-preserve-3d;
        transform-style: preserve-3d;
    }

    .parallax__layer{
        position: absolute;
        overflow: visible;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .parallax__base {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        z-index: 2;
    }

    .parallax__back {
        -webkit-transform: translateZ(-300px) scale(2);
        transform: translateZ(-300px) scale(2);
        z-index: 1;
    }   
 /* !Reel */
    #reel a{
        text-decoration: none;
        color: white;
        font-family: Titulo,Fallback, helvetica;
        font-size: 50px;
        text-align: center;
        padding: 10px 20px; 
        background: #b31219;
        border-radius: 15px;
    }

    #reel a:visited{
    }

    #reel a:hover{  
        background: black;
    }

    #reel a:active {
        color:black;
        background: white;
    }


/* Servicios */
    #servicio{
        background: #005280;
    }

/* Web */
    #web{
        background-image: url('/img/bg/web.jpg');
        background-position: center center;
        background-size: auto 100%;

    }
/* Fondos*/
    .background{
        /* solo usar para alinear contenido en formato full HD*/
        width: auto;
        height: 100vh;      
        position: fixed;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        z-index: -100;
    }

/* Redes */
    #redes{
        background-image: url('/img/bg/medios.jpg');
        background-size: 100% auto;
        font-size: 50px;
        font-family: Titulo, Fallback, helvetica;
    }

    #redes a{
        padding: 0px 15px;
        background: black;
        text-decoration: none;
        color: white;
    }

    #redes a:hover{
        background: white;
        color: black;
    }

/* !Copyright */
    #Copyright{
        padding-top: 6vh;
        width: 100%;
        height: 16vh;
        background: #b31219;
        color: white;
        font-size: 50px;
        font-family: Titulo, Fallback, helvetica; 
        text-align: center;
    }
}

Answer 1

您应该使用preserve-3d代替-webkit-preserve-3d

.parallax__group {
    position: relative;
    height: 100vh;
    width: 100vw;
    -webkit-transform-style: preserve-3d; /* <-- */
    transform-style: preserve-3d;
}

完整的CSS视差网站不工作铬

1 个答案: