視差效果

我使用的是jQuery庫目前：http://pixelcog.github.io/parallax.js/，而不是與它比較流行的對應混淆：https://github.com/wagerfield/parallax 視差效果

我不在乎，如果我用一個jQuery插件，或沒有，但我當我向下滾動白色div上的紅色div時，很難獲得視差效果。 我想在這兩個底部div的相同效果，因爲我在白色div和圖片div上。

FIDDLE：https://jsfiddle.net/jzhang172/rcx2zpau/1/

澄清：我並不需要一個jQuery插件，我只是在尋找指定的行爲。

更新：我看到工作的唯一事情是從的jQuery插件Scrollmagic，請點這裏：http://scrollmagic.io/examples/，所以我會嘗試和後的結果在這裏。

.one{ 
 
    height:500px; 
 
    overflow:hidden; 
 
} 
 
.someshit{ 
 
    height:300px; 
 
} 
 
.someothershit{ 
 
    height:700px; 
 
    background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script> 
 
<div class="parallax-window one" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/0/0d/025Pikachu.png"></div> 
 
<div class="someshit"> 
 
Heyheyheyh, some text<br> 
 
Heyheyheyh, some text<br> 
 
Heyheyheyh, some text<br> 
 
Heyheyheyh, some text<br> 
 
</div> 
 
<div class="someothershit" data-parallax="scroll"> 
 
HELP ME PARALLAX ONTO THE WHITE DIV PLEASE 
 
</div>

來源

2016-07-22 Snorlax

它看起來像該庫僅適用於圖像。它會更改嵌套圖像的頂部位置以創建該效果 –

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    .parallax { 
/* image can be used */ 
background-color: grey; 

/* Set a specific height */ 
min-height: 500px; 

/* Create the parallax scrolling effect */ 
background-attachment: fixed; 
background-position: center; 
background-repeat: no-repeat; 
    background-size: cover; 
} 
</style> 
</head> 
<body> 

<div class="parallax"></div> 

<div style="height:1000px;background-color:red;font-size:36px"> 
    This is inside Parallax Div 
</div> 

</body> 
</html>

來源

2016-07-22 17:16:51

回答

相關問題