Typescript 视差:使元素自行移动
在本教程之后: 我试着制作一些视差,当我的鼠标移动时,它会工作,但我想让它自己移动,就像这里的云: 这是我的html文件:Typescript 视差:使元素自行移动,typescript,parallax,parallax.js,Typescript,Parallax,Parallax.js,在本教程之后: 我试着制作一些视差,当我的鼠标移动时,它会工作,但我想让它自己移动,就像这里的云: 这是我的html文件: <div id="scene" data-relative-input="true"> <div data-depth="0.2" class="left-position" ><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "sm
<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>
我怎样才能使它像示例中的云一样自行移动?我试图设置属性frictionX和frictionY,但它不起作用 要理解你的确切问题有点难。。因此,我会回答以下问题: “我怎样才能让它像示例中的云一样自行移动?” 你所看到的“运动”与视差无关,而是关于视差 有一些关于如何使用关键帧配置动画的优秀示例和演示。很难提供任何其他建议,因为您没有向我们提出具体问题 您可以这样做,使图像显示为“摆动”:
。小图片{
高度:150像素;
宽度:150px;
-moz动画:5s轻松0s正常无无限摆动;
-moz变换原点:中心-顶部;
-webkit动画:swing 5s无限轻松输入输出;
-webkit转换原点:顶部;
}
@-moz关键帧摆动{
0% {
-moz变换:旋转(-15度);
}
50% {
-moz变换:旋转(15度);
}
100% {
-moz变换:旋转(-15度);
}
}
@-webkit关键帧摆动{
0% {
-webkit变换:旋转(-15度);
}
50% {
-webkit变换:旋转(15度);
}
100% {
-webkit变换:旋转(-15度);
}
}
.居中对齐{
文本对齐:居中;
}
谢谢,这帮了大忙!这就是我想做的,我想我把视差和css制作的动画搞混了,我真的认为这个例子中的所有动作都是用视差效果制作的。再次感谢!没问题!视差本质上是指背景以不同于前景的速度滚动。您的示例确实使用了视差,但这并不是云的“摇摆”效果。简单视差效果的好演示。
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
});
}