Ich möchte einen Effekt auf meiner Seite erstellen. Ich habe ein Wolkenbild. Beim Laden der Seite sollte das Bild im Hintergrund verschoben werden.Hintergrundposition Inkrementiereffekt beim Laden
<img src="bg.jpg" alt="bg">
Wie erstellt man diesen Effekt mit JavaScript backgroundPosition?
Zuerst müssen auch Hinweise für jQlouds Plugin:
<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>
Dann können Sie ein Element auswählen Sie es als SKY machen wollen, Zum Beispiel:
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,
});
Sie verweisen Documentation für weitere Optionen Plugin.
Siehe JsFiddle DEMO, Ich hoffe, es funktioniert für Sie, Dank
wow, das ist nett, danke dir –
@RjAwais Gern geschehen, vergessen Sie nicht zu upvote/akzeptieren Sie diese Antwort, wenn es Ihnen hilfreich war, danke –
Sie nicht Javascript benötigen, können Sie es wirklich tun mit CSS3 nur, hier ist ein Beispiel, können Sie die Parameter ändern, wenn Sie wollen:
@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>
, was Sie bisher versucht haben ?? –
Ich erstelle eine Seite. im hintergrund möchte ich, dass sich die wolke bewegen sollte. Ich brauche Javascript-Code für bewegte Wolken Bild mit Javascript –
(anstelle von reinen js) Siehe dieses jQuery-Plugin [jqlouds] (http://enricodeleo.github.io/jqlouds/) –