Javascript动画定位和缩放问题

时间:2014-06-30 15:43:31

标签: javascript jquery html css css3

所以我目前正在制作一个有多个content views的单个屏幕,可以从一个按钮访问动态区域的一侧。我发现这个回购(https://github.com/ian-de-vries/Multi-Screen.js)实现了与我想要的非常相似的东西,只有它需要全屏,而不是仅仅是某个区域。到目前为止,我已经非常接近表演,正如我所希望的那样,但过去几个小时让我感到难过。目前有两个问题:

1)相对divs使用其% width的{​​{1}}值,而div的动画使用整个divs { {1}},使动画% width更大。我认为解决这个问题的方法是在动画期间计算screen然后在动画后删除它。如果您在divs中设置了fixed width(不适合该网站),则动画是平滑的,并且在制作动画时具有正确的fixed width,但随后会导致下一个问题。

2)由于css的原始功能,动画直接沿着中心移动,由于width,动画再次增加了动画效果。

虽然我已经尝试解决这两个问题,但js虽然我在其他编程语言中拥有丰富的经验,但仍然超出了我的范围。在编辑offset content JS时,我以为自己正在做些什么,但我无法实现我想要实现的目标。无论如何,下面是一个快速虚拟站点,可以很好地复制实际站点上的代码,并产生相同的问题。要使其正常工作,请将这两个文件放在包含repo的pre/post/animation_css文件的文件夹中。

variables

CSS:

multi-screen.js

1 个答案:

答案 0 :(得分:1)

结束使用其他替代方案。我选择的是fullPage.js。尽管适用于全屏网站,它仍可用于所需的功能。希望这有助于任何想要实现类似目标的人。