沒有滾動的視差/肯恩燒傷效果

好吧，所以我對圖像應用了視差/肯恩燒傷效果，但我不相信我用這樣做的方法很好。它在webkit瀏覽器上運行良好，但在Firefox上不是很流暢，在IE中根本不起作用。我使用了一個名爲pan的類來改變背景位置。沒有滾動的視差/肯恩燒傷效果

有沒有人有任何想法的方式來實現這種效果，將光滑和平移很好。

#banner{ 
    background-size: 100%; 
    background-attachment: fixed; 
    background-repeat:no-repeat; 
    background-position:0 0; 
    padding-top:35.15625%; 
    -o-transition-duration: 10s; 
    -ms-transition-duration: 10s; 
    -moz-transition-duration: 10s; 
    -webkit-transition-duration: 10s;  
    }

在一個點上我甚至有在.pan類規模小，看起來鍍鉻偉大的，但在Firefox

更慘

#banner.pan{ 
    background-position:0 160%; 
    }

來源

2013-07-24 Chris G-Jones

這裏ken燒傷效果的免費插件，你可以下載它

這裏是demo

來源

2013-07-24 04:34:33 Hushme

謝謝，該插件看起來不錯。你認爲使用2個插件（jquery.transit＆slideshowify）對1張圖片執行此效果有點矯枉過正嗎？我喜歡我做這件事的方式是它非常輕巧。不說這個插件是壞的，只是尋找一個意見:-) –

我認爲使用一個插件會更好，我不建議爲同一個滑塊插兩個插件 – Hushme

肯燃燒插件說，你需要包括它兩個工作？ –

沒有滾動的視差/肯恩燒傷效果

回答

相關問題