Question

我有一个英雄全屏bg剖面图像，我想添加视差效果给我发现这个例子http://pixelcog.github.io/parallax.js/

它如何保持固定没有真正的滚动运动..

<div id="hero-unit" class="parallax-window" data-parallax="scroll"> 
    <div id="hero-unit-content">
        <h1 class="hero-title">Welcome</h1>
        <p class="hero-subtitle">Click Here Close</p>
        <p><a class="button subdued-button alt-button" role="button" href="#">Learn more</a></p>            
        </div>       
    </div> 



#hero-unit {
    width: 100%;
    height: 100%;
    background: url(../images/backgrounds/bg.jpg) no-repeat top center;
    background-color: #000;
    background-size: cover;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;  
}

#hero-unit-content {
    position: absolute;
    width: 100%;
    bottom: 15%;    

}

#hero-unit-content h1, #hero-unit-content p {
    text-align:center;
    text-transform: uppercase;
}


.hero-title {
    text-shadow:0 2px 2px rgba(0,0,0,0.5);
    color:#bebebe;
    font-weight:300;
    font-size: 60px;
    font-family: 'Oswald', sans-serif;  
}

.hero-subtitle {
    max-width:600px;
    margin:25px auto;
    padding:10px 15px;
    background-image: url(../images/opacity-overlay.png);
    color:#5d6264;  
    font-weight:500;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.1em;
}

Answer 1

请更改css和html并尝试一下。

<div id="hero-unit" class="parallax-window" data-parallax="scroll" data-image-src="your image path/image.jpg">

删除css中的图片并尝试一下。

Answer 2

@Amoro我为你做了一个小提琴。请检查一下。我希望你的问题在这个演示中得到解决。 check this link https://jsfiddle.net/khatrikiran/3rsfaLr5/

视差部分滚动

2 个答案: