我一直在按照Justin Aguilar's Site的说明向我的网站添加一些CSS动画。它很好地组合在一起,看起来相当简单。但是我一直有一个触发入口动画的重大问题。
对于这个相当新的我理解这个问题可能是完全无法解决的,但是我在最近几天一直在玩它并没有成功。
要创建入口,元素的可见性最初设置为“隐藏”。然后javascript应该通过添加.pullUp类来触发动画,该类导致元素变得可见和动画。看起来很简单,但是我的所有元素在页面加载时开始动画或者它们保持不可见。
我真的可以使用一些帮助。这是Link to the code on JFiddle.
<img src="img/apple.png" id="apple" class="pullUp" />
<script= "text/css">
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;
}
</script>
<script>
$(window).scroll(function() {
$('#apple').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+150) {
$(this).addClass(".pullUp");
}
});
</script>
基本上,当图像滚动到时,我只需要让我的图像变得可见和动画。
我的网站的Bootstrap框架可能是问题的根源,但我不明白为什么会这样。另外请知道我使用外部样式表,并且为方便起见,此处仅包含所有代码。非常感谢任何见解或帮助!
答案 0 :(得分:0)
我注意到你的CSS里有浮动你没有指定位置(即位置:相对或位置:绝对)。这对于这类事物至关重要(编辑:显然不是,如下面的答案所示)。
添加位置后:相对于那些元素似乎有效,但是你可能需要修改动画,因为效果似乎很小。
答案 1 :(得分:0)
});
。这就是jQuery无法正常工作的原因。pullUp
类,因此动画立即开始。