怎么做滚动到的才触发它的CSS3动画

html-css020

怎么做滚动到的才触发它的CSS3动画,第1张

写问题要详细点啊！

不知道  你的滚动是指什么 ，不过大部分滚动条件 都是用 scrollTop完成的！

获取页面 卷曲长度  做判断

写条件：当卷曲长度 大于多少时    触发动画

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

像这种效果，你要想知道，

已经下载下来，你拆开看一下就知道了。

说说原理，这里并不是纯css3，，只是用css3定义好动画，

@-moz-keyframes tips {

0% {box-shadow: 0px 0px 0px #f00}

25% {box-shadow: 0px 0px 8px #f00}

50% {box-shadow: 0px 0px 0px #f00}

100% {box-shadow: 0px 0px 8px #f00}

}

然后，js在切屏后，用Js来触发这一个样式，这个样式调用了刚才定义的动画。

.tips {

-webkit-animation:tips 1s

-moz-animation:tips 1s

}

当然css3是可以做的，只是用纯css3，就没办法像这样可以拖动切屏，这个是需要js或者jq来完成。。。

前几天刚做了几个微信分享的活动专题页面，单屏切换那种。应该是楼主需要的那种。

hahnzhu/parallax.js · GitHub - 这个是现成又快速的，每屏页面自带动画。要快又懒的话就直接用里面demo套进去再更改下元素的先后顺序就行了。

yanhaijing/zepto.fullpage · GitHub - 移动端的fullpage。比较灵活，页面动画需自己写。

tgideas/motion · GitHub - 还有这个。

类似的库应该还有很多，以上都是针对移动web的，想快速又不想动脑子就直接用了。