Javascript 复杂视差效应元件定位
问题是，我正在使用Skrollr插件制作一个视差效果/动画站点，为我的一个客户演示一个产品 现在我在定位方面遇到了一个大问题，我需要将元素定位在视口之外，但它们必须附着到固定的包装上，并在div的中心设置动画 我只想在css中这样做，以避免太多js（Skrollr使用css代码来制作动画） 我尝试过的是将我的元素定位在+200%或-200%，这在较小的屏幕上效果很好，但在较大的屏幕上，我们仍然可以看到这些元素。所以这不是一个好的解决方案 我曾尝试使用css3值VH和VW，但之后要将它们放在屏幕中央是一个问题，而且Firefox和Chrome之间似乎有问题 这也是我的测试，这一个使用%： 这是使用VH和VW： 我提前感谢大家提供的任何帮助。给你=），但一个问题是，当内部div获得绝对/相对位置时，它就不再工作了。 但我不知道你的全部html结构等等 您还可以将对象从内部div中取出Javascript 复杂视差效应元件定位,javascript,html,css,Javascript,Html,Css,问题是，我正在使用Skrollr插件制作一个视差效果/动画站点，为我的一个客户演示一个产品 现在我在定位方面遇到了一个大问题，我需要将元素定位在视口之外，但它们必须附着到固定的包装上，并在div的中心设置动画 我只想在css中这样做，以避免太多js（Skrollr使用css代码来制作动画） 我尝试过的是将我的元素定位在+200%或-200%，这在较小的屏幕上效果很好，但在较大的屏幕上，我们仍然可以看到这些元素。所以这不是一个好的解决方案 我曾尝试使用css3值VH和VW，但之后要将它们放在屏幕中
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
width: 100%;
height: 100%;
overflow: hidden;
}
.outer-div {
left: -200px;
right: -200px;
position: absolute;
}
.object {
position: absolute;
left: 0;
width: 200px;
height: 200px;
background: #0000FF;
}
.move-object {
transition-duration: 10s;
margin-left: -100px;
left: 50%;
}
.inner-div {
width: 500px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
height: 200px;
}
</style>
<script>
function moveit() {
var element = document.getElementById('testobj');
element.setAttribute('class', 'object move-object');
}
</script>
</head>
<body>
<button onclick="moveit();">Click</button>
<div class="outer-div">
<div class="inner-div">
<div class="object" id="testobj">
</div>
</div>
</div>
</body>
</html>
正文，html{
宽度：100%；
身高：100%；
溢出：隐藏；
}
.外分区{
左：-200px；
右：-200px；
位置：绝对位置；
}
.反对{
位置：绝对位置；
左：0；
宽度：200px；
高度：200px；
背景：#0000FF；
}
.移动对象{
过渡时间：10秒；
左边距：-100px；
左：50%；
}
.内分区{
宽度：500px；
左边距：自动；
右边距：自动；
边框：1px纯黑；
高度：200px；
}
函数moveit（）{
var元素=document.getElementById（'testobj'）；
setAttribute（'class'，'object move object'）；
}
点击
left