視差滾動背景圖像自動縮放和縮小

想要放大縮小圖像我試圖從CSS和正常的jQuery函數效果onscroll，但不工作。視差滾動背景圖像自動縮放和縮小

滾動我正在添加CSS進行縮放，但沒有縮小。

任何幫助是極大的appriciated。

2014-10-27 Raman jaswal

在這裏添加您的代碼... – 2014-10-27 07:49:40

對於視差滾動效果，最好的辦法是使用一個簡單的CSS動畫用3或4層，動畫從0到100％的背景如本example或該one

@keyframes animatedBackground { 
    from { background-position: 0 0; } 
    to { background-position: 100% 0; } 
} 

animation: animatedBackground 80s linear infinite;

對於進出一個CSS動畫變焦，這是不是一個真正的視差效果，它只是放大和縮小，爲此，你可以使用容器元素上的CSS轉變，如在this example

transition:All 1s ease; 
transform: scale(3) translateX(120px);

來源

2014-10-27 07:56:38

我想放大和縮小，但這個例子圖像正在水平滾動。所以請你能告訴我我的背景圖像如何放大和縮小 – 2014-10-27 08:16:16

我不確定你的意思是放大和縮小。 [this]（http://codepen.io/stefanjudis/pen/nrzHI）示例幫助你，它是一個垂直滾動 – 2014-10-27 08:18:49

你可以看到這個鏈接http://www.pushhere.com/我想要它相同。 – 2014-10-27 09:11:24

視差滾動背景圖像自動縮放和縮小

回答

相關問題