首页 > 求教大神,这样的有点渐进的效果的实现原理,已及是怎么实现的

求教大神,这样的有点渐进的效果的实现原理,已及是怎么实现的

http://demo.cssmoban.com/cssthemes3/ft5_16_slant/index.html
其实也算是一个听常见的效果,很多响应式的网站都会使用。就是在页面滚动的时候,元素会有从左边或者上面,滑下来的效果是怎么实现的。就CSS动画做的话,是可以做到动画,但是如何鉴别元素正好进去可视区,然后才会添加class去执行动画?大神求教


大神在哪呢? 坐等啊


1个css库(animate.css), 1个js的插件(waypoints.js)

animate.css
https://github.com/hitherejoe/animate

waypoints.js:
https://github.com/imakewebthings/waypoints

简单的说就是, 用waypoints监听dom是否在当前屏幕, 然后给dom添加或者删除animate动画

            $('#fh5co-features').waypoint( function( direction ) {
                                        
                if( direction === 'down' && !$(this).hasClass('animated') ) {

                    $(this).addClass('animated');
                        
                }
            } , { offset: '70%' } );

链接scrollreveal.js 这个更好用,用法还很简单

【热门文章】
【热门文章】