2016-08-04 11 views
0

は、私は私に、視差効果を追加したいの英雄フルスクリーンの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; 
} 
...本当のスクロールの動きを固定しないままに、この例を発見しました

答えて

0

@Amoro私はあなたのために1つのフィドルを作った。これを確認してください。私はあなたの問題がこのデモで解決されることを願っています。 check this linkhttps://jsfiddle.net/khatrikiran/3rsfaLr5/

+0

Kiran Khatri私はそれが働くようになったが、私のヒーローbgはもはや100の高さではない – Amoro

0

cssとhtmlを変更してみてください。

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

cssで画像を削除してみてください。

+0

キランハトリそれは何もしません。 – Amoro

+0

こんにちは、あなたは小さなフィドルを作ることができますか?私は何かを提案することができますか? –

関連する問題