typescript - parallax-js : 让元素自行移动

Question

按照教程：https ://github.com/wagerfield/parallax/issues/277

我尝试制作一些视差，当我的鼠标移动时它可以工作，但我想让它像这里的云一样自行移动：https ://codepen.io/CSS_Masters/pen/dCEoK

这是我的 html 文件：

<div id="scene" data-relative-input="true">
    <div data-depth="0.2" class="left-position" ><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic ") %></div>
    <div data-depth="0.4" class="left-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.7" class="left-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.8" class="left-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.1" class="left-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.6" class="middle-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.2" class="middle-position-1"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.4" class="middle-position-6"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.7" class="middle-position-5"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.8" class="middle-position-3"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.1" class="middle-position-4"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.6" class="bottom-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.2" class="bottom-position-1"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.4" class="bottom-position-2"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.7" class="bottom-position-3"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.8" class="bottom-position-4"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.1" class="bottom-position-5"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
</div>

我的打字稿文件：

import Parallax from 'parallax-js'

export default () => {
    var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene, {
        relativeInput: true, 
        calibrationThreshold: 100,
        calibrationDelay: 500,
        supportDelay: 500,
        calibrateX: false,
        calibrateY: true,
        invertX: true,
        invertY: true,
        limitX: false,
        limitY: false,
        scalarX: 10.0,
        scalarY: 10.0,
        frictionX: 0.4,
        frictionY: 0.4
    });
}

我怎样才能让它像示例中的云一样自行移动？我尝试设置属性摩擦X 和摩擦Y，但它不起作用。

标签： typescriptparallaxparallax.js

Answer 1

有点难以理解您遇到的确切问题是什么。所以我将回答这个问题：

“我怎样才能让它像示例中的云一样自行移动？”

您看到的“运动”与视差无关，完全与CSS关键帧规则有关。

本文档有一些关于如何使用关键帧配置动画的优秀示例和演示。由于您没有向我们提出具体问题，因此很难提供任何其他建议。

您可以执行以下操作以使图像看起来“摆动”：

.small-pic {
  height: 150px;
  width: 150px;
  -moz-animation: 5s ease 0s normal none infinite swing;
  -moz-transform-origin: center top;
  -webkit-animation: swing 5s infinite ease-in-out;
  -webkit-transform-origin: top;
}

@-moz-keyframes swing {
  0% {
    -moz-transform: rotate(-15deg);
  }
  50% {
    -moz-transform: rotate(15deg);
  }
  100% {
    -moz-transform: rotate(-15deg);
  }
}
@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(-15deg);
  }
  50% {
    -webkit-transform: rotate(15deg);
  }
  100% {
    -webkit-transform: rotate(-15deg);
  }
}


.align-center {
  text-align: center;
}

<div class="align-center">
  <img 
    src="https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png" 
    class="small-pic" 
  />
</div>

话虽如此，您提供的示例是一个非常复杂的示例，而您所询问的部分与视差无关（特别是指云的运动）。此外，该示例包含了解它们如何实现这一目标所需的所有代码。

如果您愿意，您可以花一些时间挑选您提供的示例，以便更熟悉它是如何完成的。