加載時的背景位置增量效果

-4

我想在我的頁面上創建效果。我有一個雲形象。當頁面加載後臺雲圖時應該移動。加載時的背景位置增量效果

<img src="bg.jpg" alt="bg">

如何使用JavaScript backgroundPosition創建此效果？

來源

2016-04-15 Rj Awais

你有什麼到目前爲止已經試過？ –

我正在創建一個頁面。在背景中，我希望那個雲應該移動。我需要javascript代碼移動雲圖片使用javascript –

（而不是純js）請參閱此jQuery插件[jqlouds]（http://enricodeleo.github.io/jqlouds/） –

首先，你必須包括jQlouds插件引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqlouds/0.2.3/jquery.jqlouds.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqlouds/0.2.3/jquery.jqlouds.min.js"></script>

然後你可以選擇你想要讓它作爲SKY的元素，例如：

HTML：

<div id="sky" style="height:400px; background-color: blue;"> 

</div>

JS：

$('#sky').jQlouds({ 
    minClouds: 8, // minimum amount of clouds 
    maxClouds: 10, // maximum amount of clouds 
    wind: true, 
});

你可以參考插件Documentation了更多的選擇。

見JsFiddle DEMO，我希望它爲你的作品，謝謝

來源

2016-04-15 12:56:14

哇這是很好謝謝你 –

@RjAwais不客氣，不要忘了upvote /接受這個答案，如果它對你有幫助，謝謝 –

你並不需要使用Javascript，你其實可以用CSS3做的只是，這裏有一個例子，你可以改變參數，如果你想：

@keyframes bgPosition { 
 
    from { 
 
    background-position: 0px 0px; 
 
    } 
 

 
    to { 
 
    background-position: 65px 0px; 
 
    } 
 
} 
 

 
body { 
 
    background-image : url('http://images.clipartpanda.com/white-clouds-png-white-cloud-clipart-png-179.jpg'); 
 
    background-repeat: repeat; 
 
    background-size: 65px 60px; 
 
    animation-duration: 3s; 
 
    animation-timing-function: linear; 
 
    animation-name: bgPosition; 
 
    animation-iteration-count: infinite; 
 
}

<body> 
 
</body>

來源

2016-04-15 12:30:03

加載時的背景位置增量效果

回答

相關問題