parallax-js :让元素自行移动
parallax-js : make the element moving by itself
学习教程: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
});
}
如何让它像示例中的云一样自行移动?我试图设置属性 frictionX 和 frictionY 但它不起作用。
有点难以理解您遇到的确切问题是什么。所以我会回答这个问题:
"How can I make it move by itself like the clouds in the example?"
您看到的"movement"与视差无关,与CSS
keyframes rule有关。
This documentation 有一些关于如何使用关键帧配置动画的优秀示例和演示。很难提供任何其他建议,因为您没有向我们提出具体问题。
你可以做这样的事情来使图像看起来 "swing":
.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>
话虽如此,你提供的例子是一个非常复杂的例子,你问的部分与视差无关(具体指云的移动)。此外,该示例包含了解他们如何实现该目标所需的所有代码。
如果您愿意,可以花一些时间将您提供的示例分开,以便更加熟悉它是如何完成的。
学习教程: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
});
}
如何让它像示例中的云一样自行移动?我试图设置属性 frictionX 和 frictionY 但它不起作用。
有点难以理解您遇到的确切问题是什么。所以我会回答这个问题:
"How can I make it move by itself like the clouds in the example?"
您看到的"movement"与视差无关,与CSS
keyframes rule有关。
This documentation 有一些关于如何使用关键帧配置动画的优秀示例和演示。很难提供任何其他建议,因为您没有向我们提出具体问题。
你可以做这样的事情来使图像看起来 "swing":
.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>
话虽如此,你提供的例子是一个非常复杂的例子,你问的部分与视差无关(具体指云的移动)。此外,该示例包含了解他们如何实现该目标所需的所有代码。
如果您愿意,可以花一些时间将您提供的示例分开,以便更加熟悉它是如何完成的。