Question

我想在我的页面上创建效果。我有一个云图像。当页面加载背景中的云图像时应移动。

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

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

Answer 1

你不需要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>

Answer 2

首先，您必须包含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>

然后你可以选择你想要的元素作为天空，例如：

<强> 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，我希望它适合您，谢谢

加载时背景位置增量效果

2 个答案: